v-text 设置标签的文本值

1.v-text指令的作用是：设置标签的内容(textContent)
2.默认写法会替换全部内容，使用插值表达式{{}}可以替换指定内容
3.内部支持写表达式

    <div id="app">
        <h2 v-text="message+'!'"></h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                message:"41"
            }
        })
    </script>

v-html 设置标签的innerHTML

1.v-html指令的作用是：设置元素的innerHTML
2.内容中有html结果会被解析为标签
3.v-text指令无论内容是什么，只会解析为文本
4.解析文本使用v-text，需要解析html结构使用v-html

    <div id="app">
        <h2 v-html="message"></h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                message:"<a href='http://www.baidu.com'>baidu</a>"
            }
        })
    </script>

v-on基础为元素绑定事件

1.v-on指令的作用是：为元素绑定事件
2.事件名不需要写on
3.指令可以简写为@
4.绑定的方法定义在methods属性中

    <div id="app">
        <input type="button" value="v-on" v-on:click="doit">
        <input type="button" value="v-on简写" @click="doit">
        <input type="button" value="双击" @dblclick="doit">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            methods:{
                doit:function(){
                    alert("41")
                }
            }
        })
    </script>

计数器

1.data中定义数据：比如num
2.methods中添加两个方法L比如add，sub
3.使用v-text将num设置给span标签
4.使用v-on将add，sub分别绑定给+，-按钮
5.累加的逻辑：小于10累加，否则提示
6.递减的逻辑：大于0递减，否则提示

    <div id="app">
        <div class="input-num">
            <button @click="sub">
                -
            </button>
            <span v-text="num"></span>
            <button @click="add">
                +
            </button>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                num:1
            },
            methods:{
                add:function(){
                    if(this.num<10){
                        this.num++
                    }else{
                        alert('10')
                    }
                },
                sub:function(){
                    if(this.num>0){
                        this.num--
                    }else{
                        alert('0')
                    }
                    
                }
            }
        })
    </script>

小结

创建Vue示例时：el(挂载点)，data(数据)，methods(方法)
v-on指令的作用是绑定事件，简写为@
方法中通过this，关键字获取data中的数据
v-text指令的作用是：设置元素的文本值，简写为{{}}
v-html指令的作用是：设置元素的innerHTML

v-show 根据表达式的真假，切换元素的显示和隐藏

    <div id="app">
        <input type="button" value="change" @click="changeshow">
        <img v-show="show" src="1.webp" alt="">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                show:false
            },
            methods:{
                changeshow:function(){
                    this.show=!this.show
                }
            }
        })
    </script>

1.v-show指令的作用：根据真假切换元素的显示状态
2.原理是修改元素的display，实现显示隐藏
3.指令后面的内容，最终都会解析为布尔值
4.值为true元素显示，值为false元素隐藏

v-if 根据表达式的真假，切换元素的显示和隐藏(操纵dom元素)

1.v-if指令的作用是：根据表达式的真假切换元素的显示状态
2.本质是通过操纵dom元素来切换显示状态
3.表达式的值为true，元素存在于dom树中，为false从dom树中移除

v-bind 设置元素的属性(比如：src，title，class)

    <style>
        .active{
            border: 1px solid red;
        }
    </style>

<div id="app">
        <img v-bind:src="src" alt="">
        <br>
        <img :src="src" alt="" :title="title" :class="isactive?'active':''" @click="change">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                src:"http://www.itheima.com/images/logo.png",
                title:"41",
                isactive:false
            },
            methods:{
                change:function(){
                    this.isactive=!this.isactive
                }
            }
        })

1.v-bind指令的作用是：为元素绑定属性
2.完整写法是v-bind:属性名
3.简写 :属性名
4.需要动态的增删class建议使用对象的方法

图片切换

1.列表数据使用数组保存
2.v-bind指令可以设置元素属性，比如src
3.v-show和v-if都可以切换元素的显示状态，频繁切换用v-show

v-for 根据数据生成列表结构

    <div id="app">
        <input type="button" value="add" @click="add">
        <input type="button" value="sub" @click="remove">
        <ul>
            <li v-for="item in arr" v-text="'num is'+item"></li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                arr:['1','2','3','4']
            },
            methods:{
                add:function(){
                    this.arr.push('*')
                },
                remove:function(){
                    this.arr.shift()
                }
                
            }
        })
    </script>

1.v-for指令的作用是：根据数据生成列表结构
2.数组经常和v-for结合使用
3.语法是(item，index) in 数据
4.item和index可以结合其他指令一起使用
5.数组长度的更新会同步到页面上，是响应式的

v-on补充：传递自定义参数，事件修饰符

1.事件绑定的方法写成函数调用的形式，可以传入自定义参数
2.定义方法时需要定义形参来接收传入的实参
3.事件的后面跟上.修饰符可以对事件进行限制
4…enter可以限制触发的按键为回车
5.事件修饰符有多种

v-model 获取和设置表单元素的值(双向数据绑定)

    <div id="app">
        <input type="button" value="change" @click="setM">
        <input type="text" v-model="message" @keyup.enter="getM">
        <h2>{{message}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                message:"41"
            },
            methods:{
                getM:function(){
                    alert(this.message)
                },
                setM:function(){
                    this.message="123"
                }
            }
        })
    </script>