vue.js部分指令

参考来自 vue.js官网点击打开链接

-------------------------------------------------------------------

初学笔记  不适合参考 如有错误请指正

-------------------------------------------------------------------

vue.js 指令 是带有 v- 前缀的特殊属性 ，指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。

注意 每个添加指令的dom 其自身或父元素 必须vue实例化

 1. v-text 指令 

 <div id="demo" v-text='msg'></div>    // 即使元素里有标签如a p 等内容 也会比msg内的值全部替代

  var demo = new Vue({
     el:'#demo',
      data:{
       msg:'更新元素的textcontent',
      }
    })

// 等同于

<div id="demo2">{{msg}}</div>

 var demo2 = new Vue({
     el : "#demo2",
     data:{
      msg:'插入内容',
     }
    })

 2 . v-html 

 <div id="demo3" v-html='html'></div>   // 与v-text不同的是 html内的html标签可以被解析  它也会完全改变标签内所有子元素即重新渲染

 var demo3 = new Vue({
     el:"#demo3",
     data:{
      html:"<a href='#'>更新元素innerHTML</a>",
     }
    });

// 内有子元素， 子元素会被清除 由html内的能容重新渲染

<div id="demo4" v-html='html'>
     <span>haah</span>
     <p>hancncnckasckcn</p>
    </div>

var demo4 = new Vue({
    el:"#demo4",
    data:{
     html:"<a href='#'>更新元素innerHTML</a>",
    }
   })

3  v-show   

<div id="demo5" v-show='show'>hahahahhahahhah</div>   // show值为真展示 假隐藏

 var demo5 = new Vue({
       el:"#demo5",
       data:{
        show:true,    // 当为false时demo5隐藏
       }
      })

4  v-if

 <div id="demo6" v-if='ok'>如果成立则输出</div>   // 判断ok的值为真显示

var demo6 =new Vue({
       el:'#demo6',
       data:{
        ok:false,
       }
      })

// 可做选择

 <div class='demo7'>
     <div  v-if='random'>如果随机数大于0.5则输出</div>
     <div v-else>如果随机数小于0.5则输出</div>
    </div>
   

// v-if 和 v-else 必须包含在同一个父元素内 并且父元素要被实例化
      var demo7 =new Vue({
       el:'.demo7',
       data:{
        random:Math.random() > 0.5,        // 给出一个判断条件
       }
      });

5  v-for 

  <div id="demo8" >                                      //注意v-for不能写在父元素上 即不能写在实例vue的对象上
     <p v-for="itme in itmes">{{itme.text}}</p>        // 产生itmes内有多少个itme.text就有多少个p标签被产生
    </div>

 // v-for  //必须使用在实例化元素的子元素上
      var demo8 = new Vue({
       el:'#demo8',
       data:{
        itmes:[
         {text:"hahahha"},
         {text:"hahxxx"},
         {text:"hasss"},
         {text:"hahvvv"},
        ]
       }
      })

// 可以使用索引

 <div id="demo9" >
     <p v-for="(itme,index) in itmes">{{itme.text}}--{{index}}</p>
    </div>

// v-for 当前项索引
       var demo9 = new Vue({
       el:'#demo9',
       data:{
        itmes:[
         {text:"hahahha"},
         {text:"hahxxx"},
         {text:"hasss"},
         {text:"hahvvv"},
        ]
       }
      })

// 渲染多个模块

<div id="demo10">
     <template v-for='itme in itmes'>
        <a href="#">{{itme.text}}</a>
        <p>{{itme.msg}}</p>
     </template>
   </div>

 var demo10 = new Vue({
         el:"#demo10",
         data :{
          itmes:[
           {text:"第一个", msg:"first"},
           {text:"第二个", msg:"seccone"},
           {text:"第三个", msg:"three"},
           {text:"第四个", msg:"foure"},
          ]
         }
       })

// 对象迭代

 <div id="demo11">
      <ul>
         <li v-for='(value,key,index) in object'>{{index}}:{{key}}:{{value}}</li> 
      </ul>
   </div>

 //v-for 对象迭代
       var demo11 = new Vue({
        el:"#demo11",
        data :{
         object:{
          name:"weitong",
          sex:"nan",
          year:"22",
         }
        }
       })

6 v-on

<div id="demo12" v-on:click="clicks">点击</div>   // 添加事件名称和处理事件的函数名

 var demo12 = new Vue({
        el:'#demo12',
        data :{

        },
        methods:{                               // methods: 可以理解为内部写函数的方法
         clicks:function(){
          alert(0);
         }
        }
       })

7. v-model                          //表单处理      一般获取的是value的值 或者布尔值

<div id="demo13">
     <input type="text"  v-model='message'   placeholder="输入"/>       // message 为表单的输入内容 
     <span>输入内容 ： {{message}}</span>           // 当输入内容改变时  显示同时改变
   </div>

 var demo13 = new Vue({
         el:"#demo13",
         data:{
           message:'输入内容',
         }
       })

//    单个复选框 

<div id="demo14">
         <input type="checkbox" id="check" v-model='checked' />
         <label for="check">{{checked}}</label>                  // 显示单选框是否被选中
   </div>

var demo14 = new Vue({
         el:'#demo14',
         data:{
          checked:'',                                   // 初始时不显示  则将checked值改为   “”||false  之后初始显示false   
         }
       })

//

<div id="demo15">
    <input type="checkbox" id="jack" value="Jac" v-model="checkedName">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedName">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedName">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedName }}</span>                   // 显示选中框的value值  获取的是value的值
   
   </div>

 // v-model 获取的是表单元素的value值（点击时）
       var demo15 = new Vue({
        el:'#demo15',
         data:{
          checkedName:[],
         }
       })

