AppLocale（Applocale 卸载）

vue.js是一套前端框架，主要关注的是视图层。在vue框架中，只需要提供数据，绑定到具体的id就可以了。vue就是这套数据绑定、显示在视图层的前端框架。

在官网上，引入vue2的代码为：

<script src=https://czxt.haoyundao.net/"网页链接>

vue的核心是采用简单的方式，将数据渲染到DOM（Document Object Model）的系统中。

new vue 是新建一个vue应用。

鼠标悬停几秒钟查看此处动态绑定的提示信息！

var app2 = new Vue

{

el: '#app-2', data: { message: '页面加载于 ' + new Date

.toLocaleString

} }

这里的v-bind是指令，表示绑定title和message，让两者的信息保持一致。

vue的判断语句代码：

//<div id="app-3"> <p v-if="seen">现在你看到我了</p> </div>

var app3 = new Vue

{

el: '#app-3', data: { seen: true

} }

vue的循环语句代码：

//<div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div>

var app4 = new Vue

{

el: '#app-4', data: { todos: [

{ text: '学习 JavaScript' },

{ text: '学习 Vue' },

{ text: '整个牛项目' } ] } }

vue的监控语句代码：

//<div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage">反转消息</button> </div>

var app5 = new Vue

{

el: '#app-5',

data: { message: 'Hello Vue.js!' },

methods: { reverseMessage: function

{

this.message = this.message.split

''

.reverse

.join

''

} } }

只是更新了应用的状态，但DOM不需要操作，都是由vue进行操作，只需要关注逻辑层。

vue的指令v-model使用：

<div id="app-6"> <p>{{ message }}</p> <input v-model="message"> </div>

var app6 = new Vue

{ el: '#app-6', data: { message: 'Hello Vue!' } }

vue可以用小型、独立、可复用的组件构建大型应用，可构成组件树。

简单的组件模板：

// 定义名为 todo-item 的新组件

Vue.component

'todo-item', { template: '

这是个待办项

' }

var app = new Vue(...)

现在你可以用它构建另一个组件模板：

<todo-item></todo-item>