Vue基本指令（详细，好理解，示例代码）

Vue指令可以帮助我们更好的实现交互功能。下面是对Vue的基本指令的整理，希望可以帮助到有需要的小伙伴~

文章目录

指令
- 什么是指令
- v-clock指令用法
- 数据绑定指令
- 数据响应式

指令

什么是指令

指令的本质是自定义属性

指令的格式：以v-开始（比如：v-clock）

v-clock指令用法

插值表达式存在的问题︰“闪动”。
- 如果浏览器比较卡的话，插值表达式的内容在浏览器中会出现“闪退”现象，会出现插值表达式。
- Vue的原理：先把插值表达式先放在页面上，然后再用数据替换
如何解决该问题∶使用v-cloak指令

官方api: https://cn.vuejs.org/v2/api/

v-cloak指令的用法

提供样式

[v-cloak]{

display: none;

}
在插值表达式所在的标签中添加v-cloak指令

解决该问题的原理∶先通过样式隐藏内容，然后在内存中进行值的替换(把插值表达式替换为数据)，替换好之后再显示最终的结果

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>hello world</title><style>/* 1. 提供样式 */[v-clock] {display: none;}</style>
</head>
<body><div id="app"><!-- 2. 在插值表达式所在的标签中添加v-clock指令 --><div v-clock>{{msg}}</div> </div><!-- 2. 引入vue.js库文件 --><script src="js/vue.js"></script><script>var vm = new Vue({el: "#app",data: {msg: 'v-clock指令'}})</script>
</body>
</html>

数据绑定指令

v-text 填充纯文本
- 相比插值表达式更加简洁
v-html 填充HTML片段
- 存在安全问题
- 本网站内部数据可以使用，来自第三方的数据不可以用
v-pre 填充原始信息
- 显示原始信息，跳过编译过程(分析编译过程)

示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数据绑定</title>
</head>
<body><!-- 1. 提供标签用于存放数据 --><div id="app"><!-- 4. 把vue提供的数据填充到标签里面 --><!-- 把msg数据存放到id为app的div中 --><!-- {{}} : 插值表达式* 把数据填充到HTML标签里* 支持基本的计算操作--><div>{{msg}}</div> <!-- v-text指令 （没有闪退问题，推荐使用） --><div v-text="msg"></div><!-- v-html指令 --><div v-html="msg1"></div><!-- v-pre 显示原始信息（不编译） --><div v-pre>{{msg}}</div></div><!-- 2. 引入vue.js库文件 --><script src="js/vue.js"></script><script>//   3. 使用vue语法实现功能var vm = new Vue({// el：告诉vue把数据插入到哪个位置el: "#app",// data: 提供数据data: {msg: 'Hello Vue',msg1: '<h1>HELLO</h1>'}})</script>
</body>
</html>

数据响应式

如何理解响应式
- html5中的响应式 (屏幕尺寸的变化导致样式的变化。 )
- 数据的响应式 (数据的变化导致页面内容的变化)·
什么是数据绑定
- 数据绑定∶将数据填充到标签中
v-once只编译一次
- 显示内容之后不再具有响应式功能

响应式示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>响应式</title>
</head>
<body><!-- 1. 提供标签用于存放数据 --><div id="app"><!-- 4. 把vue提供的数据填充到标签里面 --><!-- 把msg数据存放到id为app的div中 --><!-- {{}} : 插值表达式* 把数据填充到HTML标签里* 支持基本的计算操作--><div>{{msg}}</div> </div><!-- 2. 引入vue.js库文件 --><script src="js/vue.js"></script><script>//   3. 使用vue语法实现功能var vm = new Vue({// el：告诉vue把数据插入到哪个位置el: "#app",// data: 提供数据data: {msg: 'Hello Vue'}})</script>
</body>
</html>

v-once指令示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>响应式</title>
</head>
<body><!-- 1. 提供标签用于存放数据 --><div id="app"><!-- 4. 把vue提供的数据填充到标签里面 --><!-- 把msg数据存放到id为app的div中 --><!-- {{}} : 插值表达式* 把数据填充到HTML标签里* 支持基本的计算操作--><div>{{msg}}</div> <!-- v-once的应用场景:如果显示的信息后续不需要再修改，可以使用v-once，这样可以提高性能。因为vue要监听响应是否会发生变化，是很消耗性能的--><div v-once>{{info}}</div></div><!-- 2. 引入vue.js库文件 --><script src="js/vue.js"></script><script>//   3. 使用vue语法实现功能var vm = new Vue({// el：告诉vue把数据插入到哪个位置el: "#app",// data: 提供数据data: {msg: 'Hello Vue',info: 'nihao'}})</script>
</body>
</html>

end~

Vue基本指令（详细，好理解，示例代码）相关推荐

php vue联动查询,使用vue.js实现联动效果的示例代码
摘要:本篇文章主要介绍了使用vue.js实现联动效果的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧想用vue.js写一个联动效果,按照自己的思路实验了下,并没有 ...
抓娃娃机c语言程序设计,vue制作抓娃娃机的示例代码
去年为联通制作双十一活动,做四个小游戏:'配对消消乐'.移动拼图.抓娃娃.倒计时. 现在先做来分享一下制作抓娃娃游戏时的经验先上效果图游戏规则:在指定时间内抓到上图四张卡片为挑战成功. 现在直接说 ...
071：vue+openlayers轨迹路线动画（示例代码）
第071个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中实现轨迹动画,本示例为网上别人的一个引用,感觉很好,应用地址请见相关API参考. 直接复制下面的 vue+ope ...
vue自定义指令(详细)
局部自定义指令自定义指令可以调用 5个函数,4个参数函数: * bind:只调用一次,指令第一次绑定到元素时调用.在这里可以进行一次性的初始化设置. * inserted:被绑定元素插入父节点时调 ...
030：vue+openlayers读取WKB数据（示例代码）
第030个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中读取WKB的数据,并显示图形. 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果: ...
linux 清理垃圾指令,Linux垃圾清理(示例代码)
一.删除缓存 1,非常有用的清理命令: sudo apt-get autoclean 清理旧版本的软件缓存 sudo apt-get clean ...
c语言系统跑分,纯C语言跑分（详细注释）(示例代码)
#include #include//clock()所属头文件 const int N_qsort=10000;//快排的数据规模 const int M=20000,N=50000;//整点.浮点运 ...
vue的介绍及基本使用（详细，好理解，示例代码）
下面是对Vue的介绍和对Vue的基本使用,希望可以帮助到有需要的小伙伴~ 文章目录 VUE介绍 Vue:渐进式JavaScript框架 Vue的基本使用 Vue的基本使用步骤 VUE介绍 Vue是一套 ...
全网详细介绍nginx的反向代理、正向代理配置，location的指令说明，反向代理的两个示例代码以及全局块，events块和http快的说明。
文章目录 1. 文章引言 2. 何谓反向代理 3. 解析nginx的配置文件 3.1 全局块(global block) 3.2 events块(events block) 3.3 http块(htt ...
Vue指令超详细演示理解
一:插值表达式将data中定义的数据显示到模板上. 在vue中{{ }}语法,叫做:插值表达式,大白话就是输出{{ }}中的表达式的值的语法. 把{{ }} 理解为一个占位符(一个坑), {{ ms ...