VUE01指令
一、下载Vue2.0的两个版本:
官方网站:http://vuejs.org/
- 开发版本:包含完整的警告和调试模式
- 生产版本:删除了警告,进行了压缩
二、项目结构搭建
这个部分要视频中有详细讲解。
三、live-server使用
用npm进行全局安装
1
|
npm install live-server -g
|
在项目目录中打开
1
|
live-server
|
四、编写第一个HelloWorld代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>Helloworld</title>
</head>
<body>
<h1>Hello World</h1>
<hr>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
}
})
</script>
</body>
</html>
|
第2节:v-if v-else v-show 指令
一、v-if:
v-if:是vue 的一个内部指令,指令用在我们的html中。
v-if用来判断是否加载html的DOM,比如我们模拟一个用户登录状态,在用户登录后现实用户名称。
关键代码:
1
|
<div v-if="isLogin">你好,JSPang!</div>
|
完整html代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>v-if & v-show & v-else</title>
</head>
<body>
<h1>v-if 判断是否加载</h1>
<hr>
<div id="app">
<div v-if="isLogin">你好:JSPang</div>
<div v-else>请登录后操作</div>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
isLogin:false
}
})
</script>
</body>
</html>
|
这里我们在vue的data里定义了isLogin的值,当它为true时,网页就会显示:你好:JSPang,如果为false时,就显示请登录后操作。
2、v-show :
调整css中display属性,DOM已经加载,只是CSS控制没有显示出来。
1
|
<div v-show="isLogin">你好:JSPang</div>
|
3、v-if 和v-show的区别:
- v-if: 判断是否加载,可以减轻服务器的压力,在需要时加载。
- v-show:调整css dispaly属性,可以使客户端操作更加流畅。
下节课我们将学习v-for的知识。
第3节:v-for指令 :解决模板循环问题
一、基本用法:
模板写法
1
2
3
|
<li v-for="item in items">
{{item}}
</li>
|
js写法
1
2
3
4
5
6
|
var app=new Vue({
el:'#app',
data:{
items:[20,23,18,65,32,19,54,56,41]
}
})
|
完整代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>V-for 案例</title>
</head>
<body>
<h1>v-for指令用法</h1>
<hr>
<div id="app">
<ul>
<li v-for="item in items">
{{item}}
</li>
</ul>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
items:[20,23,18,65,32,19,54,56,41]
}
})
</script>
</body>
</html>
|
这是一个最基础的循环,先在js里定义了items数组,然后在模板中用v-for循环出来,需要注意的是,你需要那个html标签循环,v-for就写在那个上边。
二、排序
我们已经顺利的输出了我们定义的数组,但是我需要在输出之前给数组排个序,那我们就用到了Vue的computed:属性。
1
2
3
4
5
|
computed:{
sortItems:function(){
return this.items.sort();
}
}
|
我们在computed里新声明了一个对象sortItems,如果不重新声明会污染原来的数据源,这是Vue不允许的,所以你要重新声明一个对象。
如果不重新声明报错:
如果一切顺利的话,你已经看到了结果,但是这个小程序还是有个小Bug的,现在我把数组修改成这样。
1
|
items:[20,23,18,65,32,19,5,56,41]
|
我们把其中的54修改成了5,我们再看一下结果,发现排序结果并不是我们想要的。
我们可以自己编写一个方法sortNumber,然后传给我们的sort函数解决这个Bug。
1
2
3
|
function sortNumber(a,b){
return a-b
}
|
用法
1
2
3
4
5
|
computed:{
sortItems:function(){
return this.items.sort(sortNumber);
}
}
|
经过一番折腾,我们终于实现了真正的数字排序,这是在工作中非常常用的,一定要学好,记住。
三、对象循环输出
我们上边循环的都是数组,那我们来看一个对象类型的循环是如何输出的。
我们先定义个数组,数组里边是对象数据
1
2
3
4
5
6
|
students:[
{name:'jspang',age:32},
{name:'Panda',age:30},
{name:'PanPaN',age:21},
{name:'King',age:45}
]
|
在模板中输出
1
2
3
4
5
|
<ul>
<li v-for="student in students">
{{student.name}} - {{student.age}}
</li>
</ul>
|
加入索引序号:
1
2
3
4
5
|
<ul>
<li v-for="(student,index) in students">
{{index}}:{{student.name}} - {{student.age}}
</li>
</ul>
|
排序,我们先加一个原生的对象形式的数组排序方法:
1
2
3
4
5
6
7
8
|
//数组对象方法排序:
function sortByKey(array,key){
return array.sort(function(a,b){
var x=a[key];
var y=b[key];
return ((x<y)?-1:((x>y)?1:0));
});
}
|
有了数组的排序方法,在computed中进行调用排序
1
2
3
|
sortStudent:function(){
return sortByKey(this.students,'age');
}
|
第4节:v-text & v-html
1
|
<span>{{ message }}</span>=<span v-text="message"></span><br/>
|
如果在javascript中写有html标签,用v-text是输出不出来的,这时候我们就需要用v-html标签了。
1
|
<span v-html="msgHtml"></span>
|
双大括号会将数据解释为纯文本,而非HTML。为了输出真正的HTML,你就需要使用v-html 指令。
需要注意的是:在生产环境中动态渲染HTML是非常危险的,因为容易导致XSS攻击。所以只能在可信的内容上使用v-html,永远不要在用户提交和可操作的网页上使用。
完整代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>v-text & v-html 案例</title>
</head>
<body>
<h1>v-text & v-html 案例</h1>
<hr>
<div id="app">
<span>{{ message }}</span>=<span v-text="message"></span><br/>
<span v-html="msgHtml"></span>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!',
msgHtml:'<h2>hello Vue!</h2>'
}
})
</script>
</body>
</html>
|
第5节:v-on:绑定事件监听器
一、使用绑定事件监听器,编写一个加分减分的程序。
效果如图
程序代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>v-on事件监听器</title>
</head>
<body>
<h1>v-on 事件监听器</h1>
<hr>
<div id="app">
本场比赛得分: {{count}}<br/>
<button v-on:click="jiafen">加分</button>
<button v-on:click="jianfen">减分</button>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
count:1
},
methods:{
jiafen:function(){
this.count++;
},
jianfen:function(){
this.count--;
}
}
})
</script>
</body>
</html>
|
我们的v-on 还有一种简单的写法,就是用@代替。
1
|
<button @click="jianfen">减分</button>
|
我们除了绑定click之外,我们还可以绑定其它事件,比如键盘回车事件v-on:keyup.enter,现在我们增加一个输入框,然后绑定回车事件,回车后把文本框里的值加到我们的count上。
绑定事件写法:
1
|
<input type="text" v-on:keyup.enter="onEnter" v-model="secondCount">
|
javascript代码:
1
2
3
|
onEnter:function(){
this.count=this.count+parseInt(this.secondCount);
}
|
因为文本框的数字会默认转变成字符串,所以我们需要用parseInt()函数进行整数转换。
你也可以根据键值表来定义键盘事件:
第6节:v-model指令
这节课强烈建议你看视频,文字版你可能会看蒙!
一、我们来看一个最简单的双向数据绑定代码:
html文件:
1
2
3
4
5
|
<div id="app">
<p>原始文本信息:{{message}}</p>
<h3>文本框</h3>
<p>v-model:<input type="text" v-model="message"></p>
</div>
|
javascript代码:
1
2
3
4
5
6
|
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
}
})
|
二、修饰符
- .lazy:取代 imput 监听 change 事件。
- .number:输入字符串转为数字。
- .trim:输入去掉首尾空格。
三、文本区域加入数据绑定
1
|
<textarea cols="30" rows="10" v-model="message"></textarea>
|
四、多选按钮绑定一个值
1
2
3
|
<h3>多选按钮绑定一个值</h3>
<input type="checkbox" id="isTrue" v-model="isTrue">
<label for='isTrue'>{{isTrue}}</label>
|
五、多选绑定一个数组
1
2
3
4
5
6
7
8
9
10
|
<h3>多选绑定一个数组</h3>
<p>
<input type="checkbox" id="JSPang" value="JSPang" v-model="web_Names">
<label for="JSPang">JSPang</label><br/>
<input type="checkbox" id="Panda" value="Panda" v-model="web_Names">
<label for="JSPang">Panda</label><br/>
<input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names">
<label for="JSPang">PanPan</label>
<p>{{web_Names}}</p>
</p>
|
六、单选按钮绑定数据
1
2
3
4
5
6
|
<h3>单选按钮绑定</h3>
<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex">
<label for="one">女</label>
<p>{{sex}}</p>
|
第7节:v-bind 指令
html文件:
1
2
3
|
<div id="app">
<img v-bind:src="imgSrc" width="200px">
</div>
|
在html中我们用v-bind:src=”imgSrc”的动态绑定了src的值,这个值是在vue构造器里的data属性中找到的。
js文件:
1
2
3
4
5
6
|
var app=new Vue({
el:'#app',
data:{
imgSrc:'http://baidu.com/wp-content/uploads/2017/02/vue01-2.jpg'
}
})
|
我们在data对象在中增加了imgSrc属性来供html调用。
v-bind 缩写
1
2
3
4
|
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
|
绑定CSS样式
在工作中我们经常使用v-bind来绑定css样式:
在绑定CSS样式是,绑定的值必须在vue中的data属性中进行声明。
1、直接绑定class样式
1
|
<div :class="className">1、绑定classA</div>
|
2、绑定classA并进行判断,在isOK为true时显示样式,在isOk为false时不显示样式。
1
|
<div :class="{classA:isOk}">2、绑定class中的判断</div>
|
3、绑定class中的数组
1
|
<div :class="[classA,classB]">3、绑定class中的数组</div>
|
4、绑定class中使用三元表达式判断
1
|
<div :class="isOk?classA:classB">4、绑定class中的三元表达式判断</div>
|
5、绑定style
1
|
<div :style="{color:red,fontSize:font}">5、绑定style</div>
|
6、用对象绑定style样式
1
|
<div :style="styleObject">6、用对象绑定style样式</div>
|
1
2
3
4
5
6
7
8
9
|
var app=new Vue({
el:'#app',
data:{
styleObject:{
fontSize:'24px',
color:'green'
}
}
})
|
第8节:其他内部指令(v-pre & v-cloak & v-once)
v-pre指令
在模板中跳过vue的编译,直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。
1
|
<div v-pre>{{message}}</div>
|
这时并不会输出我们的message值,而是直接在网页中显示{{message}}
v-cloak指令
在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用,
1
2
3
|
[v-cloak] {
display: none;
}
|
1
2
3
|
<div v-cloak>
{{ message }}
</div>
|
v-once指令
在第一次DOM时进行渲染,渲染完成后视为静态内容,跳出以后的渲染过程。
1
2
|
<div v-once>第一次绑定的值:{{message}}</div>
<div><input type="text" v-model="message"></div>
|
VUE01指令的更多相关文章
- Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖
1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...
- iOS逆向工程之Hopper中的ARM指令
虽然前段时间ARM被日本软银收购了,但是科技是无国界的,所以呢ARM相关知识该学的学.现在看ARM指令集还是倍感亲切的,毕竟大学里开了ARM这门课,并且做了不少的实验,当时自我感觉ARM这门课学的还是 ...
- 步入angularjs directive(指令)--点击按钮加入loading状态
今天我终于鼓起勇气写自己的博客了,激动与害怕并存,希望大家能多多批评指导,如果能够帮助大家,也希望大家点个赞!! 用angularjs 工作也有段时间了,总体感觉最有挑战性的还是指令,因为没有指令的a ...
- Git小技巧 - 指令别名及使用Beyond Compare作为差异比较工具
前言 本文主要写给使用命令行来操作Git的用户,用于提高Git使用的效率.至于使用命令还是GUI(Tortoise Git或VS的Git插件)就不在此讨论了,大家根据自己的的喜好选择就好.我个人是比较 ...
- 浅谈JSP中include指令与include动作标识的区别
JSP中主要包含三大指令,分别是page,include,taglib.本篇主要提及include指令. include指令使用格式:<%@ include file="文件的绝对路径 ...
- [Django]用户权限学习系列之User权限基本操作指令
针对Django 后台自带的用户管理系统,虽说感觉还可以,但是为了方便用户一些操作,特别设计自定义的用户权限管理系统. 在制作权限页面前,首先需要了解权限和用户配置权限的指令,上章讲到权限的添加,删除 ...
- 机器指令翻译成 JavaScript —— No.5 指令变化
上一篇,我们通过内置解释器的方案,解决任意跳转的问题.同时,也提到另一个问题:如果指令发生变化,又该如何应对. 指令自改 如果指令加载到 RAM 中,那就和普通数据一样,也是可以随意修改的.然而,对应 ...
- ARM的栈指令
ARM的指令系统中关于栈指令的内容比较容易引起迷惑,这是因为准确描述一个栈的特点需要两个参数: 栈地址的增长方向:ARM将向高地址增长的栈称为递增栈(Descendent Stack),将向低地址增长 ...
- IL指令详细表
名称 说明 Add 将两个值相加并将结果推送到计算堆栈上. Add.Ovf 将两个整数相加,执行溢出检查,并且将结果推送到计算堆栈上. Add.Ovf.Un 将两个无符号整数值相加,执行溢出检查,并且 ...
随机推荐
- STM32(1)——使用Keil MDK以及标准外设库创建STM32工程
转载来自:http://emouse.cnblogs.com 1.1 开发工具与开发环境 1. 软件版本 本节所使用Keil MDK 为目前的最新版V4.21.其他版本差别不大,读者可以根据自己使用的 ...
- Android 串口蓝牙通信开发Java版本
Android串口BLE蓝牙通信Java版 0. 导语 Qt on Android 蓝牙通信开发 我们都知道,在物联网中,BLE蓝牙是通信设备的关键设备.在传统的物联网应用中,无线WIFI.蓝牙和Zi ...
- Div标签使用inline-block有间距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- nodejs multer
nodejs上传文件multer var multer = require('multer') var storage = multer.diskStorage({ destination: func ...
- jxls-2.x导出excel入门——基本操作
之前随笔使用的是1.x的比较古老的版本了,已经不再维护,接下来使用较新的2.x的版本进行导出 之前一直按照其他的博客与官网的随笔进行导出,发现一直报错,后面更换了POI的版本为3.16(因为jxls也 ...
- 20154327 Exp5 MSF基础应用
基础问题回答 用自己的话解释什么是exploit,payload,encode. exploit漏洞利用,一般出现漏洞后,根据一些大佬们给出的POC尝试去进行漏洞利用. payload攻击负载,是我们 ...
- dsp6657的串口学习
1. 打算用dsp6657学习下,先用串口实验吧.找一下芯片支持库Chip support libraries,路径D:\ti\pdk_C6657_1_1_1_4\packages\ti\csl,新建 ...
- hdu2147kiki's game(找规律)
kiki's game Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 40000/10000 K (Java/Others)Total ...
- post接口_ajax上传
Action() { web_reg_save_param("find_msg", "LB=message\":\"", "RB= ...
- 《Git学习指南》学习笔记(一)
第二章 入门 git的安装 在Linux下,git的安装很简单.以我的系统Deepin/Ubuntu为例,只需在终端敲入sudo apt-get install git即可.其他Linux发行版可尝试 ...