Vue的常用指令

Vue的指令写法：<组件 v-指令名="值"/>，功能：将元素的状态与 vm上的数据进行绑定。注意：指令的值，虽然在引号：是一个js环境，支持表达式，如果绑定的是变量，去vm上查找。

v-html 用于渲染富文本数据：

<body>
    <div class="api">
       <div v-html=\'a\'></div>
    </div>
   
</body>
<script src="./vue.js"></script>
<script>
    const vm =new Vue({
        el:\'.api\',
        data:{
           a: "<h1 style=\'color:red\' >富文本内容</h1>"
        }
    })
</script>

v-model 将表单控件的 value 与 vm上的数据进行双向绑定：

表单修饰符（常用于输入框） .trim .lazy 将 input事件触发改为change触发 .number 将输入的值自动变成number 解析规则和parseFloat一致

<body>
    <div class="btn">
        
        <input id="male" type="radio" value="男" v-model=\'gender\' name="sex">男

        <input id="female" type="radio" value="女"  v-model=\'gender\' name="sex">女
        <br>
        {{gender}}
        <hr>
        <input type="checkbox"  v-model=\'hibbes\' value="篮球">篮球
        <input type="checkbox" v-model=\'hibbes\'  value="足球">足球
        <input type="checkbox" v-model=\'hibbes\'  value="排球">排球
        <input type="checkbox" v-model=\'hibbes\'  value="弹球">弹球
        <br>
        {{hibbes}}
    </div>
   
</body>
<script src="./vue.js"></script>
<script>
    const vm = new Vue({
        el: \'.btn\',
        data: {
            gender:\'男\',
            hibbes:[\'篮球\']
        }
    })
</script>

v-show 将元素显示隐藏（控制display:none）与一个布尔值绑定：

v-once 渲染数据只会改变一次

<style>
        .box1 {
            width: 300px;
            height: 300px;
            margin: 20px auto;
            background-color: rebeccapurple;
        }
    </style>
</head>

<body>
    <div class="box">
        <button @click=\'isname=!isname\'>{{isname?\'消失\':\'显示\'}}</button>
        <div class="box1" v-show=\'isname\'></div>

    </div>
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: ".box",
            //数据放在data
            data: {
                msg: \'你好世界\',
                isname: false
            },
            //方法放在methods
        })
    </script>

v-bind:属性（属性是值普通的标签属性，可以是自定义属性）扩展了普通属性的功能，将普通属性变成动态属性（将这个属性的值与 vm上数据进行绑定）

简写： :属性

<body>
    <div class="box">
        <label for="n1">图片1</label>
        <input type="radio" 
            value="https://tse4-mm.cn.bing.net/th/id/OIP-C.WIrDAeihBucBrfR0VTQ3cAHaE8?w=254&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7"
            v-model=\'img1\'>
        <label for="n2">图片2</label>
        <input type="radio"
            value="https://tse4-mm.cn.bing.net/th/id/OIP-C.4E37Mp8S-UEl__KjtfEQPAHaE7?w=254&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7"
            v-model=\'img1\'>
        <img :src="img1" alt="">
        <div :id=\'a\'></div>
    </div>


    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: \'.box\',
            data: {
                img1: \'\',
                a: \'box\'
            }
        })

v-on:事件绑定vue事件（合成了原生事件）简写： @事件:

<body>
    <div class="api">
        <button @click=\'fn()\'>按钮</button>
        {{msg}}
    </div>
</body>
<script src="./vue.js"></script>
<script>
    const vm = new Vue({
        el:\'.api\',
        data:{
            msg:\'你好世界\'
        },
        methods:{
           fn(){
               this.msg=\'今天周二\'
           }
        }
    })

</script>

v-html 用于渲染富文本数据：

v-model 将表单控件的 value 与 vm上的数据进行 双向绑定：

表单修饰符（常用于输入框） .trim .lazy 将 input事件触发 改为change触发 .number 将输入的值 自动变成number 解析规则 和parseFloat一致

v-show 将元素 显示 隐藏（控制display:none）与一个布尔值绑定：

v-once 渲染数据 只会 改变一次

v-bind:属性 （属性是值普通的标签属性，可以是自定义属性） 扩展了普通属性的功能，将普通属性变成动态属性（将这个属性的值 与 vm上数据进行绑定）

简写： :属性

v-on:事件 绑定vue事件（合成了原生事件） 简写： @事件:

v-model 将表单控件的 value 与 vm上的数据进行双向绑定：

表单修饰符（常用于输入框） .trim .lazy 将 input事件触发改为change触发 .number 将输入的值自动变成number 解析规则和parseFloat一致

v-show 将元素显示隐藏（控制display:none）与一个布尔值绑定：

v-once 渲染数据只会改变一次

v-bind:属性（属性是值普通的标签属性，可以是自定义属性）扩展了普通属性的功能，将普通属性变成动态属性（将这个属性的值与 vm上数据进行绑定）

v-on:事件绑定vue事件（合成了原生事件）简写： @事件: