VUE阶段性总结

Vue是一个MVVM框架，这里的MVVM指的仅仅是前端，和后端无关。在MVVM框架中，视图和数据不能直接通信，而是通过中间人ViewModel，ViewModel它可以监听到数据的变化，然后通知视图做更新。同时它也可以监听到视图在改变，使数据改变。

一.build&set，vue简单语法功能展示
代码示例：

bk1.png

二.常用语法

1.v-text.v-html.文本插值
示例代码：

bk2.png

页面输出：

bk3.png

2.v-on绑定事件
专门用于绑定事件的指令，用法和v-blind差不多，比如添加点击事件< a v-on:click="方法名 / 执行语句"> ，可直接缩写为@click，可直接绑定一个方法，也可以直接使用内联语句

示例代码：

bk4.png

页面输出：

bk5.png

3.v-bind
v-bind指令可以在后面带一个参数，中间用冒号隔开，这个参数一般是HTML的属性，比如v-bind:class ,可缩写为:class，这个class和原来的class 并不冲突。

示例代码：

bk6.png

页面输出：

bk7.png

4.v-for
v-for指令：用于循环

示例代码：

bk8.png

页面输出

bk9.png

5.v-model
v-model虽然很像使用了双向数据绑定的 Angular 的 ng-model，但是 Vue 是单项数据流，v-model 只是语法糖而已：

示例代码：

bk10.png

页面输出

bk11.png

6.计算属性computed
在正常情况下，代码中可以直接进行简单的运算，但是如果太多就显得难以维护。而计算属性就是将这个逻辑提取出来，专门来维护。

代码示例：

bk12.png

页面输出：

bk13.png

7.Vue.component组件
定义一个组件

代码示例：

bk14.png

页面输出：

bk15.png

8.父子通信props
父组件传递数据给子组件：props

代码示例：

bk16.png

页面输出：

bk17.png

9.子组件传递信息给父组件

代码示例：

bk18.png

页面输出：

bk19.png

注意： 在子组件中不要直接更改props的值，不推荐也不支持，想要用可以直接赋值给一个变量，或者用计算属性，如果需要改变父组件这个值怎么办呢，就可以利用watch监听传来的props数据，然后把这个数据赋给一个变量，这样我们就可以操作这个变量，再$emit派发事件把想要改变的数据传给父组件，父组件再监听。

10.兄弟组件通信(组件通信之任意及平行组件间通信)

代码示例：

bk20.png

页面输出：

bk21.png

11.#给一个对象注册一个不存在的属性
假如我们需要监听对象下某个不存在的属性，那么我们可以通过set去创建。
全局注册： vue.set(item, 'checked', true) item.checked = true
局部注册： this.$set(item, 'checked', true)

12.过滤器filter
过滤器在开发中会经常用到，比如我们要显示一个日期，我们就必须做以下转换

代码示例：

bk22.png

页面输出：

bk23.png

13.混合mixins
我们知道vue实例中会传入一个对象，里面有方法，计算属性等，假如有两个vue实例，他们有很多公用的东西，那么就可以用到混合了，混合可以当做一个Vue实例，同时它又可以和任何一个

对象进行组合。如下： am 和 vm 都需要使用方法foo,这个时候就可以声明一个混合来复用。

代码示例：

bk24.png

先写到这里。。。。夏短夜长