使用
直接<script>导入
构建大型项目时使用NPM工具，npm install vue
介绍：
声明式渲染
使用简洁的模板语法来声明式地将数据渲染进DOM地系统
<div id="app">
<p>{{ message }}</p>
</div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
指令：
1.v-bind
2.v-if
3.v-for 在数组循环
<li v-for="todo in todos">
{{ todo.text }}
</li>
4.v-on 添加事件监听器
5.v-model 实现表单输入和应用状态之间的双向绑定
组件化应用构建
在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。
定义
Vue.component('todo-item', {
// todo-item 组件现在接受一个
// "prop"，类似于一个自定义特性。
// 这个 prop 名为 todo。
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
例子：与v-for v-bind组合使用
HTML
<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>
JS
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实例被创建时，其data的所有属性都会被添加到Vue的相应式系统，但是如果新添加进的属性则不会被添加到该系统中。当把一个对象添加进一个vue实例中时，改变其中一个的值，另一个也会发生变化.
Object.freeze()会阻止修改属性的
Vue实例会暴露一些有用的实例属性和方法，带$
实例生命周期钩子
运行这种函数，会给用户在不同阶段添加代码的机会
例：created钩子可以用于一个实例被创建后执行代码
new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
// => "a is: 1"
也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。不要在选项属性或回调上使用箭头函数，因为没有this，可能会导致Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误
模板语法
文本
双大括号 <span> Message:{{msg}} </span>
通过v-once指令,可以一次性绑定，不再更新<span v-once>这个将不会改变: {{ msg }}</span>
原始HTML
双大括号会把数据解释为普通文本，而非html代码，如果需要输出html，需要使用v-html
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
特性
HTML特性需要使用v-bind指令？？？
<div v-bind:id="dynamicId"></div>
使用JS表达式
对于所有的数据绑定，vue.js都提供了完全的JS表达式支持。
例：
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
但是呢，只能绑定一个表达式，所以下面的都不会生效
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
动态参数
可以用方括号括起来的JS表达式作为一个指令的参数？？？
<a v-bind:[attributeName]="url"> ... </a>
对动态参数值的约束:预期求出一个字符串，异常情况下为null，这个特殊的null值会显示地将绑定移除，任何非字符串类型地值都会触发一个警告。
对其表达式约束：不可使用空格和引号；浏览器会强制将键名转为小写<a v-bind:[someAttr]="value"> ... </a>
修饰符？？？
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit">...</form>
计算属性和侦听器
基础例子：
html:
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
JS:
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
提供的函数将用作属性 vm.reversedMessage 的 getter 函数.
同样可以用{{reversedMessage()}}, 区别是计算属性是基于响应依赖缓存的，只要message没有比变化，那么就不会重新求值；而函数每次运行都会重新求值。
侦听属性：一种更加通用的观察和响应vue实例上的数据变动
计算属性的setter
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
