vue之指令
一、什么是VUE？
它是构建用户界面的JavaScript框架（让它自动生成js,css，html等）
二、怎么使用VUE？
1、引入vue.js
2、展示HTML
<div id="app">
<p>{{msg}}</p>
<p>{{ 80+2 }}</p>
<p>{{ 20>30 }}</p>
<h1 v-text="msg"></h1>
<h1 v-html="hd"></h1>
<h1 v-html="str"></h1>
</div>
3、建立一个vue对象
<script>
new Vue({
el:"#app", //表示当前这个元素开始使用vue
data:{
msg:"你好啊",
hd:"<input type='button' value='啦啦'>",
str:"你妹的"
}
})
</script>
三、数据绑定
1、插入文本{{ }}。如上例，也可以放表达式
2、插入html：v-html
四、vue的指令
指令：是带有v-前缀的特殊属性，通过属性来操作元素
1、v-text：在元素当中插入值
<!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">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<p>{{ 80+2 }}</p>
<p>{{ 20>30 }}</p>
<h1 v-text="msg"></h1>
<h1 v-html="hd"></h1>
<h1 v-html="str"></h1>
</div>
<script>
new Vue({
el:"#app", //表示当前这个元素开始使用vue
data:{
msg:"你好啊",
hd:"<input type='button' value='啦啦'>",
str:"你妹的"
}
})
</script>
</body>
</html>
示例
2、v-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">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h1>问卷调查</h1>
<form action="" method="post">
<input type="checkbox">香蕉
<input type="checkbox">苹果
<input type="checkbox">橘子
<input type="checkbox" @click="qita">其他
<div v-html="htmlstr" v-show="test"></div>
</form>
</div>
<script>
new Vue({
el:"#app", //表示当前这个元素开始使用vue
data:{
htmlstr:'<textarea></textarea>',
test:false //默认是隐藏的
},
methods:{
qita:function () {
this.test = !this.test //当一点击其他的时候让显示
}
} }); </script> </body>
</html>
示例
3、v-if和v-else：根据表达式的真假值来动态插入和移除元素
4、v-show：根据表达式的真假值来显示和隐藏元素
<!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">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p v-if="pick">我是海燕</p>
<p v-show="temp">呼啦啦呼啦啦</p>
<p v-show="ok">你喜欢我吗?</p>
</div>
<script>
var vm = new Vue({
el:"#app", //表示当前这个元素开始使用vue
data:{
// pick:true //显示
pick:false, //移除，用注释给替换了
// temp :true , //显示
temp :false, //隐藏
ok:true
}
});
window.setInterval(function() {
vm.ok =! vm.ok;
},1000) //1000代表1秒
</script> </body>
</html>
if-show示例
5、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">
<title>Title</title>
<script src="vue.js"></script>
<style>
ul li{
list-style: none;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in arr"> <!-- 对一个数组的循环 -->
{{ item }}
</li>
</ul>
<ul>
<li v-for="(item,index) in arr">
{{ item }}:{{index}}
</li>
</ul>
<ul>
<li v-for="item in obj">
{{ item }}
</li>
</ul>
<ul>
<li v-for="(item,key,index) in obj">
{{ item }}:{{ key }}:{{ index }}
</li>
</ul>
<ul>
<li v-for="item in obj2">
{{ item.username }}
{{ item.age }}
{{ item.sex }}
</li>
</ul>
<div v-for="i in 8"> <!--循环8次，打印1 2 3 4 5 6 7 8 -->
{{ i }}
</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
arr:[11,22,33,34],
obj:{a:"张三",c:"李四",b:"王麻子",d:"王大拿"},
obj2:[
{username:"jason"},
{age:20},
{sex:"male"}
]
}
})
</script>
</body>
</html>
6、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">
<title>Title</title>
<script src="vue.js"></script>
<style>
ul li{
list-style: none;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in arr"> <!-- 对一个数组的循环 -->
{{ item }}
</li>
</ul>
<ul>
<li v-for="(item,index) in arr">
{{ item }}:{{index}}
</li>
</ul>
<ul>
<li v-for="item in obj">
{{ item }}
</li>
</ul>
<ul>
<li v-for="(item,key,index) in obj">
{{ item }}:{{ key }}:{{ index }}
</li>
</ul> <input type="button" value="点我吧" v-on:click="show()">
<input type="button" value="点我吧" @click="show()"> <!--以下三种方式都可以-->
<a href="http://www.baidu.com">我想去百度</a>
<a v-bind:href="url">我想去百度</a>
<a :href="url">我想去百度</a>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
arr:[11,22,33,34],
obj:{a:"张三",c:"李四",b:"王麻子",d:"王大拿"},
str:"我来了",
url:"http://www.baidu.com"
},
methods:{
show:function () {
alert(123);
alert(vm.str);
// alert(this.str) //如果没有vm,就直接用this
}
}
})
</script>
</body>
</html>
6、v-bind：绑定元素的属性并执行相应的操作
<!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">
<title>Title</title>
<script src="vue.js"></script>
<style>
.bk_1{
width: 200px;
height: 200px;
background-color: silver;
}
.bk2_2{
width: 200px;
height: 200px;
background-color: darkorange;
}
.bk_3{ border: 5px solid #000;
}
</style>
</head>
<body>
<div id="app">
<a href="http://www.baidu.com" v-bind:title="msg">腾讯</a> <!--绑定标题-->
<a href="http://www.baidu.com" title="啦啦啦">点我</a> <!--绑定标题-->
<div v-bind:class="bk"></div>
<div v-bind:class="bk2"></div> <div :class="{bk_1:temp,bk_3:temp}">加油,吧</div> <!-- #temp一定是一个布尔值，为true是就使用bk_2,为false就不为他-->
<div :class="[bk2,bk3]"></div> <!--如果是多个类就用[bk1,bk2,],就显示两个类的样式-->
</div>
<script>
var vm = new Vue({
el:"#app",//表示在当前这个元素开始使用VUe
data:{
msg:"我想去腾讯上班",
bk:"bk_1",
bk2:"bk2_2",
bk3:"bk_3",
// temp: false,
temp: true
}
})
</script>
</body>
</html>
7、v-model：把input的值和变量绑定了，实现了数据和视图的双向绑定
<!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">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<input v-model="msg">
<input v-model="msg" value="this is test">
<p>{{msg}}</p>
<input type="button" value="变化" @click="change">
</div>
<script>
new Vue({
el:"#app", //表示当前这个元素开始使用vue
data:{
// msg:"",
msg:"aaaaa"
},
methods:{
change:function () {
this.msg=512
}
}
}); </script> </body>
</html>
示例1
<!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">
<title>Title</title>
<script src="vue.js"></script>
<style>
.cccc{
display: none;
}
</style>
</head>
<body>
<div id="app">
<div>
<input type="text" placeholder="姓名" v-model="username">
<input type="text" placeholder="年龄" v-model="age">
<input type="text" v-model="msg" class="cccc">
<input type="submit" value="添加" @click="add">
</div>
<div>
<table cellpadding="0" border="1">
<tr v-for="(item,index) in arr">
<td><input type="text" v-model="item.username"></td>
<td><input type="text" v-model="item.age"></td>
<td><input type="button" value="删除" @click="del(index)"></td>
<td><input type="button" @click="edit(index)" v-model="item.msg"></td>
</tr>
</table>
</div>
</div>
<script>
new Vue({
el:"#app", //表示当前这个元素开始使用vue
data:{
username:"",
age:"", //变量的初始化
arr:[],
msg:"编辑"
},
methods:{
add:function () {
this.arr.push(
{
"username":this.username,
"age":this.age,
"msg":this.msg
}
);
console.log(this.arr) //打印的是一个数组
},
del:function (index) {
this.arr.splice(index,1); //删除索引对应的哪一个值
},
edit:function (index) {
console.log(index);
if (this.arr[index].msg=="保存"){
// alert(this.arr[index].msg);
this.arr[index].msg="编辑";
}else{
this.arr[index].msg="保存";
} }
} })
</script> </body>
</html>
示例2
8、对数组的操作
- push #从末尾添加
- pop #从末尾删除
- shift #从头添加
- unshift #从头删除
- splice #删除元素。splice(index,1) #删除这个索引的那一个
- reverse #反转
五、自定义指令
<!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">
<title>Title</title>
<script src="vue.js"></script> </head>
<body>
<div id="app">
<input type="text" v-focus>
</div>
<script>
new Vue({
el:"#app",
data:{ },
directives:{ //directives定义指令的
focus:{ //focus指令的名字
inserted:function (els) { //els绑定的这个元素
//inserted当绑定的这个元素 <input type="text" v-focus>显示的时候，
els.focus(); //获取焦点的一个方法，和以前的时候是一样的
els.style.backgroundColor="blue";
els.style.color='#fff'
}
}
}
})
</script>
</body>
</html>
六、实现tag切换的小示例
<!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">
<title>Title</title>
<script src="vue.js"></script>
<style>
ul li{
list-style: none;
display: inline-block;
border: 1px solid cornflowerblue;
height: 50px;
width: 200px;
background: cornflowerblue;
text-align: center;
line-height: 50px; }
</style>
</head> <body>
<div id="mybox">
<ul>
<li><span v-on:click="qh(true)">二维码登录</span></li>
<li><span v-on:click="qh(false)">邮箱登录</span></li>
</ul>
<div v-if="temp">
<img src="erweima.png" alt="">
</div>
<div v-if="!temp"> <!--取反-->
<form action="http://mail.163.com" method="post">
<!--method是为了安全 ，action：提交的地址-->
<p>邮箱：<input type="email"></p>
<p>密码：<input type="password"></p>
<p><input type="submit" value="登录"></p>
</form>
</div>
</div>
<script>
new Vue({
el:"#mybox", //表示当前这个元素开始使用vue
data:{
temp:true
},
methods:{
qh:function (t) {
this.temp=t
}
}
})
</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自定义指令(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 指令完成部门页面交互效果(难点和重点) 二.指令的基本 ...
随机推荐
- zookeeper.KeeperException$UnimplementedException: KeeperErrorCode = Unimplemented for {root.path}
1 异常结果 org.apache.zookeeper.KeeperException$UnimplementedException: KeeperErrorCode = Unimplemented ...
- 往github上传代码忽略node_modules文件夹
首先必须在你初始化 git 仓库的那个文件夹建立 .gitigonre 文件,在这个文件夹里面写入下面代码 node_modules npm-debug.log package-lock.json ...
- JDK1.8源码分析之Comparable && Comparator
import java.util.ArrayList; import java.util.Arrays; import java.util.Collections; import java.util. ...
- 今天碰到一个问题，怎么限制用户在固定宽度的input输入框里输入的长度，由此涉猎到了maxlength属性和size属性以及它们的区别。
最开始想首先要强制在一行,另外超出的隐藏.还有一个思路是把value的值的长度和框的长度怎么联系起来,具体怎么联系我也不知道. 在解决另外一个问题的时候,哥发给我的代码里无意中看见input有个max ...
- STL之permutation/ equal_range/ binary_range学习
1,is_permutation 函数,判断其中一个序列是不是另外一个序列的全排列. 包括四个参数,前两个是第一个数组需要判断的起始位置和终止位置.后两个是第二个数组需要判断的起始位置和终止位置. # ...
- (7)Java数据结构--集合map,set,list详解
MAP,SET,LIST,等JAVA中集合解析(了解) - clam_clam的专栏 - CSDN博---有颜色, http://blog.csdn.net/clam_clam/article/det ...
- 20165337 2017-2018-2《Java程序设计》课程总结
一.每周作业链接汇总 预备作业一:我期望的师生关系 简要内容: 读完文章的感想 我印象深刻的老师 我期望的师生关系 预备作业二:学习基础和C语言基础调查 简要内容: 你有什么技能比大多人(超过90%以 ...
- python3.7 contextvars在asyncio使用的
from contextvars import ContextVar import asyncio import random cv = ContextVar('cv') async def wait ...
- nginx Access-Control-Allow-Origin css跨域
问题原因:nginx 服务器 css 字体跨域 以及img相对路径 问题 描述:用nginx做页面静态化时遇到了两个问题 1.我有两个静态资源服务器 static.xxx.com 和 item.xx ...
- POJ 1305
毕达哥斯三元组的模板题 练习练习 #include<iostream> #include<cstring> #include<cstdio> #include< ...