Vue2.0——基础指令

最新推荐文章于 2024-07-18 18:41:56 发布

原创最新推荐文章于 2024-07-18 18:41:56 发布 · 628 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #javascript #html

vue 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了Vue2.0的基础指令，包括如何解决页面数据闪烁问题，详细讲解了v-html、v-text、v-pre、v-cloak、v-bind等指令的用法和场景。此外，还探讨了事件绑定，特别是事件中的this、事件修饰符的应用，以及样式绑定的不同方式，为理解和使用Vue2.0提供基础指导。

文章目录

3、页面数据闪烁

界面加载的时候会把节点直接挂载到文档树中,导致{{msg+“666”}}这个字符串会显示一下，vue对象生成data数据时候回去刷新界面把{{msg+“666”}}字符串替换成结果字符串，所以会出现页面闪烁的bug。

解决方案：(使用v-html,v-text指令操作,或者css中加[v-cloak] {display:none}😉

①添加一个v-cloak,首先添加隐藏样式，在vue框架运行时，会把项目中的v-cloak属性清空，这样处理只会渲染一次

<style>
    [v-cloak] {
        display: none;
    }
</style>
<div id="app" v-cloak>
        <div>{{msg1}}</div>
        <div v-text="msg2"></div>
        <div v-html="msg3"></div>
        <div v-pre>{{msg4}}</div>
        <a v-bind:href="link">baidu</a>
    </div>

② 不要用el关联方式，用$mount的方式挂载。

③尽量的使用指令。v-text指令底层：innerText='‘替换内容；v-text指令底层：innerText=’'替换内容，可以识别标签

4、基础指令

差值表达式，也叫声明式渲染/文本差值：{{表达式}}
v-html:相当于innerHTMl
v-text：相当于innerText
v-pre：插件表达式就被识别为文本,而不是js表达式
v-cloak：当网速很慢的时候，v-cloak结合css样式，可以解决页面出现{{xxx}}的问题。
Vue实例创建完毕并接管容器后，会删除v-cloak属性
v-bind：绑定属性

笔试题：vue中常用的指令有哪些？用处？（12分）

案例

<link rel="stylesheet" href="http://www.baidu.com">
<div id="app" v-cloak>
    <div>{{msg1}}</div>
    <div v-text="msg2"></div>
    <div v-html="msg3"></div>
    <div v-pre>{{msg4}}</div>
    <a v-bind:href="link">baidu</a>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg1: 'hello1',
            msg2: 'hello2',
            msg3: '<h2>hello3</h2>',
            msg4: 'hello4',
            link: 'http://www.baidu.com',
        }
    })

5、属性绑定

所有的原生属性前面加上v-bind: /: 代表：将常量变成了变量，一个存储空间。

图片绑定和链接：

<img v-bind:src="url">  //图片绑定
<a v-bind:href="link">baidu</a> //链接绑定
<a :href="link">baidu</a> //链接绑定(语法糖形式)
    
var vm = new Vue({
    el: "#app",
    data: {
        link: 'http://www.baidu.com',
        url: 'https://img1.baidu.com/it/u=3866532991,3661643257&fm=253&fmt=auto&app=138&f=JPEG?w=448&h=252'
    }
})

语法糖：v-bind： ==> :

v-bind表示：后面的内容是一个变量，而不是常量；

比如：这样的话为文档树中div的类名就变成了box，并不是行内的div1.

 <div v-bind:class="div1"></div>

var vm = new Vue({
    el: "#app",
    data: {
        div1: box,
    }
})

6、方法和事件绑定

v-on: 事件类型 =‘函数名/函数名（）’ ==> 语法糖 @事件类型

<button v-on:click="fn">点我</button>
//<button v-on:click="fn()">点我</button>
//语法糖
<button @click="fn">点我</button>

//绑定多个事件
<button v-on:click="fn"  @mouseover='fm()'>点我</button>

//一个元素绑定一个事件执行两个函数，方法中调用其他函数
<button @click="fn3">点我</button>
methods: {
    fn: function () {
        console.log(111111111);
        this.msg = "22222"
    },
    fn2: () => {
        console.log(222222222);
    }, //箭头函数：只能是声明式
    fn3() {
        this.fn();
        this.fn2();
    } //es6方法

}//同时打印111111 和2222222

