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 指令完成部门页面交互效果(难点和重点) 二.指令的基本 ...
随机推荐
- [剑指Offer] 63.数据流中的中位数
题目描述 如何得到一个数据流中的中位数?如果从数据流中读出奇数个数值,那么中位数就是所有数值排序之后位于中间的数值.如果从数据流中读出偶数个数值,那么中位数就是所有数值排序之后中间两个数的平均值. c ...
- canvas画布上定位点击位置
两种方法: 1. cvs.onclick = function (e) { if (e.offsetX || e.layerX) { var x = e.offsetX == undefined ? ...
- 【数据库】Sql Server备份还原脚本
USE master RESTORE DATABASE 新建的没有任何数据的数据库名 FROM DISK = 'e:\数据库备份文件.bak' WITH MOVE '原来的逻辑名称' TO 'e:\新 ...
- CF997B Roman Digits
题意翻译 给你一棵树,每次挑选这棵树的两个叶子,加上他们之间的边数(距离),然后将其中一个点去掉,问你边数(距离)之和最大可以是多少. 题目描述 You are given an unweighted ...
- Python虚拟环境virtualenv的使用
virtualenv 是一个创建孤立的Python环境的工具.可以让你创建各自独立的.互不影响的Python开发环境. 使用pip安装即可 pip install virtualenv 查看是否安装成 ...
- bzoj3709: [PA2014]Bohater 贪心
~~~题面~~~ 题解: 首先有一个比较明显的策略,肯定先要把能带给自己受益的先选完,然后再以最佳状态去打那些会给自己带来损失的怪. 对于前一部分(可以带来受益的怪),显然我们需要先从代价小的打起,因 ...
- [ZJOI2011]最小割 & [CQOI2016]不同的最小割 分治求最小割
题面: [ZJOI2011]最小割 [CQOI2016]不同的最小割 题解: 其实这两道是同一道题.... 最小割是用的dinic,不同的最小割是用的isap 其实都是分治求最小割 简单讲讲思路吧 就 ...
- [JSOI2007]重要的城市 floyd：最短路计数
---题面--- 题解: 其实感觉还是比较妙的,第一眼看题想到floyd统计最短路条数, 注意到对于任意两点x,y而言,floyd将会枚举其最短路所可能经过的所有中转点, 因此我们可以直接分别统计对于 ...
- [GDOI2014]拯救莫莉斯 状压DP
题面: 莫莉斯·乔是圣域里一个叱咤风云的人物,他凭借着自身超强的经济头脑,牢牢控制了圣域的石油市场. 圣域的地图可以看成是一个n*m的矩阵.每个整数坐标点(x , y)表示一座城市( 1\le x\l ...
- 洛谷 P2730 魔板 Magic Squares 解题报告
P2730 魔板 Magic Squares 题目背景 在成功地发明了魔方之后,鲁比克先生发明了它的二维版本,称作魔板.这是一张有8个大小相同的格子的魔板: 1 2 3 4 8 7 6 5 题目描述 ...