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 ...
随机推荐
- Hibernate 注解之 @Temporal
因为数据库中有个 Date类型的数据,在从数据库中获取数据[就是getXxx方法,当然,自动装配的时候可以直接写在字段上,但也只是针对getXxx方法,不会自动赋值]的时候可以利用这个 @Tempor ...
- BZOJ5105 CodePlus2017晨跑
这个题???我WA了两发??? #include<iostream> #include<cstdio> #include<cmath> #include<cs ...
- P2231 [HNOI2002]跳蚤
题目描述 Z城市居住着很多只跳蚤.在Z城市周六生活频道有一个娱乐节目.一只跳蚤将被请上一个高空钢丝的正中央.钢丝很长,可以看作是无限长.节目主持人会给该跳蚤发一张卡片.卡片上写有N+1个自然数.其中最 ...
- Make a Crystal UVA - 11014 （容斥定理）
题意:给定一个NxNxN的正方体,求出最多能选几个整数点,使得任意两点PQ不会使PQO共线. 思路:利用容斥原理,设f(k)为点(x, y, z)三点都为k的倍数的点的个数(要扣掉一个原点O),那么所 ...
- Climbing Stairs - LeetCode
目录 题目链接 注意点 解法 小结 题目链接 Climbing Stairs - LeetCode 注意点 注意边界条件 解法 解法一:这道题是一题非常经典的DP题(拥有非常明显的重叠子结构).爬到n ...
- 【Cf Edu #47 G】Allowed Letters
这个题大概就是每一个位置都有一个能填字符的限制(一个点集),给出已有的$n$个字符,问能填出的最小字典序的字符串. 总体思路是贪心,每一位尽量选最小的字符. 关键在于判断在某位选了一个字符后,接下来的 ...
- harbor的日常管理
有情提示:docker-compose需要在 docker-compose.yml 存放的目录下执行. 1.Stopping Harbor: #docker-compose stop Stopping ...
- Error while uploading slice_4.apk : WARNING: linker: libhoudini.so has text relocations. This is wasting memory and prevents security hardening. Please fix.
问题: android studio 2.4版本新建项目后老是编译不过,查看log报如下错误,最后发现关闭即时编译功能可以解决此问题.这也算是2.4测试版的bug吧 android - Error w ...
- Python之旅：流程控制
流程控制之if...else 每条if语句的核心都是一个值为True或False的表达式,这种表达式被称为条件测试. Python条件语句是通过一条或多条语句的执行结果(True或者False)来决定 ...
- mysql source导入多个sql文件
mysql>use dbtest; mysql>set names utf8; mysql>source D:/mysql/all.sql; 通过source命令导入多个文件,可以新 ...