Vue常用指令

Vue指令

1.v-for="(item,i) in  list"  遍历     

v-for="(item,i)in object"
item为vale值
i为key

v-for="item in 10"

v-for="item in 'abc'"

item 每一个元素
i. 对应的下标

绑定事件
2.v-on:click. --- @click

绑定属性来使用的
3.v-bind:  简写 :   :class='js语句'  :id="js语句"

动态class

:class="isTrue?'class1':'class2'"
:class="{class:true/false}"   //true添加 false不添加

隐藏显示
4.v-show='布尔值' true / 显示   false/display:'none'
让其变为display:none 来隐藏

删除和添加 
5.v-if 布尔值' true / 添加。false/删除 直接删除和添加来隐藏
v-else 必须要与v-if是兄弟相邻元素才能使用
一个隐藏另一个出现



v-if 如果涉及到安全问题使用 v-if，其它情况下都可以使用v-show

模糊查找 有一个字相同就找到和indexof用法差不多
includes(this.val))

6.v-model="双向数据绑定的"

 <div id="app">
        <input type="text" v-model="val">
        <p>{{val}}</p>
    </div>

    <script>
        // v-model  
        const vm = new Vue({
            el: "#app",
            data: {
                val: "1"
            },
            methods: {

            }

        })

 <div>
           姓名： <input type="text" v-model="user.name">
        </div>

        <div>
            <label>
                <input type="radio" v-model="user.sex" name="sex" value="男"> 男
            </label>
            <label>
                <input type="radio" v-model="user.sex" name="sex" value="女"> 女
            </label>
        </div>
        <div>
            班级： <select v-model="user.classes" name="" id="">
                <option value="">请选择</option>
                <option value="2201">2201</option>
                <option value="2202">2202</option>
            </select>
        </div>
        <div>
            是否毕业 ： <input type="checkbox" v-model="user.isFinish">
        </div>

 user: {
                    name: "章三",
                    sex: "男",
                    classes: "",
                    isFinish: true
                },
                  
7.v-text 相当  {{}} , 但是 {{}} 出现闪烁问题 ， v-cloak
8.[v-cloak]{display:none};
div v-cloak 修改了display属性
9.v-html 渲染富文本 
	ps 使用的时候需要注意，可能会收到脚本攻击
  
10.v-cloak  和 v-text
  	v-cloak 用来解决闪烁问题
  	 {{}} 会出现闪烁问题。--- 加载vue的时候慢了
  	 	1 浏览器解析的时候 vue没有加载完，就按照普通标签元素解析了
  	 	2 vue加载之后 vue语法就编译过来了
  		解决问题？
  			等到vue加载完在加载，前期的时候隐藏
  		v-cloak 原理就是 将该元素的css中的display:none 去除
  		<style>
  			[v-cloak]{
  				display:none
  			}
  		</style>
  		<div v-cloak>{{vv}}</div>
11. v-once 
  		是渲染一次 -- 
  		
12. v-pre
  		不解析了 不会按照vue的语法解析了