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>

螺钉课堂视频课程地址：http://edu.nodeing.com

vue基础入门（2.2）的更多相关文章

  1. vue基础入门（2.1）

    2.vue基础用法 2.1.事件处理 2.1.1.监听事件 使用v-on:事件名称 = '事件处理函数'的形式来监听事件,事件处理函数要写在methods后面的对象中 <!DOCTYPE htm ...

  2. vue基础入门

    Hello World   <body> <!-- 在angularJS中用ng-model --> <!-- {{mseeage?message:11}}支持三元表达式 ...

  3. vue基础入门（4）

    4.综合实例 4.1.基于数据驱动的选项卡 4.1.1.需求 需求说明: 1. 被选中的选项按钮颜色成橙色 2. 完成被选中选项下的数据列表渲染 3. 完成选项切换 4.1.2.代码实现 <!D ...

  4. vue基础入门（3）

    3.组件基础 3.1.什么是组件? 3.1.1.理解组件 前端组件化开发是目前非常流行的方式,什么是前端组件化开发呢?就是将页面的某一部分独立出来,将这一部分的数据.视图.以及一些控制逻辑封装到一个组 ...

  5. vue基础入门（2.3）

    2.3.样式绑定 2.3.1.绑定class样式 1.绑定单个class <!DOCTYPE html> <html lang="en"> <head ...

  6. Vue学习笔记-Vue基础入门

    此篇文章是本人在学习Vue是做的部分笔记的一个整理,内容不是很全面,希望能对阅读文章的同学有点帮助. 什么是Vue? Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式 ...

  7. Vue基础入门笔记

    不是面向DOM进行编程,而是面向数据去编程.当数据发生改变,页面就会随着改变. 属性绑定(v-bind)和双向数据绑定(v-model) 模板指令(v-bind:)后面跟的内容不再是字符串而是: js ...

  8. vue基础入门（1）

    1.vue初体验 1.1.vue简介 1.1.1.vue是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,什么叫做渐进式呢?通俗的讲就是一层一层的,一步一 ...

  9. vue 基础入门（一）

    app-1 :声明式渲染 app-2 :绑定元素特性 v-bind 特性被称为指令.指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性. app-3 app-4 :条件与循环 app-5 ,ap ...

随机推荐

  1. Java实现 蓝桥杯VIP 算法提高 开灯游戏

    算法提高 开灯游戏 时间限制:1.0s 内存限制:256.0MB 问题描述 有9盏灯与9个开关,编号都是1~9. 每个开关能控制若干盏灯,按下一次会改变其控制的灯的状态(亮的变成不亮,不亮变成亮的). ...

  2. Java实现 LeetCode 61 旋转链表

    61. 旋转链表 给定一个链表,旋转链表,将链表每个节点向右移动 k 个位置,其中 k 是非负数. 示例 1: 输入: 1->2->3->4->5->NULL, k = ...

  3. java实现拉丁方块填数字

    "数独"是当下炙手可热的智力游戏.一般认为它的起源是"拉丁方块",是大数学家欧拉于1783年发明的. 如图[1.jpg]所示:6x6的小格被分为6个部分(图中用 ...

  4. java实现第四届蓝桥杯连号区间数

    连号区间数 题目描述 小明这些天一直在思考这样一个奇怪而有趣的问题: 在1~N的某个全排列中有多少个连号区间呢?这里所说的连号区间的定义是: 如果区间[L, R] 里的所有元素(即此排列的第L个到第R ...

  5. PAT 反转链表

    给定一个常数 K 以及一个单链表 L,请编写程序将 L 中每 K 个结点反转.例如:给定 L 为 1→2→3→4→5→6,K 为 3,则输出应该为 3→2→1→6→5→4:如果 K 为 4,则输出应该 ...

  6. CSS清除浮动&内容居中&文字溢出

    学习! 1.CSS清除浮动的方法 (1)添加标签清除浮动: 在浮动元素结尾处,并列的添加标签<div style="clear:both;"></div>. ...

  7. [转] 图解单片机下载程序电路原理之USB转串口线、CH340、PL2303、MAX232芯片的使用

    点击阅读原文 目前为止,我接触单片机已有不少时日,从选择元器件.原理图.PCB.电路硬件调试.软件开发也算小有心得 .单片机软件开发里面第一步当属下载程序了,如果这一步都有问题,那么后面的一切便无从谈 ...

  8. Spark原始码系列（五）分布式缓存

    问题导读:spark缓存是如何实现的?BlockManager与BlockManagerMaster的关系是什么? 这个persist方法是在RDD里面的,所以我们直接打开RDD这个类. def pe ...

  9. springboot的坑

    No tests found for given includes:xxxx 找不到findOne()方法 可以用它的findById(id).orElse(null); 存在就会直接返回值,如果不存 ...

  10. 使用Applescript、Automator和AfredWorkflow实现流式工作

    重要:本文不会提供标题中三个工具的详细使用教程,只会对它们的进行简要的介绍.更高妙的使用技巧读者应自行钻研. 参考资料: 两个关于Applescript和Automator使用的PDF:https:/ ...