const 只能放常量！！！！！！！！！！！！！！！！
基础使用：
<body>
<div id='vue'>
<div v-clock>{{msg}}</div>
<div v-text='msg'></div>
<div v-html='html'></div>
</div>
<script src='./js/jquery.js'></script>
<script src='./js/vue.js'></script>
<script type='text/javascript'>
var vm = new Vue({
el:'#vue',
data:{
msg:'hello world2',
html:'<h2>重大喜讯</h2>'
}
})
</script>
</body>
1. 实例参数分析
el： 元素的挂载位置（值可以是CSS选择器或者DOM元素）
data：模型数据（值是一个对象）
2. 插值表达式用法
将数据填充到HTML标签中
插值表达式支持基本的计算操作
3. Vue代码运行原理分析
概述编译过程的概念（Vue语法→原生语法）
1.v-cloak 防止闪动
当插值没被解析时，会显示{{msg}}而不是解析内容
背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果
2.v-text
- v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
- 如果数据中有HTML标签会将html标签一并输出
- 注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值
3.v-html
- 用法和v-text 相似 但是他可以将HTML片段填充到标签中
- 可能有安全问题, 一般只在可信任内容上使用 `v-html`，**永不**用在用户提交的内容上
- 它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。
4.v-pre
v-pre 输入什么显示什么，即使是{{msg}}也不会被解析
5.v-once
v-once 只编译一次，后面如果有数据响应式来修改内容也不会编译，暴力原有样式
v-once的应用场景：如果显示的信息后续不需要再修改，你们可以使用v-once，这样可以提高性能。否则就会一直监听是否有数据响应式
6.v-model
双向数据绑定
- 当数据发生变化的时候，视图也就发生变化
- 当视图发生变化的时候，数据也会跟着同步变化
一些使用心得：
1.有点像name，但他的值对应的是value,如下面这个代码，
如果要选择按钮的选中状况可以直接传入数组 hobby:['1','2'],然后通过this.hobby来获取整个数组，this.hobby.toString()能获得具体内容
<div>
<span>爱好：</span>
<input type="checkbox" id="ball" value="1" v-model='hobby'>
<label for="ball">篮球</label>
<input type="checkbox" id="sing" value="2" v-model='hobby'>
<label for="sing">唱歌</label>
<input type="checkbox" id="code" value="3" v-model='hobby'>
<label for="code">写代码</label>
</div>
2.Vue中，应该这样：<textarea v-model='desc'></textarea> 而不是<>xxxx<>
3.<select v-model='occupation' multiple> 那occupation就应该是[]
4.<input type="text" v-model.trim='info'> 只会去掉文本前面和后面的空格，中间的空格不会被去掉
7.v-on:click --->@click
1.事件调用中 @click='say'中自带event事件，，默认第一个是参数对象，所以函数中接受的参数第一个是event
2.而@click='say($event)'需要传入event事件，名字固定且必须放到最后，所以函数中接受的参数最后一个是event
如果传入<div v-text='num'></div>中的num，那么就可以进行操作，但不会改变num的值
8.事件绑定
1.事件修饰符 可以自定义
1.v-on:click.stop .stop阻止冒泡 冒泡：下级标签的触发会传递到上级的标签去
传统阻止冒泡的方法
handle1:function (event) {
event.stopPropagation();
},
2.v-on:click.prevent .prevent阻止默认行为 如a标签的默认跳转
传统的行为是在标签中加入点击事件的函数，然后在函数中调用 event.preventDefault()
<a href="http://www.baidu.com" @click='fn'>百度</a>
fn:function (event) {
event.preventDefault();
},
3.可以串联一起写，如v-on:click.stop.prevent 但是写的时候是有顺序的
4.因为提供的事件是有限的，所以可以通过自定义的方法来添加想要的事件
Vue.config.keyCodes.自定义名称= 标识、键值 如果不知道键值可以通过event.keyCode来得到键值
Vue.config.keyCodes.f1= 112
2.按键修饰符
1. .enter回车键 <input v-on:keyup.enter='submit'>
2. .esc 退出键 <input v-on:keyup.delete='handle'>
3. 或者直接v-on:keyup.直接跟键值（自定义）
9. v-bind
<input type="text" v-bind:value="msg" v-on:input='msg=$event.target.value'>
等价于<input type="text" v-model='msg'>
1.绑定class
1.绑定对象：
绑定的时候可以同时绑定两个对象模板，如objClass1和objClass2,但是如果有相同的属性会被后面的覆盖
<div v-bind:class='[objClass1,objClass2]'></div>
2.绑定数组：<div v-bind:class="[activeClass, errorClass]"></div>
3.绑定对象和绑定数组 的区别
- 绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据
- 绑定数组的时候数组里面存的是data 中的数据
4.样式绑定相关语法细节：
1、对象绑定和数组绑定可以结合使用
2、class绑定的值可以简化操作
3、默认的class如何处理？默认的class会保留
2.绑定style
1.绑定对象 <div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>
2.绑定数组<div v-bind:style="[baseStyles, overridingStyles]"></div>
一些细节与class一样
10.v-if和v-show
1.v-if
使用场景
1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素
2- 进行两个视图之间的切换
<div id="app">
<!-- 判断是否加载，如果为真，就加载，否则不加载-->
<span v-if="flag">
如果flag为true则显示,false不显示!
</span>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
flag:true
}
})
</script>
2.v-show 如果是false 就会有display:none 这个属性，如果是true，就没有这个属性
3.v-show 和 v-if的区别
v-show本质就是标签display设置为none，控制隐藏
- v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。
v-if是动态的向DOM树内添加或者删除DOM元素
- v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件
11.v-for
用于循环的数组里面的值可以是对象，也可以是普通元素
基本使用：
<ul id="example-1">
<!-- 循环结构-遍历数组
item 是我们自己定义的一个名字 代表数组里面的每一项
items对应的是 data中的数组-->
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
<script>
new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]，
}
})
</script>
：小提示
- 不推荐同时使用 `v-if` 和 `v-for`
- 当 `v-if` 与 `v-for` 一起使用时，`v-for` 具有比 `v-if` 更高的优先级。
v-for 中的Key的作用 1.相当于一个唯一标识，2.key的作用主要是为了高效的更新虚拟DOM
如果有ABC那么Key分别为0，1，2,index也0，1，2，但是，如果把A删了，那么Key就对应1，2，而index对应的是0，1
所以在数据中，如果Key没变，就不需要重新去渲染这个资源，可以在一定程度上提高性能（简单来说就是遍历是时候加上:key就好了）
1 .index值不是一定不变的，如果不加key值的话，删除前面的项。后面的index可能变也可能不变，比如加个定时器的时候会变，不加定时器不会变
2 .不加key的话，更新机制的进行diff的时候是会全部比较的，比如删除第一个的话，后面的元素其实都不一样，会一项一项的比较。然后全部元素都替换，没有做到最小更新。而且里面的传的值也会变，如果这个时候你要根据里面的值删除元素的话，就会出错，尤其是加了定时器之后
3 .所以这个key值对数据改变之后的diff更新比较有很大的性能提升，或者说有了key和没有key是两种比较和更新机制
4 .使用v-for更新已渲染的元素列表时，默认采用旧地复用策略，会复用之前的元素，有的时候使用index来做为key值，其实不是特别推荐的。可能会发生变化，最好是时间戳加上一个自增的数字
5 .如果有key的话，就会根据key值去判断某个是否修改，重新渲染这一项
------PS：
在原生JS中，for遍历建议使用在对象中，不建议对数组使用
6 .虚拟dom的diff算法
v-for遍历数组
v-for遍历对象
12..lazy
.lazy,把input变成change, input是只要输入就会触发事件，而change是改变才会触发事件
在下面代码中的文本框中，Input事件是只要你输入内容，div中的内容就会一直变化，而如果是change事件，则会在输入框失去焦点后使div的内容改变
<input type="text" v-model.lazy='msg'>
<div>{{msg}}</div>
13.自定义指令
第一个focus是名称，第二个focus是dom指令,el是绑定的元素相当于this，而bind是传入的参数
Vue.directive('focus',{
inserted:function (el,bind) {
// body...
el.focus();
}
})
使用：<input type="text" v-focus>
钩子函数：大部分只用到bind和inserted
1.bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
2.inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
3.update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
4.componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
5.unbind：只调用一次，指令与元素解绑时调用。
钩子函数的参数
指令钩子函数会被传入以下参数：
1.el：指令所绑定的元素，可以用来直接操作 DOM。
2.binding：一个对象，包含以下 property：
·name：指令名，不包括 v- 前缀。
·value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
·oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
·expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
·arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
·modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
3.vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
4.oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
14.局部指令（只能在本组件使用（这个Vue中））
如果想注册局部指令，组件中也接受一个 directives 的选项：
-------------------------组件是啥？---------------------- Vue实例对象就是一个组件（暂时）
new Vue(
data,
directives: {{
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
})
使用方法跟全局自定义函数一样 v-color='msg'
15.计算属性 计算属性是这样使用的{{msg}}msg是计算属性的名称，但可能也是data中的数据
跟方法或自定义指令看起来差不多，使用的话{{reverseDmessage}} 直接函数名，不用加括号msg是因为 msg:xxx
computed:{
reverseDmessage:function(){
console.log(11)
return this.msg.split('').reverse().join('')
}
16.计算属性和方法的区别
之前说差不多这两个差不多，那么有什么区别呢？
1.计算属性是基于他们的依赖进行缓存的（有缓存）
2.方法不存在缓存
计算属性：如果使用上面的计算属性，然后调用两次{{reverseDmessage}}，只会执行一次console.log(11)，第二次如果msg没变，就会使用上一次的缓存结果
自定义指令：会执行两次
17.监听函数
异步和开销比较大的操作
watch
在实验中，可以通过定时器来模仿后台接口调用（都是异步的），
在定时器中this是window下的this，所以要在外面设定变量来获得this
methods:{
check:function (name) {
var that = this
// body...
setTimeout(function () {
// body...
if(name == '小明'){
that.tip ='名字已经有了'
}else{
that.tip = '名字可以用'
}
},1000)
}
}
18.过滤器
跟自定义指令有类似的地方
Vue.filter('uper',function (val) {
// body... charAt取第0位,toUpperCase变成大写,slice从第1位开始取
return val.charAt(0).toUpperCase()+val.slice(1)
})
使用：
<div>{{msg | upper }}</div> msg就是val，upper是过滤器名称，
<div>{{msg | upper | XXX | XXXX}}</div> 会把前面的结果传到后面XXX
<div v-bind:name='name | upper'></div> 或者在绑定属性的时候
局部过滤器
filters:{
upper:funtion(){}
}
过滤器传参数
<div>{{msg | upper(params) }}</div>
Vue.filter('uper',function (val,params) {
// body... charAt取第0位,toUpperCase变成大写,slice从第1位开始取
console.log(params)
return val.charAt(0).toUpperCase()+val.slice(1)
})
19.生命周期
mounted 当这个函数被调用时，就代表初始化结束了，模板被渲染
使用this.$destroy();就会删除vue实例，但是渲染的模板还在
20.数组更新方法
1.变异方法（Vue是响应式的，就会把数组的一些方法变成响应式的）原数组变了
2.替换数组 返回一个新数组，原数组不变
数组的响应式变化
Vue.set(vm.items,indexOfltem,newValue)
vm.$set(vm.items,indexOfltem,newValue)
1.要处理的数组名称 2.要处理的数组索引 3.要处理的数组的新的值
如：vm.list[1] = 'XX' ,虽然list[1]的值会发生改变，但是已经渲染的页面的内容不会改变，因为这样不是响应式的
应该要Vue.set(vm.list,1,'XX')这样才会变 vm.$set(vm.list,1,'XX')
对象也可以这样赋值，中间那个也是索引Vue.set(vm.list,'XX','XX')
21.需找条件
1.我第一时间想到for循坏来取得数组，好像比较麻烦
for(item in this.books){
if(this.books[item].id == id){
iname=this.books[item].name
}
}
this.name=iname
this.id=id
2.用filter就是通过条件来找相应对象的,不过不管找出来几个都是数组，所以如果只有一个的话，取的时候要[0]
var book=this.books.filter(function (item) {
// body...下面这个是条件，然后把数组返回出去
return item.id==id
})
this.name=book[0].name
this.id=book[0].id
23.删除(this)
1.使用some在想要删除的时候操作
如果在普通函数中使用this，这个this是window下的this,如下面这个函数
some函数是判断有没有满足条件的数据，返回true和false,但是可以在判断后进行操作再返回结果
this.books.some( (item)=> {
// body...
if(item.id==this.id){
item.name = this.name
return true
}
})
应该修改成箭头函数，箭头函数下的this是父级作用域的this，所以跟this.books同级，
this.books.some( (item) =>{
// body...
this.id
})
如果找到想要的结果并进行操作后需要return true 不能让循环继续下去
2.使用filter找到不想要删的数组，从新赋值
this.books = this.books.filter(function(item){
return item.id != id;
3.用index找到单独那个，然后删除
根据id从数组中查找元素的索引
var index = this.books.findIndex(function(item){
return item.id == id;
});
根据索引删除数组元素
this.books.splice(index, 1);