Vue基础指令入门 （v-text、v-html、v-on、v-bind、v-if、v-show、v-model、v-for）

1.官方vue.js导入

导入官方vue.js，开始使用vue框架，其中vue.js适合调试，vue.min.js适合实际应用。

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2.创建vue对象

创建id为app的div标签，再在JS中创建vue对象，其中包括el，data等元素,el的挂载为**‘#app’**。

<div id="app"></div>
<script>
 var app = new Vue({
      el: '#app',
      data: {
      }
  });
 </script>

3.v-text，v-html指令

创建p标签，其中内容由v-text指令获取vue对象中data元素对应message的文本内容，或使用{{ }}获取，同理使用v-html获取html元素。

 <div id="app">
    <p v-text="message" ></p>
    <p >{{ message }}</p>
    <p v-html="context"></p>
    <p v-html="table"></p>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
          message:'v-text测试',
          context:'<a href="https://www.baidu.com">百度一下</a>',
          table:'<table border="1"><tr><td>11</td><td>22</td></tr></table>'
      }
  });
  </script>

效果如下：

4.v-on:指令

通过v-on指令触发绑定方法，绑定方法写到vue对象的methods中，可使用快捷方式@代替。

  <div id="app2">
    <input type="button" value="事件绑定" v-on:click="doIt('测','试')">
    <input type="button" value="双击事件" @dblclick="doIt">
    <input type="text" value="键入事件" @keyup.enter="sayHi">
    <p @click="changeFood">{{food}}</p>
  </div>
  <script>
   var app2 = new Vue({
      el: '#app2',
      data: {
          food:'韭黄炒蛋'
      },
      methods: {
          doIt:function (x1,x2) {
              alert("doIt");
              console.log(x1+x2)
          },
          changeFood:function () {
              this.food +='番茄炒蛋'
          },
          sayHi:function () {
              alert("吃饭了没")
          }
      }
  });
  </script>

5.v-if,v-show,v-bind:指令

v-if，v-show通过条件控制标签的显示状态（显示或隐藏），图中通过isShow变量控制标签显示或隐藏。v-bind指令控制标签元素的属性，利用vue对象中自定义的imgSrc路径，来控制图中img标签的src属性。

<div id="app4">
   <img v-show='isShow' src="lib/4K%20(1).jpg" alt="" style="width: 35%;height: 300px">
   <img v-show='age>=199' src="lib/4K%20(1).jpg" alt="" style="width: 35%;height: 300px">
   <p v-if="isShow">一个P标签</p>
   <input type="button" @click="changeShow" value="切换状态">
   <p>v-bind测试</p>
   <img v-bind:src="imgSrc" alt="" style="width: 35%;height: 300px" :class="{active:isActive}" @click="toggleActive">
   <img :src="imgSrc" alt="" :title="imgTitle" style="width: 35%;height: 300px">
 </div>
 <script>
   var app4 = new Vue({
     el:'#app4',
     data:{
         isShow:true,
         age:18,
         imgSrc:"lib/1.jpg",
         imgTitle:'logo',
         isActive:false
     },
     methods:{
         changeShow:function () {
             this.isShow = !this.isShow;
         },
         toggleActive:function () {
             this.isActive = ! this.isActive;
         }
     }
 });
 </script>

6.v-for指令

v-for指令用来遍历数组中的内容，也可获取到对应的索引index。图中在li标签中遍历了校区所在地，并自动生成对应li标签，以及通过按钮控制vegetables数组内容，实现添加和删除

<div id="app5">
  <ul>
    <li v-for="(item,index) in arr" v-bind:title="item">
      {{ index+1 }}校区：{{ item }}
    </li>
    <input type=button @click="add" value="添加蔬菜">
    <input type=button @click="remove" value="移除蔬菜">
    <li v-for="item in vegetables" :title="item.name">
      {{ item.name }}{{ item.title }}
    </li>
  </ul>
</div>
<script>
  var app5 = new Vue({
    el:'#app5',
    data:{
        arr:['北京','上海','杭州','四川'],
        vegetables:[
            {name:'西兰花'},
            {name:'番茄'},
            {name:'土豆', title:'马铃薯' }
        ]
    },
    methods:{
        add:function () {
            this.vegetables.push({name:'韭菜'});
        },
        remove:function () {
            this.vegetables.shift();
        }
    }
});
</script>

效果如下：

7.v-model指令

作用：双向数据绑定，只能用于表单元素上，示例:由于下图中输入框了‘message’，h2标签内容会跟随输入框内容变化而变化。

<div id="app6">
    <input type="button" value="修改message" @click="fixM">
    <input type="text" v-model="message" @keyup.enter="getM">
    <h2>{{ message }}</h2>
  </div>
  <script>
    var app6 = new Vue({
      el:'#app6',
      data:{
          message:'程序员'
      },
      methods:{
          fixM:function(){
              this.message="666";
          },
          getM:function () {
              alert(this.message+=1)
          }
      }
  });
  </script>

效果如下所示