【第一季】Vue2.0视频教程-内部指令(共8集)
【第一季】Vue2.0视频教程-内部指令(共8集)
- 【第一季】Vue2.0视频教程-内部指令(共8集)
- 第1节:走起我的Vue2.0
- 学习这套课程你需要的前置知识:
- 下载Vue2.0的两个版本:
- 项目结构搭建
- live-server使用
- 编写第一个HelloWorld代码:
- 第2节:v-if v-else v-show 指令
- v-if的使用:
- 2.v-show的使用:
- v-if 和v-show的区别:
- 第3节:v-for指令 :解决模板循环问题
- 一、基本用法:
- 二、排序
- 三、对象循环输出
- 第4节:v-text & v-html
- 第5节:v-on:绑定事件监听器
- 第6节:v-model指令
- 一、我们来看一个最简单的双向数据绑定代码:
- 二、修饰符
- 三、文本区域加入数据绑定
- 四、多选按钮绑定一个值
- 五、多选绑定一个数组
- 六、单选按钮绑定数据
- 第7节:v-bind 指令
- v-bind 缩写
- 绑定CSS样式
- 第8节:其他内部指令(v-pre & v-cloak & v-once)
- v-pre指令
- v-cloak指令
- v-once指令
- 第一季总结:
很高兴你能来学习这套Vue2.0视频课程,现在越来越多的小公司开始使用Vue来作为前端开发框架了,而且Vue的生态也越来越好,无论你是前端的老手还是新手,都有必要认真并系统的学习,有可能的话尽量在工作中使用它了。
第1节:走起我的Vue2.0
很高兴你能来学习这套Vue2.0视频课程,现在越来越多的小公司开始使用Vue来作为前端开发框架了,而且Vue的生态也越来越好,无论你是前端的老手还是新手,都有必要认真并系统的学习,有可能的话尽量在工作中使用它了。
学习这套课程你需要的前置知识:
- HTML的基础知识,你需要达到中级水平,写前端页面的结构代码完全没有问题。
- CSS的基础知识,最好做过半年以上的切图和布局,最好了解CSS3的知识。
- Javascript的基础知识,对基本语法掌握,这个要求不高,因为遇到难的我会在视频中讲解。
- node.js初级知识,只需要会npm的使用和项目初始化就可以了
如果你对上面三个知识还不了解,建议不要冒进学习,会影响你的学习热情。但你已经是科班出身或者在培训班毕业后想继续学习,是完全没有难度的。
学习预期:这套视频会有很多季,每一季会有几集构成,像美国的电视剧一样,从最基础一直讲到项目实战,你学完这套视频就可以直接上手项目,也希望你能找到一份不错的工作。
学习方法:学完视频之后,一定要动手写一遍,如果不写你真的到项目中一定写错或者写不出来,要在学习时就不断采坑。
下载Vue2.0的两个版本:
官方网站:
- 开发版本:包含完整的警告和调试模式
- 生产版本:删除了警告,进行了压缩
项目结构搭建
这个部分要视频中有详细讲解。
live-server使用
用npm进行全局安装
- npm install live-server -g
在项目目录中打开
- live-server
编写第一个HelloWorld代码:
- <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>
xml
第2节:v-if v-else v-show 指令
通过上节课的学习,我们已经搭建好了开发环境,并且写出了一个简单的HelloWorld程序,我们今天主要学习v-if v-else 和 v-show。其实我们这一季学习的都是Vue2.0的内部指令。
v-if的使用:
v-if:是vue 的一个内部指令,指令用在我们的html中。
v-if用来判断是否加载html的DOM,比如我们模拟一个用户登录状态,在用户登录后现实用户名称。
关键代码:
- <div v-if="isLogin">你好,JSPang!</div>
完整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>
xml
这里我们在vue的data里定义了isLogin的值,当它为true时,网页就会显示:你好:JSPang,如果为false时,就显示请登录后操作。
2.v-show的使用:
调整css中display属性,DOM已经加载,只是CSS控制没有显示出来。
- <div v-show="isLogin">你好:JSPang</div>
v-if 和v-show的区别:
- v-if: 判断是否加载,可以减轻服务器的压力,在需要时加载。
- v-show:调整css dispaly属性,可以使客户端操作更加流畅。
第3节:v-for指令 :解决模板循环问题
v-for指令是循环渲染一组data中的数组,v-for 指令需要以 item in items 形式的特殊语法,items 是源数据数组并且item是数组元素迭代的别名。
一、基本用法:
模板写法
- <li v-for="item in items">
- {{item}}
- </li>
js写法
- var app=new Vue({
- el:'#app',
- data:{
- items:[20,23,18,65,32,19,54,56,41]
- }
- })
javascript
完整代码:
- <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>
django
这是一个最基础的循环,先在js里定义了items数组,然后在模板中用v-for循环出来,需要注意的是,你需要那个html标签循环,v-for就写在那个上边。
二、排序
我们已经顺利的输出了我们定义的数组,但是我需要在输出之前给数组排个序,那我们就用到了Vue的computed:属性。
- computed:{
- sortItems:function(){
- return this.items.sort();
- }
- }
javascript
我们在computed里新声明了一个对象sortItems,如果不重新声明会污染原来的数据源,这是Vue不允许的,所以你要重新声明一个对象。
如果一切顺利的话,你已经看到了结果,但是这个小程序还是有个小Bug的,现在我把数组修改成这样。
- items:[20,23,18,65,32,19,5,56,41]
我们把其中的54修改成了5,我们再看一下结果,发现排序结果并不是我们想要的。
我们可以自己编写一个方法sortNumber,然后传给我们的sort函数解决这个Bug。
- function sortNumber(a,b){
- return a-b
- }
用法
- computed:{
- sortItems:function(){
- return this.items.sort(sortNumber);
- }
- }
css
经过一番折腾,我们终于实现了真正的数字排序,这是在工作中非常常用的,一定要学好,记住。
三、对象循环输出
我们上边循环的都是数组,那我们来看一个对象类型的循环是如何输出的。
我们先定义个数组,数组里边是对象数据
- students:[
- {name:'jspang',age:32},
- {name:'Panda',age:30},
- {name:'PanPaN',age:21},
- {name:'King',age:45}
- ]
javascript
在模板中输出
- <ul>
- <li v-for="student in students">
- {{student.name}} - {{student.age}}
- </li>
- </ul>
加入索引序号:
- //数组对象方法排序:
- 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));
- });
- }
javascript
有了数组的排序方法,在computed中进行调用排序
- sortStudent:function(){
- return sortByKey(this.students,'age');
- }
javascript
注意:vue低版本中 data里面的items和computed里面可以一样,但是高版本,是不允许相同名称。有很多小伙伴踩到了这个坑,这里提醒学习的小伙伴,根据自己版本的不同,请修改代码。(感谢网友:tannnb的指正)。
第4节:v-text & v-html
我们已经会在html中输出data中的值了,我们已经用的是{{xxx}},这种情况是有弊端的,就是当我们网速很慢或者javascript出错时,会暴露我们的{{xxx}}。Vue给我们提供的v-text,就是解决这个问题的。我们来看代码:
width="100%" src="https://v.qq.com/iframe/player.html?vid=a0379qvloe5&tiny=0&auto=0" allowfullscreen="">
- <span>{{ message }}</span>=<span v-text="message"></span><br/>
如果在javascript中写有html标签,用v-text是输出不出来的,这时候我们就需要用v-html
标签了。
- <span v-html="msgHtml"></span>
双大括号会将数据解释为纯文本,而非HTML。为了输出真正的HTML,你就需要使用v-html 指令。 需要注意的是:在生产环境中动态渲染HTML是非常危险的,因为容易导致XSS
攻击。所以只能在可信的内容上使用v-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>
django
第5节:v-on:绑定事件监听器
v-on 就是监听事件,可以用v-on指令监听DOM事件来触发一些javascript代码。
width="100%" src="https://v.qq.com/iframe/player.html?vid=k0380uowbyd&tiny=0&auto=0" allowfullscreen="">
一、使用绑定事件监听器,编写一个加分减分的程序。
程序代码
- <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>
django
我们的v-on 还有一种简单的写法,就是用@代替。
- <button @click="jianfen">减分</button>
我们除了绑定click之外,我们还可以绑定其它事件,比如键盘回车事件v-on:keyup.enter,现在我们增加一个输入框,然后绑定回车事件,回车后把文本框里的值加到我们的count上。 绑定事件写法:
- <input type="text" v-on:keyup.enter="onEnter" v-model="secondCount">
javascript代码:
- onEnter:function(){
- this.count=this.count+parseInt(this.secondCount);
- }
javascript
因为文本框的数字会默认转变成字符串,所以我们需要用parseInt()函数
进行整数转换。
你也可以根据键值表来定义键盘事件:
第6节:v-model指令
这节课强烈建议你看视频,文字版你可能会看蒙!
width="100%" src="https://v.qq.com/iframe/player.html?vid=w03806bxv24&tiny=0&auto=0" allowfullscreen="">
v-model指令,我理解为绑定数据源。就是把数据绑定在特定的表单元素上,可以很容易的实现双向数据绑定。
一、我们来看一个最简单的双向数据绑定代码:
html文件
- <div id="app">
- <p>原始文本信息:{{message}}</p>
- <h3>文本框</h3>
- <p>v-model:<input type="text" v-model="message"></p>
- </div>
html
javascript代码:
- var app=new Vue({
- el:'#app',
- data:{
- message:'hello Vue!'
- }
- })
lasso
二、修饰符
- .lazy:取代 imput 监听 change 事件。
- .number:输入字符串转为数字。
- .trim:输入去掉首尾空格。
三、文本区域加入数据绑定
- <textarea < cols="30" rows="10" v-model="message"></textarea>
四、多选按钮绑定一个值
- <h3>多选按钮绑定一个值</h3>
- <input type="checkbox" id="isTrue" v-model="isTrue">
- <label for='isTrue'>{{isTrue}}</label>
五、多选绑定一个数组
- <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>
html
六、单选按钮绑定数据
- <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>
html
第7节:v-bind 指令
v-bind是处理HTML中的标签属性的,例如
就是一个标签,也是一个标签,我们绑定上的src进行动态赋值。width="100%" src="https://v.qq.com/iframe/player.html?vid=j0380r6d4pe&tiny=0&auto=0" allowfullscreen="">
html文件:
- <div id="app">
- <img v-bind:src="imgSrc" width="200px">
- </div>
在html中我们用v-bind:src=”imgSrc”的动态绑定了src的值,这个值是在vue构造器里的data属性中找到的。
js文件:
- var app=new Vue({
- el:'#app',
- data:{
- imgSrc:'http://baidu.com/wp-content/uploads/2017/02/vue01-2.jpg'
- }
- })
lasso
我们在data对象在中增加了imgSrc属性来供html调用。
v-bind 缩写
- <!-- 完整语法 -->
- <a v-bind:href="url"></a>
- <!-- 缩写 -->
- <a :href="url"></a>
xml
绑定CSS样式
在工作中我们经常使用v-bind来绑定css样式:
在绑定CSS样式是,绑定的值必须在vue中的data属性中进行声明。 1、直接绑定class样式
- <div :class="className">1、绑定classA</div>
2、绑定classA并进行判断,在isOK为true时显示样式,在isOk为false时不显示样式。
- <div :class="{classA:isOk}">2、绑定class中的判断</div>
3、绑定class中的数组
- <div :class="[classA,classB]">3、绑定class中的数组</div>
4、绑定class中使用三元表达式判断
- <div :class="isOk?classA:classB">4、绑定class中的三元表达式判断</div>
5、绑定style
- <div :style="{color:red,fontSize:font}">5、绑定style</div>
6、用对象绑定style样式
- <div :style="styleObject">6、用对象绑定style样式</div>
- var app=new Vue({
- el:'#app',
- data:{
- styleObject:{
- fontSize:'24px',
- color:'green'
- }
- }
- })
javascript
第8节:其他内部指令(v-pre & v-cloak & v-once)
width="100%" src="https://v.qq.com/iframe/player.html?vid=y0380ywmwuf&tiny=0&auto=0" allowfullscreen="">>
v-pre指令
在模板中跳过vue的编译,直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。
- <div v-pre>{{message}}</div>
这时并不会输出我们的message值,而是直接在网页中显示{{message}}
v-cloak指令
在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用,
- [v-cloak] {
- display: none;
- }
- <div v-cloak>
- {{ message }}
- </div>
v-once指令
在第一次DOM时进行渲染,渲染完成后视为静态内容,跳出以后的渲染过程。
- <div v-once>第一次绑定的值:{{message}}</div>
- <div><input type="text" v-model="message"></div>
第一季总结:
第一季我们学习了Vue中的指令,这也是Vue中最容易理解的部分,以前我也只是使用Vue,通过这个课程的制作,我也对Vue指令有了全面和更深刻的了解。对于小伙伴们的学习,我想说的是,你看完视频后一定要动手去敲写代码,这样你才能理解并记住。我们第二季的课程也已经在准备中了,第二季我们将讲解Vue的全局API。
转载来源:技术胖博客 http://jspang.com/post/vue2-1.html
如有侵权请与我联系删除
相关文章:
- vue.js2.0完整视频教程12套
- 抖音跳转微信小程序方法有哪些
- 【uniapp】H5跳转微信支付和跳转支付宝支付
- H5跳转微信公众号
- 手机浏览器跳转微信指定页面及跳转微信公众号一键关注
- html 获取微信支付接口,h5外部浏览器跳转微信支付链接api接口免费代码
- Android App跳转微信小程序
- 【笔记】微信小程序 跳转 微信公众号
- android用微信打开链接地址,外链h5浏览器跳转微信打开小程序跳转任意网站地址方法...
- H5跳转微信小程序教程
- iOSAPP跳转微信小程序
- 外部链接跳转微信小程序
- 小风车跳转微信如何实现?如何实现抖音小风车挂车自由?
- 微信跳转(完美解决方案)
- 使用SQL.js访问SQLite
- 1.3-Connection选项
- Electron中使用sql.js操作SQLite数据库
- linux远程连接mongo
- Linux命令之远程连接ssh
- Linux sftp远程连接
- Linux远程终端连接
- linux-三种远程连接服务器方式
- linux远程连接注意防火墙
- linux怎么远程连接Pg数据库,实现远程连接Linux上的PostgreSQL服务
- Linux基础——SSH远程连接
- linux怎么远程连接Pg数据库,实现远程连接Linux上的PostgreSQL服务器
- Linux修改远程连接端口
- linux远程连接设置
- linux 远程连接和文件传输
- 连接远程linux服务器
【第一季】Vue2.0视频教程-内部指令(共8集)相关推荐
- 黑客叔叔(雨袭团)内部交流题(第一季1.0.1):
http://www.shiyanbar.com/ctf/741 黑客叔叔(雨袭团)内部交流题(第一季1.0.1): 解题链接: http://ctf5.shiyanbar.com/crypto/p0 ...
- 黑客叔叔(雨袭团)内部交流题(第一季1.0.2)
http://www.shiyanbar.com/ctf/1744 黑客叔叔(雨袭团)内部交流题(第一季1.0.2): 详见题目 解题链接: http://ctf5.shiyanbar.com/cry ...
- vue2.0 通过v-html指令渲染的富文本无法修改样式的解决方案
vue2.0 通过v-html指令渲染的富文本无法修改样式的解决方案 参考文章: (1)vue2.0 通过v-html指令渲染的富文本无法修改样式的解决方案 (2)https://www.cnblog ...
- Vue2.0 内置指令directives 与全局配置过滤filters
内置指令directives 除了核心功能默认内置的指令 (例如 v-model 和 v-show),Vue 也允许注册自定义指令. 你仍然需要对普通 DOM 元素进行底层操作 ...
- 超炫计算机课件ppt,5分钟打造高级炫酷的PPT系列第一季-斧子演示视频教程
第1章 开天需有利斧 1小时36分钟10节 1-1 先看看效果 这是用斧子演示编程的一个演示文档,并且是利用它自己的导出视频功能导出的演示视频. [01:20] 开始学习 1-2 斧子演示的下载.安装 ...
- Vue2.0 视频教程
好像是一套vue 开发webapp 课程.来自网络. url:https://pan.baidu.com/s/1jIele9w password:b404 文章来源:刘俊涛的博客 地址:http:// ...
- vue视频教程,vue2.0
vue视频教程很多人对我说vue教程,这里我给大家推荐vue2.0视频教程下载,这是一套从基础到项目一共8天的就业视频从0基础到商城实战有基础可以跳过直接项目 可以关注微信公众号搜索:cityapes ...
- 【Vue2.0】黑马课程笔记(一)基本指令和过滤器
目录 1 了解 1.1 为什么要学习流行框架? 1.2 框架和库的区别 1.3 Node(后端)中的 MVC 与 前端中的 MVVM 之间的区别 1.4 Vue 扩展插件 2 Vue简介 2.1 vu ...
- 分布式压测系列之Jmeter4.0第一季
1)Jmeter4.0介绍 jmeter是个纯java编写的开源压测工具,apache旗下的开源软件,一开始是设计为web测试的软件,由于发展迅猛,现在可以压测许多协议比如:http.https.so ...
最新文章
- 【java】暑期需要复习的操作
- wiretiger引擎支持行、列存储、LSM,mongodb用的哪个?
- JVM调优:G1垃圾回收器
- leetcode1333. 餐厅过滤器
- impala简介(大数据技术)
- 【转】1.B(译).NET4.X并行任务Task需要释放吗?
- Servlet Cookie 处理
- Mego(05) - Mego Tools使用教程
- iview 路由权限判断的处理
- python3入门经典100例-Python3入门经典100例
- kindeditor用法简介
- Teststand 界面打不开问题解决
- Echarts 模拟飞机飞行动态图
- Pytorch 操作整理
- android 打砖块教程,scratch教程-打砖块游戏
- 手机后端开发用php,【后端开发】php如何获取手机型号
- 阿里云服务器ECS与传统服务器有哪些区别?
- CAXA 电子图板 二次开发 功能定制
- 小鸟云虚拟主机Wordpress上传中文附件出现乱码
- 关联规则挖掘基本概念与Aprior算法
热门文章
- 第六届河南省程序设计大赛——B 外星人的供给站
- Geomagic Design X 2019 打不开stl文件怎么办
- 控制流测试 (语句覆盖、分支覆盖、判定覆盖、路径覆盖) 与条件测试
- nmap使用教程命令大全
- 云科通明湖:金融业务可持续性能力建设,少不了这块“拼图”!
- nginx编译安装设置systemctl系统启动
- 【慕课笔记】Java定时任务调度工具详解之Timer篇_0理论
- makefile:中文版最权威的makefile文档( 转载 )
- 火爆程度超过微信:最近全网刷屏的社交APP突然下架了
- Android开发:recycleView页面点击跳转