Vue入门日记（二）

Vue指令：Vue指令指的是以v-开头的一组特殊语法

v-text指令：

作用：设置标签内容；全部替换用 v-text=""；部分内容替换用{{}}；内部支持写表达式；

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset="UTF-8">
        <title>vue001</title>
        <script src='D:/VUE/vue.js'></script>
    </head>

    <body>
        <div id='app'>
            <h2 v-text="message + '!'"></h2> 
            <!-- 写法1 -->
            <h2>{{ name + "!" }}</h2>
            <!-- 写法2 -->
        </div>

        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    message: "Tree",
                    name: "Tree8"
                }
            })
        </script>
    </body>
</html>

v-html指令：

作用：设置标签的innerHTML；如果设置的值是普通文本，那和v-text是一样的；如果设置的是html结构，那会被解析成标签；而v-text只会被解析成文本；

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset="UTF-8">
        <title>Vue001</title>
        <script src="D:/VUE/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <p v-html = "content"></p>
            <p v-html = "contents"></p>
        </div>

        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    content: "Tree8",
                    contents: "<a href='https://cn.bing.com/?mkt=zh-CN'>Tree</a>"
                }
            })
        </script>
    </body>
</html>

v-on指令：

作用：为元素绑定事件；

v-on可以简写成@

绑定的方法定义在methods属性中

方法内部通过this关键字可以访问定义在data中的数据

事件绑定的方法写成函数调用的形式，可以传入自定义的参数

定义方法时需要定义形参来接收传入的实参

时间的后面跟上.修饰符可以对事件进行限制

.enter可以触发的按键为回车

事件修饰符可以有多种

<!DOCTYPE html>
<html lang='en'>
    <head>
        <title>Vue002</title>
        <script src="D:/VUE/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="button" value="事件绑定" v-on:事件名="dolt">
            <input type="button" value="事件绑定" v-on:click="dolt">
            <input type="botton" value="事件绑定" v-on:mouseenter="dolt">
            <input type="botton" value="事件绑定"@mouseenter="dolt">
            <p @click="changefood">{{ food }}</p>
        </div>

        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    food: "螺蛳粉"
                },
                methods: {
                    dolt:function(){
                        alert("Tree8");
                    },
                    changefood:function(){
                        console.log(this.food);
                        this.food += "NB!";
                    }
                }
            })
        </script>
    </body>
</html>

v-show方法：

作用：根据表达式的真假，切换元素的显示和隐藏

原理是修改元素的display，实现显示或隐藏

指令后面的内容，最终都会被解析成布尔值

值为true元素显示，值为false元素隐藏

数据改变之后，对应的元素的显示状态会同步更新

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Vue003</title>
        <script src="D:/VUE/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <img src="D:/备份恢复/备份001/photos2.0/IMG_6060.jpg" v-show="age >= 18">
            <img src="D:/备份恢复/备份001/photos2.0/IMG_6060.jpg" v-show="isShow">
        </div>

        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    isShow: true,
                    age: 16
                }
            })
        </script>
    </body>
</html>

v-if指令

作用：根据表达式的真假，切换元素的显示和隐藏；

其本质是操纵dom元素来切换显示状态

表达式的值为true，元素存在于dom树中，为false，从dom树中删除

频繁的切换使用v-show，反之使用v-if；前者的切换开销小；

<!DOCTYPE html>
<html lang='en'>
    <head>
        <title>Vue004</title>
        <meta charset="UTF-8">
        <script src = "D:/VUE/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <p v-if="true">I am Tree8</p>
            <p v-if="isShow">I am Tree8</p>
            <input type="button" value="change" @click="change">
        </div>

        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    isShow: false
                },
                methods: {
                    change: function(){
                        this.isShow = !this.isShow;
                    }
                }                
            })
        </script>
    </body>
</html>

v-bind指令：

作用：设置元素的属性

语法：v-bind：属性名=表达式

其中v-bind可以省略，直接使用：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue005</title>
        <script src = "D:/VUE/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <img v-bind:src = "">
            <img v-bind:title="'imgTitle' + '!!!'">
            <img v-bind:class="isActive?'active':''">
            <img v-bind:class="{active:isActive}">
        </div>

        <script>
            var app = Vue({
                el: "#app",
                data:{
                    imgSrc: "图片地址",
                    imgTitle: "Tree8",
                    isActive: false
                }
            })
        </script>
    </body>
</html>

v-for指令：

作用：根据数据生成列表结构

v-model指令：

作用：便捷的设置和获取表单元素的值

绑定的数据会和表单元素值相关联

绑定的数据←→表单元素的值

posted @ 2021-04-08 21:04 Tree_May_be_a_coder 阅读(49) 评论(0) 收藏举报

刷新页面返回顶部

Tree8

May be a coder

Vue入门日记（二）

公告