vue基础入门（2.2）

作者: 螺钉课堂 | 来源:发表于2019-12-20 10:08 被阅读0次

2.2.基础指令

#2.2.1.什么是指令

指令 (Directives) 是带有 v- 前缀的特殊特性,指令特性的值预期是单个 JavaScript 表达式,指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button v-on:click="fn">点击</button>
    <p v-if="flag">hello nodeing</p>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>

let vm = new Vue({
    el: '#app',
    data: {
        flag: true,
    },
    methods: {
        fn(){
            this.flag = !this.flag
        }
    }
});

</script>
</body>
</html>

上面代码中v-if就是一个指令，用来处理条件判断，根据表达式的值的真假条件渲染元素

#2.2.2.常用的指令

1.v-text和v-html

v-text可以将数据文本渲染到标签中，需要注意的是，渲染出来的内容只是文本，并不会解析html标签


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p v-text="message"></p>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>

let vm = new Vue({
    el: '#app',
    data: {
        message: '<h1>hello, nodeing</h1>'
    }
});
</script>
</body>
</html>
v-text的功能和这种形式一样

 <p v-text="message"></p>
<!-- 两种写法一样 -->
<p>{{message}}</p>

注意：v-text和还是有一点差异的，那就是当vue的实例还没有创建出来的时候，会显示文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p v-text="message"></p>
    <p>{{message}}</p>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    setTimeout(() => {
        let vm = new Vue({
            el: '#app',
            data: {
                message: 'hello nodeing'
            }
        });
    }, 3000)

</script>
</body>
</html>
v-html和v-text的区别是v-html渲染出来的内容，html标签是会被解析的,把上面代码中的v-text改写成v-html试试

<p v-text="message"></p>
<p >{{message}}</p>
<p v-html="message"></p>

2.v-show

v-show可以根据表达式的值切换css的display属性，决定内容是否显示，需要注意的是，v-show只是单纯的切换css的display属性，内容始终都会被创建出来的，和if条件渲染不同，if条件渲染是会销毁内容的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button v-on:click="fn">点击</button>
    <p v-show="flag">{{message}}</p>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>

let vm = new Vue({
    el: '#app',
    data: {
        message: '<h1>hello, nodeing</h1>',
        flag: false
    },
    methods:{
        fn(){
            this.flag = !this.flag
        }
    }
});

</script>
</body>
</html>

3.v-if、v-else、v-else-if

这几个指令和js语言中的if else类似

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button v-on:click="fn">点击</button>
    <p v-if="num >= 90">非常优秀: {{num}}</p>
    <p v-else-if="num>=80">良好:{{num}}</p>
    <p v-else-if="num>=70">中等:{{num}}</p>
    <p v-else-if="num>=60">及格:{{num}}</p>
    <p v-else>不及格:{{num}}</p>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>

let vm = new Vue({
    el: '#app',
    data: {
        num: 0,
        flag: false
    },
    methods:{
        fn(){
            this.num =Math.floor( Math.random()*101 )
        }
    }
});

</script>
</body>
</html>

4.v-for

v-for指令用来做循环渲染，需要使用item in items这种特殊的语法，items表示一个数据源数组，item表示每一个被循环出来的项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
   <ul v-for="item in arr">
       <li>{{item}}</li>
   </ul>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>

let vm = new Vue({
    el: '#app',
    data: {
       arr: [1,2,3,4,5,6]
    }
});

</script>
</body>
</html>

注意： v-for是可以打印出数组元素的下标的,需要写成下面这样，第二个参数index就表示下标

<ul v-for="(item, index) in arr">
       <li>{{item}}-{{index}}</li>
</ul>

注意2: 对象也是可以被循环的，使用方法和上面一样

<div v-for="(value, key) in object">
  {{ key }}: {{ value }}
</div>
<!-- 支持第三个参数 索引 -->
<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

注意3: 可以控制循环次数

<ul v-for="n in 10">
    <li>{{n}}</li>
</ul>

注意4: 数组更新检测,要让数组更新后页面也跟着渲染，那么必须使用vue包含的一组观察数组的变异方法，例如，添加一个数据必须使用push方法，如果使用this.arr[6] = 7 这种方法是不会触发页面更新的

let vm = new Vue({
        el: '#app',
        data: {
            arr: [1, 2, 3, 4, 5, 6],
        },
        methods: {
            fn() {
                // this.arr[6] = 7; 使用这种方法添加元素，页面不会更新
                this.arr.push(7)
                console.log(this.arr)
            }
        }
    });

同理，对数组的其他操作，也需要用相关方法,具体如下：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

上面这些方法执行后会改变原来数组，这些我们称为变异方法，还有一些方法执行后总是会返回一个新的数组，并不会改变原来数组，这些我们成为非变异方法，对于非变异方法，通常需要用返回的这个新数组，去替换原来的数组，例如：concat

let vm = new Vue({
        el: '#app',
        data: {
            arr: [1, 2, 3, 4, 5, 6],
        },
        methods: {
            fn() {
                //新数组替换原来的数组，说白了就是要把执行concat后返回的新数组赋值给原来的数组
                //这样才会触发页面更新
                this.arr = this.arr.concat([9,9,9]);
                console.log(this.arr)
            }
        }
    });

注意5: 对象的更新也需要使用具体的方法，如果直接在对象上添加或删除属性，将不会触犯页面更新

 let vm = new Vue({
        el: '#app',
        data: {
            obj: {
                id: 0,
                name: 'xh',
                age: 19
            },
        },
        methods: {
            fn() {
                // this.obj.num = 30; 这样直接添加不会触发页面更新
                //$set表示添加属性 $delete 表示删除属性  vm.$delete(this.obj,'id')
                vm.$set(this.obj,'num', 30);

            }
        }
    });

5.v-on

v-on用来添加事件，前面我们已经用过很多次了，这个指令可以简写，我们绑定事件可以写成下面这样

<!-- 绑定一个点击事件 -->
<button @click=‘fn’>点击</button>
<!-- 绑定一个鼠标移入事件 -->
<div @mouseover='fn2'>hello</div>

6.v-bind

v-bind用来绑定属性，它也有简写的形式

<!-- 绑定一个href属性 -->
<a v-bind:href="'http://www.baidu.com'">百度一下</a>
<!-- 可以简写成下面的形式 -->
<a :href="'http://www.baidu.com'">百度一下</a>

<!-- 绑定src属性 -->
<img :src="imageSrc" alt="">
<img :src="'images/banner1.jpg'">

7.v-model 可以在表单控件或者组件上创建双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text"  v-model="val" >
    <button @click="fn">增加</button>
    <p>{{val}}</p>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            val: 123
        },
        methods: {
            fn() {
               this.val++
            }
        }
    });
</script>
</body>
</html>

8.v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。通俗的说，加了这个指令，元素和它的子元素将不会被编译

<span v-pre>{{ message }}</span>

9.v-cloak

隐藏未编译的Mustache语法标签，直到实例准备完毕

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div id="app">
    <p v-cloak>{{message}}</p>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    setTimeout(() => {
        let vm = new Vue({
            el: '#app',
            data: {
                message: 'hello nodeing'
            }
        });
    }, 3000)

</script>

</body>
</html>

10.v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button @click="fn">点击</button>
    <p v-once>{{message}}</p>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>

    let vm = new Vue({
        el: '#app',
        data: {
            message: 'hello nodeing'
        },
        methods:{
            fn(){
                this.message = 'hello world!!!!'
            }
        }
    });
</script>
</body>
</html>

网友评论

本文标题：vue基础入门（2.2）

本文链接：https://www.haomeiwen.com/subject/pmubnctx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！