vue的核心思想：数据驱动页面，组件化开发（高类聚低耦合）

1、事件中的this

方法中的this代表vm对象；

a.方法和ES5的函数中的this是vm对象
b.ES6的箭头函数中的this就不是vm==>因此推荐事件的函数采用ES6的对象的方法写方法 这种写法

操作数据: this.xx=“新值”

//这里的修改会执行两步操作: 
//a.修改内存data容器中的数据
//b.刷新UI==>重新设置innerHTML

2、事件修饰符

.stop 阻止冒泡，阻止从当前元素经过的所有冒泡行为

.self 其他元素的事件触发时事件链经过它,无论是捕获还是冒泡阶段都不会触发它的事件,只有它自己是精准对象才会触发事件, 虽然它自己不会被别人影响,但是它自己的事件触发的时候还是会生成事件链经过其他元素,并不阻止继续冒泡到其他元素；

<div class="div1" @click="div1">1
    <div class="div2" @click.self="div2">2
        <div class="div3" @click="div3">3</div>
    </div>
</div>

methods: {
    div1() {
        console.log("box111");
    },
    div2() {
        console.log("box222");
    },
    div3() {
        console.log("box333");
    },
}
//点击div3 打印：box333 box111   不会打印box222  
//点击div2 打印：box222 box111   不会影响冒泡

.prevent 阻止默认事件，只执行自己的事件，如a标签中的百度跳转事件；

 <a v-on:click.prevent="fn3" href="http://www.baidu.com">baidu</a>
//点击baidu只会执行自己设计的函数fn3的内容，不会再跳转到默认事件百度网页中去。

.capture 添加事件侦听器时让事件在捕获阶段触发；
.once 事件只触发一次,触发完之后,事件就解绑；如抢红包；
多修饰符一起使用:连点

<a v-on:click.prevent.once="doThat">阻止点击跳转，但是只会阻止第一次</a>

7、样式绑定

切换效果的实现：

做切换效果的技术==>样式绑定;
组件或者模板的切换==>动态组件，v-if/v-show；
路由切换 ==>router;

style绑定：三种方式

<!-- 当页面中有某一些小的改变时使用style绑定 -->
<div id="app">
    <button @click="btn">显示/隐藏</button>
    <!--1、 style里面加了""表明是字符串，不加引号表示变量会在全局中去找,多个样式中间用，隔开 -->
    <div :style="{display:n,color:'hotpink',fontSize:'20px'}">{{msg}}</div>
    <!-- 2、将样式属性写到一个对象中,引入这个变量再绑定样式 -->
    <div :style="obj">第二种样式绑定</div>
    <!-- 3、多个样式属性写到不同的对象中,然后用数组的方式引入到style中使用 -->
    <div :style="[box1,box2,{color:'blue'}]">第三种样式绑定</div>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "hello",
            flag: true,
            n: 'block',
            obj: {
                width: "200px",
                height: "200px",
                background: "pink",
                color: "blue"
            },
            box1: {
                fontSize: "30px"
            },
            box2: {
                width: "200px",
                height: "200px",
                background: "hotpink",
            }
        },
        methods: {
            btn() {
                this.flag = !this.flag;
                if (this.flag) {
                    // console.log('显示');
                    this.n = 'block'
                } else {
                    // console.log('隐藏');
                    this.n = 'none'
                }
            }
        }
    })
</script>

class绑定：三种方式

<div id="app">
    <button @click="fn">{{msg}}</button>
    <!-- 1、多个类名用[]括起来,里面加" "表示常量，用，隔开后面不加表示变量 -->
    <div :class="['box',mode]">
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
    </div>
    <!-- 2、在类名后面加布尔值,true时生效，false时失效 -->
    <div :class="{box:true,light:istrue,sun:!istrue}">
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
    </div>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: '白天模式',
            flag: false,
            mode: 'sun',
            istrue: false
        },
        methods: {

            fn() {
                this.flag = !this.flag;
                if (this.flag) {
                    this.msg = '夜间模式';
                    this.mode = 'light';
                    this.istrue = true;
                } else {
                    this.msg = '白天模式';
                    this.mode = 'sun'
                    this.istrue = false;

                }
            }
        }
    })
</script>