对Vue基础的掌握

一.初步认识MVVM模式：

MVVM设计模式：

• M:数据层，对应Vue中data内容，

• V:视图层，对应Vue中的html标签内容

• VM:是Vue提供的功能，对应Vue中methods里的内容

Vue更多的是通过去写数据层代码来实现功能

传统的MVC模式：

更多的代码时去写C控制层的代码改变DOM的结果来实现功能

二、Vue实例中的应用

​ Vue能做到响应式数据变年，即数据变时，视图呈现的内容就会跟着变，同样，当视图上效果发生变化时，数据层面也会跟着变化，这就是组件做到的响应式开发 ；除非，对对象使用了Object.freeze()方法，他会阻止修改现有属性，意味着系统无法追踪数据变化；

​ Vue实例还会暴露一些属性或者方法，使用前缀$；

​ 实例生命周期钩子：create mounted updated destroyed ；生命周期钩子的this指向调用它的Vue实例，不要在选项属性或者回调上使用箭头函数，因为箭头函数并没有this，和会导致this会作为变量一直想上级作用域查找，没找到会导致错误，下面是错误示范：

//Vue的实例中选项采用了箭头函数的错误样子
create：（）=》console.log(this.a)
//回调函数采用箭头函数的错误样子
v.$watch(ele,newValue=>this.myMethod())

生命周期图示：

 

 

四、模板语法

​ Vue使用{{}} 双大括号进行数据绑定，做响应式变化，v-once指令进行一次性插值，数据改变时，绑定到页面的内容是不会更新的，和Object.freeze（）类似。{{}}里面只能包含单个表达式，不能包含语句，控制流等。

​ 模板中，指令以V-开头，一个指令可以接受一个参数，使用“：”即可。可以用[]来接受一个动态参数，

​ 修饰符，以“.”表示，代表指令以特殊方式绑定，

eg. ".prevent"表示指令对于触发事件event.preventDefault()；的调用；

五、计算属性

​ Vue实例中有一个计算属性：computed，计算属性是基于他们的响应式依赖进行缓存的，（他的依赖可以是其他计算属性，也可以是其他Vue示例数据，不仅仅局限于当前Vue实例的数据）只有数据发生改变时，才会重新computed里面定义的函数，如果依赖没有发生改变，就不会执行函数，直接从缓存中拿数据渲染。缓存的作用节约了我们的开销。

​ 计算属性默认只有getter，需要时磕头添加setter、

​ 侦听器：watch（vm.$watch），用来响应数据变化，

六、可以用v-bind对class样式进行绑定

在标签里写入v-bind，在data写入样式的名称，并给他们设定true或者false的值，true代表有此样式，反之。

使用v-bind绑定一个数组，添加一个class列表；使用三元表达式可以切换class；

v-bind：style绑定内联样式；

七、渲染

key属性可以决定是否要复用这个元素；

v-show：只切换元素的css属性display；

v-for可以支持两个参数，第一个是数组元素，第二个是索引；of可以代替in；v-for用在对象中时，他的参数是（value,key）,也可以加入第三个参数index;v-for的优先级比 v-if更高 ，二者可以一同使用；

数组更新：

pop（），push（），shift（），unshift（），splice（），sort（），reverse（）；

数组替换：

filter（），cancat（），slice（）；

直接修改数组内容不起效，可以使用Vue.set(vm.items，index，newValue)方法设置实例数组内容，

Vue.set(object, propertyName, value) 往对象中添加属性；

Object.assign() 添加多个新属性 ：

vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

八、修饰符

v-on：绑定的事件可以加上修饰符操作，

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
​
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
​
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
​
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
​
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
​
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

修饰符的顺序也是很重要的：

v-on:click.prevent.self //会阻止所有的点击，而
v-on:click.self.prevent //只会阻止对元素自身的点击。

九、组件

组件用法：

组件需要注册之后才能用，有全局组件和局部组件两种方式。自定义标签名称尽量使用小写加减号分割的形式命名。组件也可以嵌套使用。当组件挂载受到限制时，可以使用is来挂载组件，table标签使用组件是无效的。

组建的复用：

data必须使用一个函数，return出数据对象，这样每个实例可以维护一份被返回对象的独立的拷贝；

通过prop向子组件传递数据：

props的值可以是两种，一种是字符串数组，一种是对象；（父向子传递）

组件通信：

父组件通过prop传递数据给子组件，子组件通过用$emit()触发事件，父组件用$on()来监听子组件事件（.native表示监听该组件的根元素）

可以通过中央事件总线解决跨级组件之间的问题；

在子组件中可以通过this.$parent直接访问该组件的父实例和组件，父组件可以通过this.$children访问他所有的子组，可以通过递归向上向下无线访问。“ref”可以为子组件指定一个索引名称。

备注：上面写到的vm是一个VUE的实例