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 指令完成部门页面交互效果(难点和重点) 二.指令的基本 ...
随机推荐
- python - one day
1. python历史. 2008 年出现 python 2.7 与 python 3.0 两个版本,后来 吉多·范罗苏姆 大叔决定停用 python 2.7,但因用户反对,于是决定于 2020 年停 ...
- Linux 01 计算机系统硬件组成简介
PC服务器 1U = 4.445cm 企业1-2U比较多 互联网公司,品牌 DELL,HP, IBM. Dell品牌 2010年之前:1850,1950(1u),2850,2950(2u) 2010年 ...
- RPO攻击 & share your mind
参考文章: https://xz.aliyun.com/t/2220 http://www.thespanner.co.uk/2014/03/21/rpo/ https://www.lorexxar. ...
- CF1100F Ivan and Burgers
题目地址:CF1100F Ivan and Burgers 一道有难度的线性基题,看了题解才会做 预处理两个数组: \(p_{r,i}\) 表示满足下列条件的最大的 \(l\) :线性基第 \(i\) ...
- 一言难尽的js变量提升
基础知识 在这个课题开始之前我们先做一些基础知识的讲解 1.在顶级的区域内声明的变量为 window级别的变量. 也就是说var a=100 等价于 window.a=100; 2.局部的重新声明变 ...
- [Kubernetes]CentOS7部署Kubernetes集群
环境介绍及安装前准备 三台机器,用于部署k8s的运行环境: 节点 ip Master 192.168.243.138 Node1 192.168.243.139 Node2 192.168.243.1 ...
- 709. To Lower Case
Algorithm to-lower-case https://leetcode.com/problems/to-lower-case/ 1)problem Implement function To ...
- 关于python中的矩阵乘法（array和mat类型）
关于python中的矩阵乘法,我们一般有两种数据格式可以实现:np.array()类型和np.mat()类型: 对于这两种数据类型均有三种操作方式: (1)乘号 * (2)np.dot() (3)np ...
- 浏览器开启桌面通知Web Notification
本文主要描述如何开启各个浏览器的桌面通知功能 一.谷歌浏览器(chrome) 点击地址栏前面的图标
- Unity3D游戏开发框架-资源管理类ResourceManage
新建文件夹:ResMgr.接着新建三个C#脚本.代码如下: IResLoadListener.cs AssetInfo.cs ResMgr.cs using UnityEngine; using Sy ...