1.起步
创建一个html，然后通过如下方式引入 Vue：
或者
1.1HelloWorld：
{{ msg }}
以上就成功创建了第一个Vue应用！Vue将数据和DOM之间建立了关联，所有东西都是响应式的。打开控制台修改msg的值，你将看到上例相应地更新。
除了文本插值，我们还可以像这样来绑定元素特性：
鼠标悬停几秒钟查看此处动态绑定的提示信息！
v-bind特性被称为指令。指令带有前缀 v-以表示它们是 Vue 提供的特殊特性。该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message属性保持一致”。
v-text与v-cloak:
{{ msg }}
var vm = new Vue({
el:'#app',
data:{
msg:'Hello World'
}
})
使用v-cloak时当网速较慢时不会将插值表达式{{ msg }}显示出来,只有当加载完毕时才会渲染到页面上，且使用v-cloak时可以在插值表达式两侧写其他内容并且会显示到页面上
结果为：
左边-------- Hello World 右边+++++++++++
但是如果使用v-text则不需要写样式，直接绑定即可解决问题，但是标签中不能写任何内容，否则会被覆盖
Hello World
如上其中第一个p标签和第二个p标签显示的内容是一样的Hello World并不会被显示出来
v-text和插值表达式共同点是：
其内容都会被当做文本来解析，即使内容是html格式
如果想把内容当作html来解析则使用v-html,同样v-html标签体中的内容也不会显示
哈哈哈哈哈哈
var vm = new Vue({
el:'#app',
data:{
msg:'这是一个大大的H1
'
}
})
1.2条件循环v-if与v-for：
条件：
控制元素是否显示：
现在你看到我了
当seen为true时会将p标签显示出来，为false时之前显示的消息消失了。
v-show与v-if功能一样可以控制隐藏与显示，但是不同点是v-if每次都会重新删除或者创建元素，而v-show则不会每次都进行DOM的删除和创建操作只是添加了display:none样式
-
v-if有较高的切换性能消耗 -
v-show有较高的初始化渲染消耗
如果元素涉及到频繁的切换，最好不要使用v-if,如果元素可能永远也不会被显示出来被用户看到则推荐使用v-if
循环：
v-for 指令可以绑定数组的数据来渲染一个项目列表：
-
{{ todo.text }}
-
索引值：{{i}}--->元素：{{ todo.text }}
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})
可以看到：
1. 学习 JavaScript
2. 学习 Vue
3. 整个牛项目
在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。
v-for遍历对象
{{key}}:{{value}}
运行结果：
id:1
name:zhangsan
sex:男
age:18
在遍历对象的键值对时除了 value ,key在第三个位置还有一个索引
v-for="(value,key,index) in user"
v-for迭代数字
这是第 {{count}} 次循环
count迭代从1开始
v-for中key的使用
使用key来强制数据关联
{{item.id}}-{{item.name}}
1.3数据绑定v-bind
鼠标悬停几秒钟查看此处动态绑定的提示信息！
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
v-bind是vue中提供的用于绑定属性的指令，v-bind可以简写为:要绑定的属性，v-bind中还可以写合法js表达式如：
鼠标悬停几秒钟查看此处动态绑定的提示信息！
1.4事件绑定v-on
为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：
{{ message }}
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
注意reverseMessage方法中，我们不用直接操作DOM即可更新状态
除了v-on:click,v-on事件可以绑定：
mouseenter
mouseleave
等事件
v-on事件缩写：@事件名
事件修饰符：
- .stop阻止冒泡
- .prevent阻止默认事件
- .capture添加事件侦听器使用事件捕获模式
- .self只当事件在该事件本身（比如不是子元素）触发时触发回调
- .once事件只触发一次
1.5事件修饰符案例：
//创建vue实例得到ViewModel
var vm = new Vue({
el:'#app',
data:{
},
methods:{
divhandler:function(){
console.log('这是触发了inner div的点击事件')
},
btnhandler:function(){
console.log('这是触发了 btn 按钮的点击事件')
}
}
})
运行结果：(冒泡机制限制性当前的事件再往外冒)
这是触发了 btn 按钮的点击事件
事件修饰符.html:29 这是触发了inner div的点击事件
如果想要阻止冒泡则在@click上加.stop：
执行结果(阻止了事件向外冒泡)：
这是触发了 btn 按钮的点击事件
阻止默认行为.prevent
如上点击会跳转到百度，如果想阻止a标签的默认跳转事件则：
//创建vue实例得到ViewModel
var vm = new Vue({
el:'#app-2',
data:{
},
methods:{
linkClick:function(){
alert("弹出");
}
}
})
capture
.capture机制即捕获机制，与冒泡机制相反，事件从往里执行
self
.self机制只触发本身的事件，既不事件冒泡也不捕获，只会阻止自己身上冒泡行为的触发而不会影响其他元素的事件
once
使用.once，事件只触发一次
1.6简单案例：跑马灯效果
{{ message }}
1.7v-model指令：
v-bind只能实现数据的单项绑定，从M自动绑定到V，无法实现数据的双向绑定
v-model它能轻松实现表单输入和应用状态之间的双向绑定。
{{ message }}
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
注意v-model只能运用在表单元素中
input(radio,text,address,email...)
select
checkbox
textarea
1.8v-model简易计算器
1.9在Vue中使用样式
1.数组方式:class="['thin','red','i']"
这是一个h1，测试vue中使用样式
2.在数组中使用三元表达式：:class="['thin','red',flag?'active':'']"
这是一个h1，测试vue中使用样式
其中flag是data中定义的变量
3.在数组中使用对象代替三元表达式提高可读性{'active':flag}
这是一个h1，测试vue中使用样式
4.直接使用对象：
:class="{'thin':true,'red':true,'active':true}"
这是一个h1，测试vue中使用样式
5.间接绑定：
这是一个h1，测试vue中使用样式
var vm = new Vue({
el:'#app',
data:{
classObj:{'thin':true,'red':true,'active':true}
}
})
6.使用style
也可以间接绑定
这是一个h1，测试vue中使用样式