VUE常用指令总结！
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://lib.baomitu.com/vue/2.5.21/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<!--差值表达式-->
{{ name1 }}
<!--v-text 读取文本不能读取html标签-->
<h1 v-text="name2"></h1>
<!--v-html 能读取文本和html标签-->
<div v-html="name3"></div>
<!--v-model 双向绑定-->
<input type="text" v-model="name4" />
<br>
名字：{{ name4 }}
<br>
<!--v-bind 绑定属性-->
<a v-bind:href="name5">百度一下</a>
<hr>
<!--v-if 添加或者移除dom树中-->
<h1 v-if="name6">你好</h1>
<!--v-show 修改元素的display的值 进行显示隐藏-->
<h1 v-show="name7">你好</h1>
<!--v-for-->
<ul>
<li v-for="vo in list">{{ vo.no}},{{vo.name}}</li>
</ul>
<!--v-on 绑定事件-->
<ul>
<li v-on:click="myclick">单击</li>
<li @click="myclick">单击的快捷绑定</li>
</ul>
</div> <script type="text/javascript">
new Vue({
// 管理边界
el:'#app',
// 数据
data:{
name1:'hello',
name2:'小明',
name3:'<h1>你好世界</h1>',
name4:'',
name5:'http://www.baidu.com',
name6:true,
name7:true,
list:[
{no:,name:'aaa'},
{no:,name:'bbb'},
{no:,name:'ccc'}
]
},
// 方法
methods:{
myclick : function(){
console.log("我被点击");
}
}
})
</script>
</body>
</html>
补充 v-else-if
<div id="box">
<div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
<div style="width: 100px;height: 100px;background: aqua;" v-else-if=""></div>
<div style="width: 300px;height: 300px;background: blue" v-else=""></div>
</div> <script>
new Vue({
el: "#box",
data(){
return {
show: true
}
}
})
</script>
补充return问题
在简单的vue实例中看到的Vue实例中data属性是如下方式展示的：
let app= newVue({
el:"#app",
data:{
msg:''
},
methods:{
}
})
在使用组件化的项目中使用的是如下形式：
export default{
data(){
return {
showLogin:true,
// def_act: '/A_VUE',
msg: 'hello vue',
user:'',
homeContent: false,
}
},
methods:{
}
}
为何在大型项目中data需要使用return返回数据呢？
不使用return包裹的数据会在项目的全局可见，会造成变量污染
使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。
大概9个 {{}} v-text v-html v-model v-bind v-if v-show v-for v-on
| 指令名 | 解释 |
| v-text | 读取文本内容 不包括html标签 |
| v-html | 读取文本内容 包括html标签 |
| v-model | 数据双向绑定 |
| v-bind | 绑定标签属性 |
| v-if | 判断显示隐藏 这个操作dom 安全性好 |
| v-show | 判断显示隐藏 操作的是display 不删除元素的dom节点 |
| v-for | 循环遍历数据 |
| v-on | 绑定自定义方法 |
| {{}} | 差值表达式 把data中的数据 显示到页面 |
VUE常用指令总结！的更多相关文章
- vue学习（二）Vue常用指令
2 Vue常用指令 1. vue的使用要从创建Vue对象开始 var vm = new Vue(); 2. 创建vue对象的时候,需要传递参数,是json对象,json对象对象必须至少有两个属性成员 ...
- 【Vue常用指令】
目录 v-html v-text v-for v-if v-show v-bind v-on v-model 指令修饰符 计算与侦听属性 自定义属性 获取DOM元素 "@ *** Vue.j ...
- 重学VUE——vue 常用指令有哪些？
一.什么是指令? 在 vue 中,指令以 v- 开头,是一种特殊的自定义行间属性.指令属性的预期值是一个表达式,指令的职责就是:表达式的值改变时,相应地将某些行为应用到DOM上.只有v-for是一个类 ...
- Vue.js 第1章 Vue常用指令学习
今日目标 能够写出第一个vue应用程序 能够接受为什么需要学vue 能够使用指令 能够通过指定完成简单的业务(增加删除查询) 能够理解mvvm 为什么要学习vue 企业需要 可以提高开发效率 实现vu ...
- vue常用指令
1.v-if系列 v-if="数据|判断" 只要条件成立,就显示if中的元素 v-else (注意:必须跟在v-if或者v-if-else的后面,不然失效) 如果if条件不成立显示 ...
- vue常用指令总结
一.vue指令 官网解释 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况).指令的职责是,当表达式的值改变 ...
- Vue常用指令详解分析
Vue入门 Vue是一个MVVM(Model / View / ViewModel)的前端框架,相对于Angular来说简单.易学上手快,近两年也也别流行,发展速度较快,已经超越Angular了.比较 ...
- Vue.js之常用指令
vue常用指令 vue.js官方给自己的定义是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍vue.js的常用指令. 官网:点我 一.v-text.v-html v-text:用于绑定文本 v ...
- Vue常用语法及命令
1,Vue常用语法 vue常用语法之变量的定义 // 1,变量相关 // 变量的提升 var username = "雪雪"; var username ; console.log ...
随机推荐
- CSU1392(NCPC2013)_Number Trick
给一个小数X,找个A使得:AX=(A循环左移一位) 首先,假设A为一个满足题目条件的数,有n个数位,且最高位数字为A0. 那么可列出方程:AX=(A-A0*10n-1)*10+A0 ————>& ...
- JVM学习笔记(二)：垃圾收集
程序计数器. 虚拟机栈. 本地方法栈3个区域随线程而生,随线程而灭:栈中的栈帧随着方法的进入和退出而有条不紊地执行着出栈和入栈操作. 每一个栈帧中分配多少内存基本上是在类结构确定下来时就已知的,因此这 ...
- Python实现奖金计算两种方法的比较
应发奖金计算 简述:企业发放的奖金根据利润提成.利润(profit)低于或等于10万元时,奖金可提10%: 利润高于10万元,低于20万元时,低于10万元的部分按10%提成,高于10万元的部分,可提成 ...
- Qss 样式表的尝试
QLineEdit{ border:1px solid #137eb6; padding:2px; background-color:#F5F5F5; } QToolTip{ border:1px s ...
- BZOJ3203 SDOI2013保护出题人（三分）
给a做一个前缀和,那么现在每次所查询的就是(sn-sk)/(bn+nd-(k+1)d)的最大值.这个式子可以看成是(bn+nd,sn)和((k+1)d,sk)所成直线的斜率. 脑补一条直线不断减小斜率 ...
- 虚拟主机、ECS云服务器、VPS区别汇总
想做一个网站,但是在各种类型的服务器琳琅满目,现在总结一下市场上常见的几种服务器. 1.虚拟主机 虚拟主机就是利用虚拟化的技术,将一台服务器划分出一定大小的空间,每个空间都给予单独的 FTP 权限和 ...
- variant conversion error for variable v23
excel数据导入到oracle数据库出现的问题 V23指的是excel列.,这列的数据长度超出或者类型与数据库表不一致导致的 解决方法,1.清空该列,再建个新列 2.用access SQL查出长度 ...
- 洛谷 P1270 “访问”美术馆 解题报告
P1270 "访问"美术馆 题目描述 经过数月的精心准备,Peer Brelstet,一个出了名的盗画者,准备开始他的下一个行动.艺术馆的结构,每条走廊要么分叉为两条走廊,要么通向 ...
- HDU.5692 Snacks ( DFS序 线段树维护最大值 )
HDU.5692 Snacks ( DFS序 线段树维护最大值 ) 题意分析 给出一颗树,节点标号为0-n,每个节点有一定权值,并且规定0号为根节点.有两种操作:操作一为询问,给出一个节点x,求从0号 ...
- 关于nodejs的几个干货（读中文文件编码问题/发送邮件/定时任务）
关于nodejs读取中文文件真是折腾了不少时间,网上各种方案,最后没有一个适用我,好在解决了. 下面的三个知识点都是从项目中抽出的,要单独运行脚本的话需要用全局模式来安装模块,比如安装中文转换模块(后 ...