2018-09-13第三节vue.js用响应式和vue.js做一

一、添加用户 表格练习
body部分：

          <div id="itany" class="container">
               <h3 class="text-center">添加用户</h3>
          <form>
         <div class="form-group">
           <label for="name">用户名</label>
           <input type="text" id="name" placeholder="请输入用户名" class="form-control" v-model="arrs.name">
       </div>
        <div class="form-group">
           <label for="age">年龄</label>
           <input type="text" id="age" placeholder="请输入年龄" class="form-control" v-model="arrs.age">
       </div> 
        <div class="form-group">
           <label for="email">邮箱</label>
           <input type="text" id="email" placeholder="请输入邮箱" class="form-control" v-model="arrs.email">
       </div>
       <div class="form-group text-center">
          <input type="button" class="btn btn-success" v-on:click='add' value="添加">
 <!--              <input type="button" class="btn btn-info" value="重置">-->
          <input type="reset" class="btn btn-info" value="重置">
       </div>
       
    </form>
    <table class="table table-bordered">
       <h4 class="text-center text-info">用户列表</h4>
        <thead>
            <tr>
                <th class="text-center">编号</th>
                <th class="text-center">姓名</th>
                <th class="text-center">年龄</th>
                <th class="text-center">邮箱</th>
                <th class="text-center">操作</th>
            </tr>
        </thead>
        <tbody>
           <tr v-for='(value,index) in arr'>
               <td class="text-center">{{index+1}}</td>
               <td class="text-center">{{value.name}}</td>
               <td class="text-center">{{value.age}}</td>
              <td class="text-center">{{value.email}}</td>
               <td class="text-center">
                  <button class="btn btn-active" v-on:click="del(index)">删除</button>
                 </td>
            </tr>
        </tbody>
    </table>
    
</div>

js部分：

         <script src="js/vue.js"></script>
         <script>
             new Vue({
                     el:"#itany",
            data:{
            arr:[
                {name:'jack',age:'18',email:'123@126.com'},
                {name:'rose',age:'19',email:'456@126.com'},
                {name:'jhon',age:'20',email:'789@126.com'}
            ],
            arrs:[
                {name:'',age:'',email:''}
            ]
        },
           methods:{
              add:function(){
                   this.arr.push(this.arrs),
                       this.arrs={name:'',age:'',email:''}
                      },
                      del:function(ind){
                           this.arr.splice(ind,1)
                         }
                   }
                })
         </script>
  </body>

效果图：

添加用户表格练习.png

二、
v-if/v-else/v-else-if：条件渲染

  <div id="itany">
    <p v-if="num==0">000000000000</p>
    <p v-else-if="num==1">1111111111111</p>
    <p v-else-if="num==2">222222222222</p>
    <p v-else-if="num==3">3333333333</p>
    <p v-else-if="num==4">444444444444444</p>
    <p v-else="num==5">55555555555555</p>
    
    
</div>
     <script src="js/vue.js"></script>
   <script>
    new Vue({
        el:'#itany',
        data:{
   //  num:Math.floor(Math.random()*(max-min+1)+min)
            num:Math.floor(Math.random()*(5-0+1)+0)
        }
    })

</script>

三、v-once\v-pre
v-once:只绑定一次
v-pre:原样输出

  <div id="itany">
      <input type="text" v-model="msg">
   <!--       v-once只绑定一次-->
       <p v-once>{{msg}}</p>
   
        <!--       v-pre原样输出-->
        <p v-pre>{{msg}}</p>
  </div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#itany",
        data:{
            msg:'hello vue'
        }
    })
</script>

效果：

v-once v-pre.png

四、v-html\v-text

v-html:可以解析标签
v-text:不可以解析标签

<div id="itany">
   <input type="text" v-model="msg">
   <!--       v-html可以解析标签-->
   <p v-html="msg">{{msg}}</p>
   <!--       v-text不可以解析标签-->
   <p v-text="msg">{{msg}}</p>
 </div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#itany',
        data:{
            msg:'hello vue'
        }
    })
</script>

五、v-cloak生命周期

这个指令保持在元素上直到关联实例结束编译，
和 CSS 规则如 [v-cloak] { display: none } 一起用时，
这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

css部分：

<style>
      [v-cloak] {
      display: none;
    }
</style>

body部分：

 <body>
    <div id="itany">
   <p v-cloak>{{msg}}</p>

</div>
js部分：

   <script src="js/vue.js"></script>
  <script>
       new Vue({
        el:'#itany',
        data:{
            msg:'hello vue'
        },
        beforeMount:function(){
            alert(111)
        }
    })
</script>

六、过滤器
过滤器：对显示在页面上的数据进行处理筛选操作

格式：

   html部分：{{8|过滤器的名字}}

  js部分：Vue.filter('过滤器的名字',function(函数名){


  })

案例：

body部分：

 <div id="itany">
     <p>{{8|addZero}}</p>
</div>

js部分：

<script src="js/vue.js"></script>
<script>
    Vue.filter("addZero",function(data){
        if(data<10){
            return '0'+data;//小于10时，输出‘0’+数字
        }else{
            return data;//大于10时，直接输出数字
        }
    })
    new Vue({
        el:'#itany',
        data:{
            msg:''
        }
    })
</script>