在b站学习vue的简单笔记 视频地址：www.bilibili.com/video/BV157…
ES6语法
1、let/var
var不是块级作用域，但let是
因为addEventListener中function（）内的i在for循环执行结束后已经变成了5
2、const
const关键字
3、ES6中对象字面量增强写法
const obj = {}中,{}即为对象的字面量
4、for循环
在ES6中for循环有另外两种写法
for(let i in this.books){
totalPrice += this.books[i].price
}
for(let book of this.books){
totalPrice += book.price
}
vue的mvvm
-
M：模型层，主要负责业务数据相关；
-
V：视图层，顾名思义，负责视图相关，细分下来就是html+css层；
-
VM：V与M沟通的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点；
MVVM支持双向绑定，意思就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之修改V层则会通知M层数据进行修改，以此也实现了视图与模型层的相互解耦；
创建vue实例时可以传入的options
vue的生命周期
vue的template（模板）
代码规范：最好缩进两个空格
CLI——脚手架，创建一个.editconfig文件，会对代码进行简单的规范
插值操作
1、mustache语法（也就是双大括号）
不可以在元素属性部分使用mustache语法
2、v-once（不常使用）
该指令后面不跟任何表达式，表示元素和组件只渲染一次，不会随着数据的改变而改变
eg. <h2 v-once>你好</h2>
3、v-html
该指令后面往往跟上一个string类型
会将string的html解析出来并且进行渲染
<h2 v-html="url"></h2>
url:"<a href="http://baidu.com">百度一下</a>"
4、v-text（一般不用）
与{{}}类似，但是不够灵活，比如{{}}后面可以直接加上其他内容，两个内容会拼接起来，但是用v-text时后面的内容就会被覆盖，而不会拼接起来
<h2 v-text="message"></h2>
message:"nihaoya"
5、v-pre（用的比较少）
用于跳过这个元素和他子元素的编译过程，用于显示原本的Mustache语法
比如message:"你好呀"
<p>{{message}}</p>中message的内容会被编译解析出来对应的内容
<p v-pre>{{messagr}}</p>会直接显示{{message}}
6、v-cloak（几乎不用）
cloak：斗篷
vue解析后会自动删除这个v-cloak属性
v-bind
- 作用：动态绑定属性
- 缩写（语法糖）： ：
1、v-bind的基本使用
<img v-bind:src="imgURL" alt="">
<a v-bind:href="aHref">百度一下</a>
<div :class="active"></div>
2、动态绑定class（对象语法）（用得很多）
v-bind后面的属性可以为一个对象（键值对，key:value）
<h2 v-bind:class={类名1：boolean，类名2：boolean}></h2>
当value为true时，这个value对应的key会被绑定到属性上去，value为false时对应的key则不会被绑定上去
例如：点击按钮改变文字颜色，代码如下
<h2 class="title" :class="getClasses()"></h2>
<script>
……
methods:{
getClasses:function(){
return{active:this.isActive,line:this.isLine}
}
}
</script>
3、动态绑定class（数组语法）（用的比较少）
<h2 class="title" :class="[active , line]"></h2>
<script>
const app = new Vue({
el:'#app',
data:{
active:'aaa',
line:'bbb'
}
})
</script>
计算属性
1、计算属性的基本使用
当两个数据拼接时，可以使用methods
2、计算属性的复杂操作
3、计算属性的getter和setter
之前computed内的内容实际是简写形式，完整的内容如下
完整内容与简写的对比
4、计算属性与methods的对比
v-if、v-else和v-else-if
v-for
购物车案例
过滤器 filter
<table>
<thead> <!--表头-->
<tr><!--行-->
<th></th><!--表头单元格-->
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>{{item.price | showPrice}}</td>
<td>
<button>-</button>
{{item.count}}
<button>+</button>
</td>
<td><button>移除</button></td>
</tr>
</tbody>
</table>
filters:{
showPrice(price){
return '￥'+price.toFixed(2)
}
}
vue底层原理
1、vue数据双向绑定的实现原理
vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
