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 指令完成部门页面交互效果(难点和重点) 二.指令的基本 ...
随机推荐
- 第20月第9天 paddlepaddle
1. http://staging.paddlepaddle.org/docs/develop/book/02.recognize_digits/index.cn.html
- python - one day
1. python历史. 2008 年出现 python 2.7 与 python 3.0 两个版本,后来 吉多·范罗苏姆 大叔决定停用 python 2.7,但因用户反对,于是决定于 2020 年停 ...
- Log4Net配置日志
1.log4net 1)新建一个Net空白项目,在引用出点击管理NuGet程序包,搜索log4net并安装 2)建立log4net.config配置文件 在configuration里面添加如下代码, ...
- python - 爬虫入门练习 爬取链家网二手房信息
import requests from bs4 import BeautifulSoup import sqlite3 conn = sqlite3.connect("test.db&qu ...
- Javascript - ExtJs - 数据
数据(ExtJs Data) Ext.data命名空间 有关数据存储.读取的类都定义在Ext.data命名空间中.Ext的gridPanel.combobox的数据源都是来自Ext.data提供的类. ...
- [转] Implementing a CNN for Text Classification in TensorFlow
Github上的一个开源项目,文档讲得极清晰 Github - https://github.com/dennybritz/cnn-text-classification-tf 原文- http:// ...
- Python-有关文件操作，函数调用几道练习：
1.写函数,,用户传入修改的文件名,与要修改的内容,执行函数,完成批了修改操作 2.写函数,计算传入字符串中[数字].[字母].[空格] 以及 [其他]的个数 3.写函数,判断用户传入的对象(字符串. ...
- MK64FN1M0xxx12_flash.ld链接文件解析
1.前言 本文主要对MK64FN1M0xxx12_flash.ld文件进行分析,以此来加深对链接文件的理解 2.文件详解 /* ** ################################# ...
- linux 用户空间获得纳秒级时间ns【转】
转自:https://www.cnblogs.com/kekukele/p/3662816.html 一.引言 我们在测试程序的性能的时候往往需要获得ns级的精确时间去衡量一个程序的性能,下面介绍下l ...
- js知识巩固
1.数组操作中使用splice和slice进行删除数组的区别! splice会对原数组进行操作,返回的是被删除元素组成的数组,原数组会被进行改变即变成删除后的数组,用于删除列表中的元素,arr.spl ...