前端框架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="" border="">
<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.js系列（9）：Vue.extend、Vue.component与new Vue
前端框架vue.js系列(9):Vue.extend.Vue.component与new Vue 本文链接:https://blog.csdn.net/zeping891103/article/det ...
- (转)2018几大主流的UI/JS框架——前端框架 [Vue.js(目前市场上的主流)]
https://blog.csdn.net/hu_belif/article/details/81258961 2016年开始应该是互联网飞速发展的几年,同时也是Web前端开发非常火爆的一年,Web ...
- 可能是目前最完整的前端框架 Vue.js 全面介绍
Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架. 摘要 2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angul ...
- 前端框架 Vue 初探
一.前言 前几日使用微信网页版时,好奇这个网页用了什么前端框架.用Chrome的开发人员模式一探到底,发现原来用了一个名叫 Angular 的框架.好吧,既然微信用了.那我也最好还是看看.等等,你这篇 ...
- 前端框架 vue 和 react 的区别
前言:最近需要使用 react,以前用过 vue,故来总结两者的区别. 首先React与vue有几点相同之处 1.都使用了Virtual DOM 2.提供了响应式(Reactive)和组件化(Comp ...
- 前端框架VUE——安装及初始化
本篇文章适合,想要学习 vue,但对 vue 又没有接触过的同学阅读,是非常基础的内容.告诉大家使用 vue 时的安装方式,及如何创建实例,展示内容. 一.安装方式 vue 是一种前端框架,所以使用前 ...
- 前端框架VUE
Vue Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vu ...
- 前端框架Vue.js——vue-i18n ，vue项目中如何实现国际化
本项目利用 VueI18n 组件进行国际化,使用之前,需要进行安装 $ npm install vue-i18n 一.框架引入步骤: 1. 先在 main.js 中引入 vue-i18n. // 国 ...
- 【入门篇】前端框架Vue.js知识介绍
一.Vue.js介绍 1.什么是MVVM? MVVM(Model-View-ViewModel)是一种软件架构设计模式,它源于MVC(Model-View-Controller)模式,它是一种思想,一 ...
- 前端框架 Vue.js 概述
Vue.js 是什么 图片 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视 ...
随机推荐
- MySQL 5.7 新特性大全和未来展望
引用 美图公司数据库高级 DBA,负责美图后端数据存储平台建设和架构设计.前新浪高级数据库工程师,负责新浪微博核心数据库架构改造优化,以及数据库相关的服务器存储选型设计.之前在「高可用架构」发表的&l ...
- Emmagee——开源Android性能测试工具
工具:Emmagee作者:孔庆云 网易(杭州)质量保证部 开源地址:https://github.com/NetEase/Emmagee Wiki:https://github.com/NetEase ...
- 006-优化web请求二-应用缓存、异步调用【Future、ListenableFuture、CompletableFuture】、ETag、WebSocket【SockJS、Stomp】
四.应用缓存 使用spring应用缓存.使用方式:使用@EnableCache注解激活Spring的缓存功能,需要创建一个CacheManager来处理缓存.如使用一个内存缓存示例 package c ...
- 002-pro ant design-Unexpected end of JSON input while parsing near '...错误解决方案
解决方法:先清除缓存,再重新安装 清除缓存 npm cache clean --force 重新安装 npm install
- redis.conf密码设置的问题
requirepass是终端客户端登录需要的密码,配置在服务端 masterauth是从服务器端登录master端需要的密码,配置在从服务端
- 虚拟货币ICO是什么意思 看完秒懂
有这样一个市场,与90年代的互联网泡沫及其相似,它被许多金融界大咖怒指为丧失道德底线的圈钱工具,更被投资者而疯狂追捧.是的,没错,它就是近二年火遍全球的虚拟货币ICO.那么,对于很多投资小白来说,虚拟 ...
- nginx反向代理 支持WebSocket
WebSocket(简称WS)协议的握手和HTTP是兼容的,通过HTTP/1.1中协议转换机制,客户端可以传递名为“Upgrade” 头部信息将连接从HTTP连接升级到WebSocket连接 那么反向 ...
- 数据库页已标记为 RestorePending，可能表明磁盘已损坏。要从此状态恢复，请执行还原操作。
错误提示: 消息 829,级别 21,状态 1,第 1 行 数据库 ID 15,页 (1:21826) 已标记为 RestorePending,可能表明磁盘已损坏.要从此状态恢复,请执行还原操作. 引 ...
- vue中输入框聚焦，自动跳转下一个输入框
比如 点击入库,el-dialog弹出来,然后自动聚焦第一个输入框,当输入框有值的时候,自动跳转下一个输入框 这个需求 直接上菜: this.$refs.lbj.focus()其实直接这么写也可以,但 ...
- Flex中如何利用FocusManager类的setFocus函数设置TextInput的焦点的例子
参考:https://blog.csdn.net/liruizhuang/article/details/5876455 <?xml version="1.0" encodi ...