Vue 指令

1.v-for指令

v-for是以并列的形式输出绑定的数组

<div class='skt'>
      <ul>
            <li v-for=value in arr> {{value}} </li>
      </ul>
</div>

<script  src='此处链接js插件'></script>
<script>
      new Vue({
            el:".nr",
            data:{
                  arr：[1,2,3,4,5]
            }
      })
</script>

2.v-model指令

v-model是用于表单输入和应用状态之间的双向绑定

<div class='nr'>
      <p>{{mes}}</p>
      <input  type="text"  v-model='mes'>
</div>

<script  src='此处链接js插件'></script>
<script>
      new Vue({
            el:".nr",
            data:{
                  mes:"Hello Vue!"
            }
      })
</script>

3.v-on指令

用v-on添加一个时间监听器，也就是编辑一个点击事件

<div class='nr'>
      <p>{{mes}}</p>
      <button v-on:click="fun">点击</button>    （fun是事件名，可以随机改变）
</div>

<script  src='此处链接js插件'></script>
<script>
      new Vue({
            el:".nr",
            data:{
                  mes:"Hello Vue!"，
                  txt："Hello word!"
            },
            methods:{
                  fun:function(){
                        this.mes=this.txt     (变量前面要加this才可以提取变量，否则无效)

                        或者加个if条件实现来回切换

                        if(this.flag){
                              this.msg='hello vue';
                              this.flag=false    
                        }else{
                              this.msg='hello word';
                              this.flag=true  
                         }
                  }
            }
      })
</script>

4.v-bind指令

v-bind是用来绑定Html属性，比如绑定一个img

<div class='nr'>
      <img  v=bind:src="jpg" alt="">
</div>

<script  src='此处链接js插件'></script>
<script>
      new Vue({
            el:".nr",
            data:{
                  jpg:"[https://img.haomeiwen.com/i13921279/aeb2224d1d28f489.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240]
"   
   (在这里jpg的内容是一个图片的链接)
            }
      })
</script>

5.v-show指令

v-show是用来控制元素的显示和隐藏的

<div class='nr'>
     <h1>{{mes}}</h1>
     <h3 v-show="seen">{{meg}}</h3>        （此处是v-show语法）
     <button v-on:click="fun">切换</button>          （此处是添加的自定义事件）
</div>

<script  src='此处链接js插件'></script>
<script>
      new Vue({
            el:".nr",
            data:{
                  mes:"简书",
                  meg:“简书”,
                  seen:false       (seen是看见的意思，这里用false判定为假，元素不显示，若为true，元素则显示)
            }
            methods:{
                  fun:function(){
                        this.seen=!this.seen          ( ! 表示否的意思)
                  }
            }
      })
</script>

6.v-if指令

v-if是控制元素的插入或隐藏

<div class='nr'>
     <h1>{{mes}}</h1>
     <h3 v-if="seen">{{meg}}</h3>        （此处是v-if语法）
     <button v-on:click="fun">切换</button>          （此处是添加的自定义事件）
</div>

<script  src='此处链接js插件'></script>
<script>
      new Vue({
            el:".nr",
            data:{
                  mes:"简书",
                  meg:“简书”,
                  seen:true       (这里true判定为真，元素显示，若为false，元素则删除)
            }
            methods:{
                  fun:function(){
                        this.seen=!this.seen          ( ! 表示否的意思)
                  }
            }
      })
</script>

插曲： v-show和v-if区别

v-show是控制元素的显示和隐藏，样式在源代码还存在;
而v-if是控制元素的插入和删除，如果判定删除，源代码也删除样式

7.v-html,v-text,v-once,v-pre

<div class='nr'>
      <input type="text" v-model="add">
      <p v-html="add">{{add}}</p>   （可识别标签，并运用）
      <h3 v-text="add">{{add}}</h3>   （不识别标签，直接输入）
      <span v-once>{{add}}</span>      （输出第一次add中的内容，不改变）
      <h1 v-pre>{{add}}</h1>   （输出{{add}}）
</div>

<script  src='此处链接js插件'></script>
<script>
      new Vue({
            el:".nr",
            data:{
                  add:'新的属性'
            }
      })
</script>