这些常用指令，可以在html标签中使用

v-text：

v-text：设置标签的文本值，不能解析dom标签

<div id="app">
<span v-text="msg"></span>
</div>
</body>
<script>
  let vue = new Vue({
    el:"#app",
    data:{
      msg: "今天上班很开心"
    },

  });
</script>

v-html：

v-html：设置标签的文本值，并且也会解析dom标签

<div id="app">
  <span v-html="name" ></span>
<span v-text="msg"></span>
</div>
</body>
<script>
  let vue = new Vue({
    el:"#app",
    data:{
      msg: "今天上班很开心",
      name:"<font color='red'>大帅哥</font>"
    },

  });
</script>

v-on：

v-on：为元素绑定事件，v-on可以简写为@符。

v-on触发的方法，一定是vue对象中定义的方法

下面的示例为v-on绑定的点击事件

<body>
<div id="app">
    <span v-text="msg"></span>
    <!--v-on触发的方法，一定是vue对象中定义的方法-->
<input type="button" v-on:click="fun()" value="点击事件1">
<input type="button" @click="fun2()" value="点击事件2">
</div>
</body>
<script>
    let vue = new Vue({
        el:"#app",
        data:{
            msg:"今天上班很开心"
        },
        methods:{
            fun(){
                this.msg="你自己说的话难道不违心吗",
                alert("你自己说的话难道不违心吗")
            },
            fun2(){
                alert("点击事件2被触发了")
            }
        }

    });
</script>

v-on之传递参数

v-on：在实际开发中触发某个方法，可能需要传递参数。 v-on：其他事件之键盘按下弹起事件，@keyup，@keydown，@keypress

此示例与下方v-for有关联，请结合观看

v-show和v-if：

v-show：根据表达式值的真假，切换元素的显示和隐藏 v-if：根据表达式值的真假，进行删除和创建标签

<body>
  <div id="app">
      <input type="button" value="增加年龄" @click="fun()">
      <img src="imgs/mv.jpg" width="500" v-show="age>=18&&age<=60">
      <img src="imgs/mv2.jpg" width="500" v-if="age>=18&&age<=40">
      <input type="button" value="减少年龄" @click="fun2()">
     当前年龄为： {{age}}
  </div>
</body>
<script>
  let vue = new Vue({
    el:"#app",
    data:{
        age:13
    },
    methods:{
        fun(){
            this.age++
        },
        fun2(){
            this.age--
        }
    }
  });
</script>

v-bind

v-bind:设置元素的属性（比如：src，title，class），使这些属性可以根据vue中的数据变化发生动态变化

v-bind也可以缩写为：符

<body>
<div id="app">
<img width="300"  v-bind:src="imgs"  :title="mytitle" >
    <button type="button" @click="xia" >下一张</button>

</div>
</body>
<script>
        let vue = new Vue({
            el:"#app",
            data:{
                imgs:"imgs/mv.jpg",
                mytitle:"美女一号"
            },
            methods:{
                xia(){
                    this.imgs="imgs/mv2.jpg";
                    this.mytitle="这是美女二号"
                }
            }
        });
</script>

v-for:

v-for:根据数据生成列表结构。对数组数据进行循环操作

v-for:使用的格式为 变量名 in 需要遍历的数组，循环最终会将遍历的值交给定义的变量接收

v-for：如果需要索引下标，接收方的格式应改为 (变量名,索引下标) in 需要遍历的数组 ，这里的变量名称和索引下标是一个变量，名称可以随意更改

<body>
<div id="app">
    <ul>
       <!-- v-for类似于java中的foreach循环：foreach循环的格式为：for(数据类型 变量名: 数组名称)-->

        <!--v-for中格式为 变量名 in 需要遍历的数组，循环最终会将遍历的值交给定义的变量接收-->
        <li v-for="like in hobbys">{{like}}</li>
    </ul>
    <ul>
    <!--如果需要索引下标，接收方的格式应改为(变量名，索引下标) in 需要遍历的数组，这里的变量名称和索引下标是一个变量，名称可以随意更改-->
    <li v-for="(like,myindex) in hobbys">{{myindex}}---->{{like}}</li>
    </ul>
    
    <table border="1" cellspacing="0" cellpadding="0" width="500">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <!--遍历集合示例-->
        <tr v-for="p in peoples" align="center">
            <td>{{p.name}}</td>
            <td>{{p.sex}}</td>
            <td>{{p.age}}</td>
        </tr>
    </table>
</div>
</body>
<script>
        let vue = new Vue({
            el:"#app",
            data:{
                hobbys:["吃饭","睡觉","码代码"],
                peoples:[
                    {name:"张三",age:33,sex:"男"},
                    {name:"李四",age:44,sex:"男"},
                    {name:"王五",age:55,sex:"男"},
                    {name:"小六",age:66,sex:"男"}
                ]
                },
        });
</script>

v-model：

获取和设置表单元素的值（双向数据绑定:当表单内容发生改变，vue中对应的数据也会发生改变。如果vue中的数据发生改变，表单元素的内容也会发生改变。）

常见的表单元素包括：【HTML基础】form表单常用的7种属性和9种元素详解（含在线练习网址）_form表单的属性有哪些-CSDN博客

<body>
<div id="app">
    <!--v-model是一个双向绑定：当表单内容发生改变的时候，vue中
    对应的数据也会发生改变，如果vue中的数据发生改变，表单元素的内容也会发生改变-->
    <input type="text" v-model="name"/>
<button @click="mychange()">按钮</button>

  {{name}}
</div>
</body>
<script>
  let vue = new Vue({
    el:"#app",
    data:{
        name:"张三"
    },
    methods:{
        mychange(){
            this.name="刘德华"
        }
    }
  });
</script>

created(){}:在页面加载完成后立马执行。

<body>
<div id="app">
<img width="300"  v-bind:src="imgs"  :title="mytitle" >
    <button type="button" @click="xia" >下一张</button>

</div>
</body>
<script>
        let vue = new Vue({
            el:"#app",
            data:{
                imgs:"imgs/mv.jpg",
                mytitle:"美女一号"
            },
            /*在页面加载完毕后，立马执行该函数*/
            created(){
                    this.xia();
            },
            methods:{
                xia(){
                    this.imgs="imgs/mv2.jpg";
                    this.mytitle="这是美女二号"
                }
            }
        });
</script>

Vue的常用指令