Vue的指令

Vue是什么

是一套构建用户界面的渐进式框架
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的

Vue语法

双花括号 {{放数据}}

1. 引入vue.js
2. 挂载vue

   new Vue({
         el:'#root',//挂载点
         data:{  //数据
             val:''
         }
     });

v-if v-else-if v-else指令

v-if=”数据” 条件->true||false
如果条件成立则显示
v-else-if=”数据” 条件->true||false
v-else 必须紧跟这v-if或者v-else-if

v-for

不但能循环数组也能循环对象 以下两种写法都可以

v-for="val in arr"
v-for="(val,key) in arr"

v-text

v-text=”数据”

等同于innerText

v-html

v-html=”数据”
等同于innerHTML

v-on

v-on:click=”函数名”

简写 @click=”函数名”

注意：事件函数必须报在methods下，它为一个对象

v-on的修饰符

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。

.13 回车

.stop.prevent 取消冒泡和阻止默认行为

.once 只能点一次

v-bind

一般用在操作行间数据

v-bind:class=”bg”

可以简写成 :class=”bg”

v-model

专门用来操作表单的
该指令能够实现表单输入和应用状态之间的双向绑定：

<input 
    type="checkbox" 
    v-for="(val,key) in arr" 
    v-model="arr[key]"    
/>

注意：!!!如果使用数组循环，那么要启用v-model,要写
数组[key] 不能写val 即 arr[key]

v-show

v-show=”true/false” 控制元素显示/隐藏

computed

Vue中的computed属性称为计算属性
计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新。

（一上就会执行一次）
当依赖的数据发生变化的时候，不想改变原来的数据
又想形成一个新的数据时使用