Vue常用的12个系统指令以及自定义指令

用指令前必先了解指令的作用，用在什么地方
指令：
作用：增强HTML标签功能
a.所有指令都是v-开头
b.所有指令代码位置：标签的开头标签位置
c.所有指令都是取代之前的DOM操作

一、12个常用的系统指令

1. v-text （类似于js中innerText）
   a.替换标签全部内容
   b.不可以识别字符串中标签

2. v-html （类似于js中innerHTML）
   a.替换标签全部内容
   b.可以识别字符串中标签

   <div id="app">
        <!-- v-text替换所有的内容 -->
        <h2 v-text='msg'>替换全部</h2>
        <h2>是多少：{
   {
   msg}}</h2>
        <hr>
        <h2 v-text='str'></h2>
        <hr>
        <!-- v-html能识别字符串标签 -->
        <h2 v-html='str'></h2>
    </div>
    <script>
        new Vue({
   
            el:"#app",
            data:{
   
                msg:111,
                str:'<span οnclick="alert(1)">里面的内容</span>'
            },
            methods:{
   

            }
        });
    </script>

3. v-on
   作用：绑定事件
   语法： v-on:事件名=“methods中的方法”
   ’ v-on: ‘ 简写为 ’ @ ‘

   另一种语法：
   @事件名.修饰符 = “methods中的方法”
   once（只执行一次）和prevent（阻止）常用修饰符

    <div id="app">
        {
   {
   count}}
        <button v-on:click="count = count+10">按钮</button>
        <button v-on:click="fn1()">按钮1</button>
        <!-- 没有参数时，可以省略括号 -->
        <button v-on:click= "fn1">按钮11</button>
        <!-- v-on: 简写为  @ -->
        <button @click = "fn2()">按钮2</button>
        <!-- 传参 -->
        <button @click = "fn3(100)">按钮3</button>
        <!-- $event代表当前的事件对象 -->
        <button @click = "fn4($event)">按钮4</button>
        <!-- @事件名.修饰符 = "methods中的方法"  once和prevent-->
        <!-- once只执行一次 -->
        <button @click.once="fn2()">按钮5</button>
    </div>
    <script>
        new Vue({
   
            el:"#app",
            data:{
   
                count:1,
            },
            methods:{
   
                fn1(){
   
                    console.log("fn1----");
                },
                fn2(){
   
                    console.log("fn2----");
                },
                fn3(num){
   
                    console.log(num);
                },
                fn4(e){
   
                    console.log