Vue基本指令
模板对象
vue指令
一：模板对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
{{4+5}}
{{2>3}}
<p v-text="msg">{{msg}}</p>
<h1 v-text="str">{{str}}</h1>
{{msg}} <h3 v-html="aa">
{{aa}} </h3> </div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'你是sb吗',
str:'哈哈 你个傻吊',
aa:'<i>are you ok?</i>' }
})
</script>
</html>
二、Vue指令
指令：是带有V-前缀的特殊属性，通过属性来操作元素
1.v-text和v-html
v-text:在元素当中插入值,只能是文本
v-html:在元素不中不仅可以插入文本，还可以插入标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<p>{{80+2}}</p>
<p>{{20>30}}</p>
{{msg}}
我是：<h1 v-text="msg">{{str}}</h1>
你是：<h1 v-text="msg">2222222222222</h1> <h2 v-html="hd"></h2>
<h2 v-html="str"></h2>
</div>
<script>
new Vue({
el: "#app", //表示在当前这个元素内开始使用VUE
data:{
msg: "我是老大",
hd: "<input type='button' value='你是shei?'>",
str: "我要发财!"
}
})
</script>
</body>
</html>
2.v-if和v-show
v-if: 根据表达式的真假值来动态插入和移除元素,如果条件成立插入一个元素，如果没有就删除，注意：删除时代码里面就没有了，查看控制台发现该元素的的代码被注释了
v-show:根据表达式的真假值来隐藏和显示元素，条件不成立的时候知识用css的display:none,将该元素的代码隐藏了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="app"> <div v-if="pick">
<h1>你是对的</h1>
</div>
<div v-else>
<h1>我是对的</h1>
</div> <p v-show="bd">i am ctz</p> <p v-show="ok">好好学习天天写代码</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
pick: false,
bd: false,
ok: true
}
}); window.setInterval(function () {
vm.ok = !vm.ok
}, 1000)
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<h1>Hello, Vue.js!</h1>
<h1 v-if="yes">Yes!</h1>
<h1 v-if="no">No!</h1>
<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
</div>
</body>
<script src="js/vue.js"></script>
<script> var vm = new Vue({
el: '#app',
data: {
yes: true,
no: false,
age: 28,
name: 'keepfool'
}
})
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<h1>Hello, Vue.js!</h1>
<h1 v-show="yes">Yes!</h1>
<h1 v-show="no">No!</h1>
<h1 v-show="age >= 25">Age: {{ age }}</h1>
<h1 v-show="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
</div>
</body>
<script src="js/vue.js"></script>
<script> var vm = new Vue({
el: '#app',
data: {
yes: true,
no: false,
age: 28,
name: 'keepfool'
}
})
</script>
</html>
3.v-for
v-for:根据变量的值来循环渲染元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<!--item我们要取的值index为该值早数组中的索引-->
<h3 v-for="(item,index) in arry">
{{index}}--->{{item}}
</h3> <h4 v-for="(v,key,index) in dic">
{{index}}---{{key}}-----{{v}}
</h4> <h4 v-for="(item,index) in obj1">
{{index}}----{{item.name}}---{{item.hobby}}
</h4> <button v-on:click="f">点我删除</button>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
arry:[111,222,333,444,555],
dic:{name:'陈太章',age:21,addr:'云南昆明'},
obj1:[
{name:'赵俊明',hobby:'搞基'},
{name:'肖博雅',hobby:'被搞'},
{name:'八级哥',hobby:'互搞'}
]
},
methods:{
f:function () {
vm.arry.pop()
}
}
})
</script>
</html>
4.v-on
v-on:监听元素事件，并执行相应的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="app" >
<p><input type="checkbox" name="fruit" value="a">苹果</p>
<p><input type="checkbox" name="fruit" value="b">香蕉</p>
<p><input type="checkbox" name="fruit" value="c">梨</p>
<p><input type="checkbox" name="fruit" value="a" v-on:click="cc">其他</p>
<div v-html="aa" v-show="isshow"></div>
</div> </body> <script>
var vm=new Vue({
el:'#app',
data:{
aa:'<textarea placeholder="请输入你喜欢吃的水果"></textarea>',
isshow:false },
methods:{
cc:function () {
this.isshow=!this.isshow
}
}
})
</script>
</html>
动态生成标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="vue.js"></script>
<title>Title</title>
<style>
ul li{
list-style: none;
display: inline-block;
border:1px solid blueviolet;
height: 30px;
line-height: 30px;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-on:click="ewmlogin">二维码登录</li>
<li v-on:click="acountlogin">账号密码登录</li>
</ul> <div v-if="ewm">
<img src="erma.jpg" alt="请用手机扫码登录">
</div> <div v-if="account">
<form action="">
<p>账号:<input type="text"></p>
<p>密码:<input type="text"></p>
<p>密码:<input type="submit" value="登录"></p>
</form>
</div>
</div>
</body> <script>
var vm=new Vue({
el:'#app',
data:{
ewm:true,
account:false
},
methods:{
ewmlogin:function () {
vm.ewm=true;
vm.account=false
} ,
acountlogin:function () {
vm.account=true;
vm.ewm=false
}
}
})
</script>
</html>
tab切换方式一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="vue.js"></script>
<title>Title</title>
<style>
ul li {
list-style: none;
display: inline-block;
border: 1px solid blueviolet;
height: 30px;
line-height: 30px;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<ul>
<!--<li v-on:click="login(true)">二维码登录</li>-->
<!--<li v-on:click="login(false)">账号密码登录</li>-->
<li @click="login(true)">二维码登录</li>
<li @click="login(false)">账号密码登录</li>
</ul> <div v-if="log">
<img src="erma.jpg" alt="请用手机扫码登录">
</div> <div v-if="!log">
<form action="">
<p>账号:<input type="text"></p>
<p>密码:<input type="text"></p>
<p>密码:<input type="submit" value="登录"></p>
</form>
</div>
</div>
</body>
<script>
var vm=new Vue(
{
el:'#app',
data:{
log:true
},
methods:{
login:function (el) {
vm.log=el
}
}
}
)
</script>
</html>
tab切换方式er
v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a> <!-- 缩写 -->
<a @click="doSomething">...</a>
5.v-bind
v-bind:绑定元素的属性来执行相应的操作
v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:class v-bind:argument="expression"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="vue.js"></script>
<title>Title</title>
<style>
.bk_1{
background-color: cornflowerblue;
width: 200px;
height: 200px;
}
.bk_2{
background-color: red;
width: 200px;
height: 200px;
}
.bk_3{ border: 5px solid #000;
}
</style>
</head>
<body>
<div id="app">
<h5><a href="http://www.baidu.com" v-bind:title="msg">百度一下</a></h5> <div :class="bk1"></div>
<div :class="bk2"></div> <div :class="{bk_2:tmp,bk_3:tmp}"></div> <div :class="[bk2,bk3]"></div>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:"问问百度",
bk1:'bk_1',
bk2:'bk_2',
bk3:'bk_3',
tmp:false }
})
</script> </html>
v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a> <!-- 缩写 -->
<a :href="url">...</a>
6 v-model
v-model:实现了数据和视图的双向绑定
分成了3步：
1）把元素的值和数据相绑定
2）当输入内容时，数据同步发生变化，视图 ---数据的驱动
3）当改变数据时，输入内容也会发生变化，数据-》视图的驱动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg"> <br>
<h1>{{msg}}</h1>
<button @click="f">点击切换</button>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:''
},
methods:{
f:function () {
vm.msg='一个能打的都没有'
}
}
})
</script>
</html>
自定义指令
需求:
当进入一个页面时，输入框获取焦点，且背景颜色是绿色，字体颜色是篮色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-focus>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{},
directives:{
focus:{ //指令的名字
//当绑定的元素显示时
inserted:function (tt) {
tt.focus();
tt.style.backgroundColor='green';
tt.style.color='blue'
}
}
}
})
</script>
</html>
计算属性computer
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
temp: 1001
},
computed: {
msg: function () { if(this.temp > 1000){
return parseInt(this.temp/10)-1
} else {
return this.temp-1
}
}
}
})
</script>
</body>
</html>
Vue基本指令的更多相关文章
- vue自定义指令
Vue自定义指令: Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...
- vue 自定义指令的使用案例
参考资料: 1. vue 自定义指令: 2. vue 自定义指令实现 v-loading: v-loading,是 element-ui 组件库中的一个用于数据加载过程中的过渡动画指令,项目中也很少需 ...
- vue的指令
我之前学了学angular 发现angular和vue的指令有点类似 先说一下 new Vue({ el: "#box", // element(元素) 当前作 ...
- vue自定义指令用法总结及案例
1.vue中的指令有哪些?
- vue之指令
一.什么是VUE? 它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 二.怎么使用VUE? 1.引入vue.js 2.展示HTML <div id=" ...
- vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...
- Vue自定义指令报错：Failed to resolve directive: xxx
Vue自定义指令报错 Failed to resolve directive: modle 这个报错有2个原因: 1.指令单词拼错 2.Vue.directive() 这个方法没有写在 new Vue ...
- vue之指令篇 ps简单的对比angular
这两天在开始vue的大型项目,发现和ng还是有许多不同,这里对比下两者的指令系统 难度系数:ng的指令难度大于vue:至少vue上暂时没发现@&=:require,compile,precom ...
- 第3章-Vue.js 指令扩展 和 todoList练习
一.学习目标 了解Vue.js指令的实现原理 理解v-model指令的高级用法 能够使用Vue.js 指令完成 todoList 练习(重点+难点) 二.todoList练习效果展示 2.1.效果图展 ...
- 第2章-Vue.js指令
一.学习目标 了解 什么 是 Vue.js 指令 理解 Vue.js 指令的 用途 掌握 Vue.js 指令的书写规范 能够 使用 Vue.js 指令完成部门页面交互效果(难点和重点) 二.指令的基本 ...
随机推荐
- 显示系统中所有的socket信息
netstat -aon /proc/net/tcp /proc/net/udp /proc/net/unix 相关的代码是:tcp4_seq_show(struct seq_file *file, ...
- 【bzoj3932】[CQOI2015]任务查询系统 离散化+主席树
题目描述 最近实验室正在为其管理的超级计算机编制一套任务管理系统,而你被安排完成其中的查询部分.超级计算机中的任务用三元组(Si,Ei,Pi)描述,(Si,Ei,Pi)表示任务从第Si秒开始,在第Ei ...
- tcp协议的六个标识位
6个标识位: URG 紧急指针,告诉接收TCP模块紧要指针域指着紧要数据. ACK 置1时表示确认号(为合法,为0的时候表示数据段不包含确认信息,确认号被忽略. PSH 置1时请求的数据段在接收方得到 ...
- BZOJ3139/BZOJ1306 HNOI2013比赛/CQOI2009循环赛（搜索）
搜索好难啊. 1.对于每个分数集合记忆化. 2.某人得分超过总分,剪枝. 3.某人之后全赢也无法达到总分,剪枝. 4.每有一场比赛分出胜负总分会多三分,而平局则会多两分.某人的分出胜负场次或平局场次超 ...
- POJ2187：Beauty Contest——题解
http://poj.org/problem?id=2187 题目大意:给n个点,求点对最大距离的平方. ———————————————————— 很容易证明最大距离的点对在最大凸包上. 那么就是旋转 ...
- Educational Codeforces Round 39 (Rated for Div. 2) G
Educational Codeforces Round 39 (Rated for Div. 2) G 题意: 给一个序列\(a_i(1 <= a_i <= 10^{9}),2 < ...
- HDU4812 D tree 【点分治 + 乘法逆元】
D树 时间限制:10000/5000 MS(Java / Others)内存限制:102400/102400 K(Java / Others) 总共提交5400个已接受的提交1144 问题描述 南京理 ...
- UVA.540 Team Queue (队列)
UVA.540 Team Queue (队列) 题意分析 有t个团队正在排队,每次来一个新人的时候,他可以插入到他最后一个队友的身后,如果没有他的队友,那么他只能插入到队伍的最后.题目中包含以下操作: ...
- 【套题】qbxt国庆刷题班D2
D2 今天的题感觉还是好妙的 T1 传送门 Description 现在有一张\(n\)个节点\(m\)条边的无向连通图\(G=(V,E)\),满足这张图中不存在长度大于等于3的环且图中没有重边和自环 ...
- pushViewController:animated:的问题
1.在AppDelegate.m中: 2.在SecondViewController.h中: 3.在FirstViewController.m中: 4.在SecondViewController.m中 ...