Vue基本语法

一、vue包含：vue.js、vue-cli、vueX、vue-router、axios
设计模式包含三种， MVC、MVP和MVVM 设计模式
vue是属于mvvm设计模式，
M：model （数据层）
V：view （视图层）
VM：view model
C：control （控制层）
二、vue使用
new Vue（{
el:’ '，
data:{},
method:{},
computed:{} //计算属性
watch:{} // 监听属性

}）
三、vue 的声明周期

    new Vue({
       el:'',
       data:{},
       beforeCreate(){}  //页面创建前  一般不用这个
       Create(){}     //页面创建完 （可用于初始化第一帧）常用
       beforeMount(){}  // 挂载之前
       mount(){}    //挂在成功（这时候所有的节点已被新的view节点所代替）常用
       beforeUpdate(){}  //数据变化前 一般不用这个
       Update(){}     // dom结构更新完毕 一般不用这个
       beforeDestroy(){}  //销毁之前  一般不用这个
       destroyed(){}     // 解除绑定、及销毁子组件事件监听事件 一般不用这个
       

四、计算属性和方法的区别：
1、使用上的区别，计算属性不需要加圆括号调用，而方法需要（method内的方法）。
2、计算属性和方法的写法基本一致，但计算属性内部务必有return返回值。
3、计算属性有缓存，方法没有，计算属性是依赖现有的属性，属性变化后计算属性才重新求值，否则使用缓存。而方法每次调用都会返回计算。
4、计算属性是依赖属性的，方法未必。
5、方法名与属性名不能同名，否则计算属性名被覆盖。

五、v- 都是属于vue指令
例如： v-on： 绑定事件 eg: v-on:click=" "
简写：eg：@click=" "
v-html : 渲染innerHTML
v-bind: 绑定属性

            可简写：
            eg：：class=“{}”
                    ：style=" "
                    
              v-show ：
              v-if ：
              v-for：

v-show 与v-if 的区别：
v-show 适合频繁的dom操作，v-if 反之。
v-show 不管初始条件是什么，元素总是会被渲染并且只有简单的基于css进行切换。

六、template 模板
template一般用于控制语句 ，如v-if 或v-for ,不过template 不会被渲染到页面上，并且template上不可以使用key。

  <template v-if=“true”>
      <p>v-if为真则渲染这个p标签的内容</p>
 </template>

   <template v-for="list in lists">
   // 遍历这个list 在lists里
     <li>{{list}}</li>
   </template>

<ul>
   <li v-for="(value,index) in names ;key='index'">
       {{index+1}}.{{value}}
     //key 的作用：为例使数据更新时DOM元素无需改变，key表示每一次循环都必须绑定一个唯一且不重复的值。 
   </li>
</ul>

事件修饰符：

.prevent :阻止默认行为
.stop: 
.once : 只允许执行一次

表单数据V-model（双向绑定）：
1.文本中使用v-model 会是文本value值失效。
2.下拉列表中v-model 写在select标签中，v-model的值需要是option中拥有的value值。
3.多选框 v-model 的值需要为一个boolean值，true 则表示选中。
4.单选框中的v-model 的值相同时，表示选中。