[VUE框架学习笔记]本地应用

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>

• v-model指令的作用时便捷的设置和获取表单元素的值
• 绑定的数据会和表单元素值相关联
• 绑定的数据==表单元素的值

记事本案例

新增

• 1.生成列表结构(v-for 数组)
• 2.获取用户输入(v-model)
• 3.回车，新增数据(v-on .enter)

删除

• 1.点击删除指定内容(v-on splice 索引)