【第一季】Vue2.0内部指令
学习这套课程你需要的前置知识:
- HTML的基础知识,你需要达到中级水平,写前端页面的结构代码完全没有问题。
- CSS的基础知识,最好做过半年以上的切图和布局,最好了解CSS3的知识。
- Javascript的基础知识,对基本语法掌握,这个要求不高,因为遇到难的我会在视频中讲解。
- node.js初级知识,只需要会npm的使用和项目初始化就可以了
如果你对上面三个知识还不了解,建议不要冒进学习,会影响你的学习热情。但你已经是科班出身或者在培训班毕业后想继续学习,是完全没有难度的。
学习方法:学完视频之后,一定要动手写一遍,如果不写你真的到项目中一定写错或者写不出来,要在学习时就不断采坑。
一、下载Vue2.0的两个版本:
官方网站:http://vuejs.org/
- 开发版本:包含完整的警告和调试模式
- 生产版本:删除了警告,进行了压缩
二、Vue使用方式
直接下载并用
<script>
标签引入,Vue
会被注册为一个全局变量。 在开发环境下不要使用压缩版本,不然你就失去了所有常见错误相关的警告!CDN 推荐:https://cdn.jsdelivr.net/npm/vue,会保持和 npm 发布的最新的版本一致。可以在 https://cdn.jsdelivr.net/npm/vue/ 浏览 npm 包资源。 也可以从 unpkg 和 cdnjs 获取 (cdnjs 的版本更新可能略滞后)。 NPM 在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。 # 最新稳定版 $ npm install vue 命令行工具 (CLI) Vue 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目: # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖,走你 $ cd my-project $ npm install $ npm run dev
三、live-server使用
用npm进行全局安装
1 |
npm install live-server -g |
---|
在项目目录中打开
1 |
live-server |
---|
四、编写第一个HelloWorld代码:
123456789101112131415161718192021222324 |
<!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 |
<divv-if="isLogin">你好,JSPang!</div> |
---|
完整html代码:
1234567891011121314151617181920212223242526 |
<!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 |
<divv-show="isLogin">你好:JSPang</div> |
---|
3、v-if 和v-show的区别:
- v-if: 判断是否加载,可以减轻服务器的压力,在需要时加载。
- v-show:调整css dispaly属性,可以使客户端操作更加流畅。
第3节:v-for指令 :解决模板循环问题
v-for指令是循环渲染一组data中的数组,v-for 指令需要以 item in items 形式的特殊语法,items 是源数据数组并且item是数组元素迭代的别名。
一、基本用法:
模板写法
123 |
<li v-for="item in items"> {{item}}</li> |
---|
js写法
1 2 3 4 5 6 |
varapp=newVue({ el:'#app', data:{ items:[20,23,18,65,32,19,54,56,41] } }) |
---|
完整代码:
12345678910111213141516171819202122232425262728 |
<!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(){ returnthis.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 |
functionsortNumber(a,b){ returna-b } |
---|
用法
12345 |
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} ] |
---|
在模板中输出
12345 |
<ul> <li v-for="student in students"> {{student.name}} - {{student.age}} </li></ul> |
---|
加入索引序号:
1 2 3 4 5 |
<ul> <liv-for="(student,index) in students"> {{index}}:{{student.name}}-{{student.age}} </li> </ul> |
---|
排序,我们先加一个原生的对象形式的数组排序方法:
12345678 |
//数组对象方法排序: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(){ returnsortByKey(this.students,'age'); } |
---|
第4节:v-text & v-html
我们已经会在html中输出data中的值了,我们已经用的是{{xxx}},这种情况是有弊端的,就是当我们网速很慢或者javascript出错时,会暴露我们的{{xxx}}。Vue给我们提供的v-text,就是解决这个问题的。我们来看代码:
1 |
<span>{{ message }}</span>=<span v-text="message"></span><br/> |
---|
如果在javascript中写有html标签,用v-text是输出不出来的,这时候我们就需要用v-html标签了。
1 |
<spanv-html="msgHtml"></span> |
---|
双大括号会将数据解释为纯文本,而非HTML。为了输出真正的HTML,你就需要使用v-html 指令。
需要注意的是:在生产环境中动态渲染HTML是非常危险的,因为容易导致XSS攻击。所以只能在可信的内容上使用v-html,永远不要在用户提交和可操作的网页上使用。
完整代码:
1234567891011121314151617181920212223242526 |
<!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:绑定事件监听器
v-on 就是监听事件,可以用v-on指令监听DOM事件来触发一些javascript代码。
一、使用绑定事件监听器,编写一个加分减分的程序。
效果如图
程序代码
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> <htmllang="en"> <head> <metacharset="UTF-8"> <scripttype="text/javascript"src="../assets/js/vue.js"></script> <title>v-on事件监听器</title> </head> <body> <h1>v-on 事件监听器</h1> <hr> <divid="app"> 本场比赛得分: {{count}}<br/> <buttonv-on:click="jiafen">加分</button> <buttonv-on:click="jianfen">减分</button> </div> <scripttype="text/javascript"> varapp=newVue({ 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 |
<inputtype="text"v-on:keyup.enter="onEnter"v-model="secondCount"> |
---|
javascript代码:
123 |
onEnter:function(){ this.count=this.count+parseInt(this.secondCount);} |
---|
因为文本框的数字会默认转变成字符串,所以我们需要用parseInt()函数进行整数转换。
你也可以根据键值表来定义键盘事件:
第6节:v-model指令
v-model指令,我理解为绑定数据源。就是把数据绑定在特定的表单元素上,可以很容易的实现双向数据绑定。
一、我们来看一个最简单的双向数据绑定代码:
html文件:
1 2 3 4 5 |
<divid="app"> <p>原始文本信息:{{message}}</p> <h3>文本框</h3> <p>v-model:<inputtype="text"v-model="message"></p> </div> |
---|
javascript代码:
123456 |
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> |
---|
四、多选按钮绑定一个值
123 |
<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> <inputtype="checkbox"id="JSPang"value="JSPang"v-model="web_Names"> <labelfor="JSPang">JSPang</label><br/> <inputtype="checkbox"id="Panda"value="Panda"v-model="web_Names"> <labelfor="JSPang">Panda</label><br/> <inputtype="checkbox"id="PanPan"value="PanPan"v-model="web_Names"> <labelfor="JSPang">PanPan</label> <p>{{web_Names}}</p> </p> |
---|
六、单选按钮绑定数据
123456 |
<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 指令
v-bind是处理HTML中的标签属性的,例如<div></div>就是一个标签,<img>也是一个标签,我们绑定<img>上的src进行动态赋值。
html文件:
1 2 3 |
<divid="app"> <imgv-bind:src="imgSrc" width="200px"> </div> |
---|
在html中我们用v-bind:src=”imgSrc”的动态绑定了src的值,这个值是在vue构造器里的data属性中找到的。
js文件:
123456 |
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 |
<!-- 完整语法 --> <av-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> |
---|
123456789 |
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 |
<divv-pre>{{message}}</div> |
---|
这时并不会输出我们的message值,而是直接在网页中显示{{message}}
v-cloak指令
在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用,
123 |
[v-cloak] { display: none;} |
---|
1 2 3 |
<divv-cloak> {{ message }} </div> |
---|
v-once指令
在第一次DOM时进行渲染,渲染完成后视为静态内容,跳出以后的渲染过程。
1 2 |
<divv-once>第一次绑定的值:{{message}}</div> <div><inputtype="text"v-model="message"></div> |
---|
- ASP.NET Web API对OData的支持
- 小技巧 - 简化你的泛型API
- 优化OEA中的聚合SQL
- Universal Image Loader for Android 使用实例
- 如何从 Ring Buffer 读取?
- OEA中的AutoUI重构(1) - Command自动生成
- 开源项目Universal Image Loader for Android
- android Universal Image Loader for Android 说明文档 (1)
- 修改android最小堆内存
- (转)ES6新特性概览
- 基于OEA框架的客户化设计(一) 总体设计
- 【致敬周杰伦】基于TensorFlow让机器生成周董的歌词(附源码)
- 关于Android N的那些事
- “节流函数”提高性能
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP小程序支付功能完整版【基于thinkPHP】
- CodeIgniter框架实现的整合Smarty引擎DEMO示例
- PHP微信支付功能示例
- PHP中ltrim()函数的用法与实例讲解
- Laravel 中创建 Zip 压缩文件并提供下载的实现方法
- pytorch随机采样操作SubsetRandomSampler()
- Pytorch上下采样函数–interpolate用法
- scrapy框架携带cookie访问淘宝购物车功能的实现代码
- 浅析Python __name__ 是什么
- PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
- PHP后期静态绑定实例浅析
- php+mysql开发中的经验与常识小结
- PHP时间戳和日期相互转换操作实例小结
- php json转换相关知识(小结)
- PHP单例模式应用示例【多次连接数据库只实例化一次】