前端框架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 的核心库只关注视 ...
随机推荐
- 发现Boost官方文档的一处错误(numpy的ndarray)
文档位置:https://www.boost.org/doc/libs/1_65_1/libs/python/doc/html/numpy/tutorial/ndarray.html shape在这里 ...
- 流程控制之if...else
# #如果:男的年龄>49,那么:小哥哥## age_of_boy = 50# if age_of_boy > 49:# print('小哥哥你好')### # 如果:女人的年龄>3 ...
- update moudle 调用方式
向数据库中添加数据 ztt_teacher 1: 创建一个 function moudle,设置该moudle类型为 update moudle 2: 向数据库添加数据的代码 FUNCTION ...
- Python 正在表达式
什么是正则表达式 正则表达式:是一组特殊的字符序列,又称为规则表达式,它能方便你检查一个字符串是否与某种模式匹配.通常用来检索和替换那些符合某些模式的文本.python中的re模块,实现了全部的正则表 ...
- 使用Emmet 快速生成HTML代码
在前端开发的过程中,一个最繁琐的工作就是写 HTML.CSS 代码.数量繁多的标签.属性.尖括号.标签闭合等,让前端们甚是苦恼.于是,我向大家推荐 Emmet,它提供了一套非常简单的语法规则,书写起来 ...
- 机器人meta标签和X-Robots-Tag HTTP标头规格
抽象 本文档详细介绍了页级索引设置如何让您控制Google如何通过搜索结果提供内容.您可以通过在(X)HTML页面或HTTP标头中包含元标记来指定这些标记. 笔记 请注意,只有当抓取工具被允许访问包含 ...
- 时间序列模式（ARIMA）---Python实现
时间序列分析的主要目的是根据已有的历史数据对未来进行预测.如餐饮销售预测可以看做是基于时间序列的短期数据预测, 预测的对象时具体菜品的销售量. 1.时间序列算法: 常见的时间序列模型; 2.时序模 ...
- python list seq
//test.py list1 = [1, 2, 3]list2 = [4, 5, 6] print cmp(list1, list2)print len(list1), len(list2)prin ...
- (转)Xcode导航快捷键（大全）
Xcode导航快捷键1.工程导航器:Command+1快速浏览代码.图片以及用户界面文件. 2.显示/隐藏导航器面板:Command+0当你在对屏幕进行截图的时候可能会想要隐藏起与你感兴趣内容的无关的 ...
- 解决乱码的方法是，在执行SQL语句之前，将MySQL以下三个系统参数设置为与服务器字符集character-set-server相同的字符集
character-set-server/default-character-set:服务器字符集,默认情况下所采用的. character-set-database:数据库字符集. characte ...