Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。
View 层 - HTML 代码如下：
<div id="app">
{{ message }}
</div>
Model 层 - JavaScript 代码如下(需放在指定的HTML元素之后)：
new Vue({
el:'#app',
data: {
message:'Hello World!'
}
});
双向数据绑定：
创建一个 view 层 HTML 文件：vueapp.htm，以及 model 层文件：vueapp.js，
然后通过 vue.js（使用v-model这个指令）完成中间的底层逻辑，实现绑定的效果。改变其中的任何一层，另外一层都会改变。
vueapp.htm 文件代码：
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
vueapp.js 文件代码：
new Vue({
el: '#app',
data: {
message: '菜鸟教程!'
}
})
列表输出：
列表输出使用 v-for(v-for取代了1.0以前版本中的v-repeat) 这个指令就能完成:
<body>
<div id="app">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue.js' },
{ text: 'Build Something Awesome' }
]
}
})
</script>
</body>
条件判断：
<body>
<div id="app">
<div v-if="Math.random() > 0.5">
随机数大于 0.5
</div>
<div v-else>
随机数不大于 0.5
</div>
</div>
<script>
new Vue({
el: '#app'
})
</script>
</body>
v-show：
v-show作用与v-if类似，不同的是v-show的元素会始终渲染并保持在 DOM 中,且v-show不支持<template>标签。
<h1 v-show="ok">Hello!</h1>
过滤器：
与Linux中的管道类似，vue.js也使用的是|:
<body>
<div id="app">
<p>{{message}}</p>
<p>{{message | uppercase}}</p>
<p>{{message | reverse | uppercase}}</p>
</div>
<script>
Vue.filter('reverse', function (value) {
return value.split('').reverse().join('')
})
new Vue({
el: '#app',
data: {
message:'www.runoob.com'
}
})
</script>
</body>
这里reverse并不是内建的过滤器，我们可以用Vue.filter自定义:
Vue.filter('reverse', function (value) {
return value.split('').reverse().join('')
})
箭头函数 => 和this
=>是匿名函数的一种简写，即lamda表达式,格式为( 形参列表 ) => { 函数体 },
使用箭头函数，内部函数继承了外围作用域的this值，再也不用写var that=this这种hack代码了。
复制代码
'渐进式框架'
'官方文档'
'声明式渲染'
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
除了文本插值，我们还可以像这样来绑定元素特性：
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
这里我们遇到了一点新东西。你看到的 v-bind 特性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。
可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。
'条件与循环'
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
<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: '整个牛项目' }
]
}
})
'处理用户输入'
<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('')
}
}
})
'双向绑定'
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 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。
仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：
在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单：
// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
template: '<li>这是个待办项</li>'
})
<div id="app-7">
<ol>
<!--
现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量，即其内容可以是动态的。
我们也需要为每个组件提供一个“key”，稍后再
作详细解释。
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
</div>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})
---------------------------VUE实例------------------------------------
当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。
当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。
使用 Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变。
Vue 实例暴露了一些有用的实例属性与方法。它们都有前缀$，以便与用户定义的属性区分开来。
'模板语法'
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
<span>Message: {{ msg }}</span>
Mustache 标签将会被替代为对应数据对象上msg属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。
<span v-once>这个将不会改变: {{ msg }}</span>
如果没有缓存，我们将不可避免的多次执行A的getter！如果你不希望有缓存，请用方法来替代。
''
''
''
''
''
''
''
''
复制代码