//  绑定value 

<div id="demo16">
       <input type="checkbox" v-model="toggle" v-bind:true-value='a' v-bind:false-value='b'>      如果不绑定则显示的是布尔值
       <span>{{toggle}}</span>
   </div>

 // 复选框绑定value
       var demo16 = new Vue({
         el:'#demo16',
         data: {
           toggle:'',
           a:'a',
           b:'b',
         }
       })

----------------------------------------

了解更多参考 vue.s官网

------------------------------------------

源码

运行时注意将vue.js 路径修改

----------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
 <meta charset='utf-8' />
 <title>指令</title>
</head>
<body>
    <div id="demo" v-text='msg'></div>
    <div id="demo2">{{msg}}</div>
    <div id="demo3" v-html='html'></div>
    <div id="demo4" v-html='html'>
     <span>haah</span>
     <p>hancncnckasckcn</p>
    </div>
    <div id="demo5" v-show='show'>hahahahhahahhah</div>
    <div id="demo6" v-if='ok'>如果成立则输出</div>
    <div class='demo7'>
     <div  v-if='random'>如果随机数大于0.5则输出</div>
     <div v-else>如果随机数小于0.5则输出</div>
    </div>
   
    <div id="demo8" >
     <p v-for="itme in itmes">{{itme.text}}</p>
    </div>
   <div id="demo9" >
     <p v-for="(itme,index) in itmes">{{itme.text}}--{{index}}</p>
    </div>
   <div id="demo10">
     <template v-for='itme in itmes'>
        <a href="#">{{itme.text}}</a>
        <p>{{itme.msg}}</p>
     </template>
   </div>
   <div id="demo11">
      <ul>
         <li v-for='(value,key,index) in object'>{{index}}:{{key}}:{{value}}</li> 
      </ul>
   </div>
   <div id="demo12" v-on:click="clicks">点击</div>

   <div id="demo13">
     <input type="text" v-model='message'   placeholder="输入"/>
     <span>输入内容 ： {{message}}</span>
   </div>

   <div id="demo14">
         <input type="checkbox" id="check" v-model='checked' />
         <label for="check">{{checked}}</label>
   </div>

   <div id="demo15">
    <input type="checkbox" id="jack" value="Jac" v-model="checkedName">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedName">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedName">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedName }}</span>
  
   </div>

   <div id="demo16">
       <input type="checkbox" v-model="toggle" v-bind:true-value='a' v-bind:false-value='b'>
       <span>{{toggle}}</span>
   </div>
    <script type="text/javascript" src='./vue.js'></script>
    <script type="text/javascript">
    // v-text
    var demo = new Vue({
     el:'#demo',
      data:{
       msg:'更新元素的textcontent',
      }
    })

    var demo2 = new Vue({
     el : "#demo2",
     data:{
      msg:'插入内容',
     }
    })
  // v-html
    var demo3 = new Vue({
     el:"#demo3",
     data:{
      html:"<a href='#'>更新元素innerHTML</a>",
     }
    });
   // 更新时会将原有的innerhtml替代
   var demo4 = new Vue({
    el:"#demo4",
    data:{
     html:"<a href='#'>更新元素innerHTML</a>",
    }
   })
   //v-show 改变display属性
      var demo5 = new Vue({
       el:"#demo5",
       data:{
        show:true,    // 当为false时demo5隐藏
       }
      })
      // v-if
      var demo6 =new Vue({
       el:'#demo6',
       data:{
        ok:false,
       }
      })
      // v-if 和 v-else 必须包含在同一个父元素内 并且父元素要被实例化
      var demo7 =new Vue({
       el:'.demo7',
       data:{
        random:Math.random() > 0.5,
       }
      });
      // v-for  //必须使用在实例化元素的子元素上
      var demo8 = new Vue({
       el:'#demo8',
       data:{
        itmes:[
         {text:"hahahha"},
         {text:"hahxxx"},
         {text:"hasss"},
         {text:"hahvvv"},
        ]
       }
      })
      // v-for 当前项索引
       var demo9 = new Vue({
       el:'#demo9',
       data:{
        itmes:[
         {text:"hahahha"},
         {text:"hahxxx"},
         {text:"hasss"},
         {text:"hahvvv"},
        ]
       }
      })
       // v-for 渲染多个模块
       var demo10 = new Vue({
         el:"#demo10",
         data :{
          itmes:[
           {text:"第一个", msg:"first"},
           {text:"第二个", msg:"seccone"},
           {text:"第三个", msg:"three"},
           {text:"第四个", msg:"foure"},
          ]
         }
       })
       //v-for 对象迭代
       var demo11 = new Vue({
        el:"#demo11",
        data :{
         object:{
          name:"weitong",
          sex:"nan",
          year:"22",
         }
        }
       })
       // v-on
       var demo12 = new Vue({
        el:'#demo12',
        data :{

        },
        methods:{
         clicks:function(){
          alert(0);
         }
        }
       })
       // v-model
       var demo13 = new Vue({
         el:"#demo13",
         data:{
           message:'输入内容',
         }
       })
       //复选框
     
       var demo14 = new Vue({
         el:'#demo14',
         data:{
          checked:''|| false,
         }
       })
       // v-model 获取的是表单元素的value值（点击时）
       var demo15 = new Vue({
        el:'#demo15',
         data:{
          checkedName:[],
         }
       })
       // 复选框绑定value
       var demo16 = new Vue({
         el:'#demo16',
         data: {
           toggle:'',
           a:'a',
           b:'b',
         }
       })
    </script>

</body>
</html>