VUE学习笔记（一）基础

常用指令

v-model：双向数据绑定

<div id="app">
      输入您的姓名: <input type="text" v-model="name">
      <p>{{ $data | json }}</p>
      <p>{{ name }}</p>
</div>
<script>
      var V = new Vue({
            el : '#app',
            data : {
                  name : '_Appian'
            }
      });
</script>

input中输入的name，会被时时获取到；

v-on：事件绑定

<div id="app">
      输入您的姓名: <input type="text" v-model="name">
      <button v-on:click="say">欢迎点击</button>
      <button @click="say">欢迎点击</button>   //缩写
</div>
<script>
      var V = new Vue({
            el : '#app',
            data : {
                  name : '_Appian'
            },
            methods : {
                  say : function(){
                       alert('欢迎' + this.name);
                 }
            }
      });
</script>

还可以绑定其他的，如

事件名
v-on:mouseove
v-on:keydown
v-on:submit
v-on:keypress
v-on:keyup
…

v-if&v-show&v-else：条件判断

<div id="app">
     <section v-if="loginStatus">
         输入您的姓名: <input type="text" v-model="name">
         <button v-on:click="say">欢迎点击</button>
     </section>

     <section v-if="!loginStatus">
           登录用户: <input type="text">
           登录密码: <input type="password">
           <button @click="say">欢迎点击</button>
     </section>
</div>
<script>
      var V = new Vue({
            el : '#app',
            data : {
                  name : '_Appian',
                  loginStatus :　false
            },
            methods : {
                  say : function(){
                       alert('欢迎' + this.name);
                  },
                  change:function(){
                      this.loginStatus=!this.loginStatus;
                  },
            }
      });
</script>

this的执行就是实例V

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

v-for：输出列表

<div id="app">
     <ul>
         <li v-for="el in products">
            {{ el.name }} - ￥ {{ el. price }} - {{ el. category }}
         </li>
     </ul>
</div>

<script>
      var V = new Vue({
            el : '#app',
            data : {
                   products : [
                         {name: 'microphone', price: 25, category: 'electronics'},
                         {name: 'laptop case', price: 15, category: 'accessories'},
                         {name: 'screen cleaner', price: 17, category: 'accessories'},
                         {name: 'laptop charger', price: 70, category: 'electronics'},
                         {name: 'mouse', price: 40, category: 'electronics'},
                         {name: 'earphones', price: 20, category: 'electronics'},
                         {name: 'monitor', price: 120, category: 'electronics'}
                   ]
            }
      });
</script>

对象里的对应下标

//#1
<li v-for="el in products">
    {{ $index }} - {{ el.name }} - ￥ {{ el. price }} - {{ el. category }}
</li>

//#2
<li v-for="(index,el) in products">
   {{ index }} - {{ el.name }} - ￥ {{ el. price }} - {{ el. category }}
</li>