一、安装与介绍
1.用<script>引入
直接下载并用script标签引入，Vue会被注册为一个全局变量；在开发环境下，不能使用压缩版本，否则会失去所有常见错误相关的警告。
2.命令行工具
vue提供了官方的cli，为单页面应用（SPA）快速搭建繁杂的脚手架；会带有热重载
3.vue介绍
vue是一套用于构建用户界面的渐进式框架，可以自底向上逐层应用，vue核心库只关心视图层
4.声明式渲染
vue.js的核心是一个允许语法采用简洁的模板来声明式的将数据渲染进DOM的系统：
<div id="app">
{{ message }}
</div>var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})带有前缀v-的指令 比如v-bind:title 动态绑定了title属性：
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})5.条件与循环
v-if 可以将data中的数据绑定到DOM结构：
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</divvar app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})还有v-for 绑定数组 渲染数据列表：
<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: '整个牛项目' }
]
}
})6.处理用户输入
通过v-on指令添加事件监听器
<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('')
}
}
})可以通过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!'
}
})7.组件化应用构建
在vue中注册组件：
//定义名为todo-item的组件
Vue.component('todo-item',{
template:"<li>这是个待办项</li>"
})
var app = new Vue(...)然后就可以在模板里去创建组件实例了：
<ol>
<!-- 创建一个 todo-item 组件的实例 -->
<todo-item></todo-item>
</ol>二、vue实例
1.创建一个vue实例
一个vue应用由一个通过new Vue创建的根vue实例，以及可选的嵌套的、可复用的组件树组成。
var vm = new Vue({
//选项
})2.数据与方法
当一个vue实例被创建时，它将data对象中的所有属性加入到vue的响应式系统中，当这些属性的值发生改变时，视图将会产生响应，即匹配更新为新的值。
// 我们的数据对象
var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
data: data
})
// 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2
// ……反之亦然
data.a = 3
vm.a // => 3注意：
（1）只有 当实例被创建时就已经存在于data中的属性才是响应式的
（2）使用Object.freeze()会阻止修改现有的属性，即响应系统无法再追踪变化
var obj = {
foo: 'bar'
}
Object.freeze(obj)
new Vue({
el: '#app',
data: obj
})<div id="app">
<p>{{ foo }}</p>
<!-- 这里的 `foo` 不会更新！ -->
<button v-on:click="foo = 'baz'">Change it</button>
</div>（3）vue实例其他的属性方法：$data、$el 、$watch
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
// 这个回调将在 `vm.a` 改变后调用
})3.实例生命周期钩子
上边是vue实例的八大生命周期图，要牢记！！
created钩子可以用来在一个实例被创建之后执行代码：
new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
// => "a is: 1"生命周期钩子的this上下文指向调用它的vue实例。不要在选项属性或回调上使用箭头函数
三、模板语法
1.双大括号（{{ }}）文本插值
<span>Message: {{ msg }}</span>如上边代码中，绑定的数据对象上msg属性发生改变，插值处的内容就会随之更新。
可执以使用v-once指令，执行一次性的插值，当数值改变时，插值处的内容也不会更新：
<span v-once>这个将不会改变: {{ msg }}</span>2.原始HTML
双大括号会将数据解释为普通文本，想要输出HTML代码，需要使用v-html指令：
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>3.指令
指令是带有v-前缀的特殊特性，指令的职责是当表达式的值改变时，将其产生的连带影响，响应式的作用于DOM
（1）指令的参数
接收一个参数，在指令名称后以冒号表示，如v-bind指令可以用于响应式的更新HTML特性（href是参数）：
<a v-bind:href="url">...</a>v-on指令用于监听DOM事件（参数是监听的事件名）：
<a v-on:click="doSomething">...</a>（2）动态参数
可以用方括号括起来的JavaScript表达式作为一个指令的参数：
<a v-bind:[attributeName]="url"> ... </a>如果vue实例的data属性attributeName 值为“href”，那么这个绑定将等价于v-bind:href
（3）修饰符
比如.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault()：
<form v-on:submit.prevent="onSubmit">...</form>4.缩写
vue为v-bind和v-on这两个常用的指令，提供了特定简写：
（1）v-bind缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>（2）v-on缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
