第2章-Vue.js指令
一、学习目标
- 了解 什么 是 Vue.js 指令
- 理解 Vue.js 指令的 用途
- 掌握 Vue.js 指令的书写规范
- 能够 使用 Vue.js 指令完成部门页面交互效果(难点和重点)
二、指令的基本概念
2.1、什么是Vue.js指令
指令是带有v-前缀的特殊属性:v-bind、v-bind:is、v-bind:key、v-cloak、v-else、v-else-if、v-for、v-html、v-if、v-model
2.2、Vue.js指令的用途
在表达式的值改变时,将某些行为应用到DOM上。
2.3、Vue.js指令的书写规范
书写位置: 任意HTML元素的开始标签内。
注意:一个开始标签内可写入多个指令,多个指令间使用空格分隔。
三、指令
3.1、v-show指令
作用:控制切换一个元素的显示,和隐藏。本质就是设置 display属性。
语法:v-show = 表达式
- 根据表达式的结果的真假,确定是否显示当前元素。
- true表示显示该元素;false 表示隐藏该元素
- 默认情况下,如果 v-show=' ',那么为false
<div id="box"> <!-- v-show 指令 语法: v-show=表达式 表达式结果为true,那么显示元素; 表达式结果为false,那么元素隐藏, 默认情况下,如果没有写入表达式,那么为 false --> <div class="div1" v-show='true'></div> </div> <script src="js/vue.js"></script> <script> var vm = new Vue({ el: "#box" }) </scrip
<div id="box"> <!-- v-show 指令 语法: v-show=表达式 表达式结果为true,那么显示元素; 表达式结果为false,那么元素隐藏, 默认情况下,如果没有写入表达式,那么为 false --> <div class="div1" v-show='false'></div> //可以直接写入 true 或 false <div class="div1" v-show='bol'></div> // 用data中的bol的值 </div> <script src="js/vue.js"></script> <script> var vm = new Vue({ el: "#box", data: { bol: false } }) </script>
v-show指令
3.2、v-on指令
作用:为HTML元素绑定事件监听
语法:v-on:事件名称='函数名称(参数)',这边注意了,如果不需要传入参数,只需写成:v-on:事件名称='函数名称',如:v-on:click='fn'
简写语法:@事件名称='函数名称',如:@click='函数名称'
注意:函数的定义在methods配置项中
<div id="box"> <!-- v-on指令:click为事件名称 语法:v-on:click='fn' 简写语法:@click='fn' --> <!--fn函数方法定义在 controller中的methods配置项里面--> <button @click='fn'>显示</button> <!--bol是引用 data 中的bol变量--> <div class="div1" v-show='bol'></div> </div> <script type="text/javascript" src="js/vue.js"></script> <script> var vm = new Vue({ el: "#box", data: { bol: true }, methods: { fn: function(){ //console.log(index); this.bol = !this.bol; } } }) </script>
v-on指令
3.3、v-model指令
作用:将用户的输入同步到视图上
语法: v-model = '变量'
注:v-model 指令必须绑定在表单元素上
<div id="box"> <!-- v-model:进行双向绑定的(把用户输入的内容,同步显示在页面上) 语法:v-model='变量' 注:使用在表单元素上(常用在type类型为text上) --> <h1 v-on:click="fn">{{ msg }}</h1> <!--input内容输入什么,在h1标签内就显示什么内容,主要使用v-model双向绑定--> <input type="text" v-model="msg" v-show="bol"/> </div> <script src="js/vue.js"></script> <script> var vm = new Vue({ el: '#box', data: { msg: "Edit", bol: true }, methods: { fn:function(){ //body.... this.bol = !this.bol; this.msg = "Edit"; } } }); </script>
v-model指令
3.4、v-for指令
作用:遍历data 中的数据,并在页面进行数据展示。
语法:遍历 元素和索引的:v-for='(item,index) in arr' ;遍历元素:v-for='item in arr'
说明:item:表示每次遍历得到的元素,index:表示item的索引,可选参数。
<div id="box"> <!-- v-for:类似于js中的for循环 语法:v-for:'item in arr' item: 每次遍历后得到的元素,arr:需要遍历的数组 v-for='(item,index) in arr' index:下标 注: item和index 名字是随意取的(参数1,参数2) 参数1: 每次遍历后得到的元素 参数2: 每个元素的下标 注:参数跟它叫什么名字无关,只跟参数的顺序有关 --> <ul> <!--有多少条数据,就渲染(render)多少个li--> <li v-for="item in arr">{{ item }}</li> <li v-for="(item,index) in arr">{{ index + '、' }}{{ item }}</li> </ul> </div> <script src="js/vue.js"></script> <script> var vm = new Vue({ el: "#box", data: { arr: ['吃饭','睡觉','LOL','打豆豆'] } }); </script>
v-for指令
3.5、v-bind指令
作用:绑定 HTML元素的属性
语法:v-bind:属性名='表达式';简写语法::属性名='表达式',如::class="{red,false}"
绑定一个属性:<img v-bind:src='myurk/'>
绑定多个属性:<img v-bind='{src:myurk,title:msg}'/>
绑定class属性:<button v-bind:class='{red: bol}'></button>,这个red表示某个样式,bol值是true或者false,如果是true的话则显示此样式,false则不显示样式。
<head> <meta charset="UTF-8"> <title>Title</title> <style> .red {background: red;} .en {height: 100px; width: 200px;} </style> </head> <body> <div id="box"> <button v-bind:class="{red: bol,en: bol}">按钮</button> <!-- v-bind属性绑定: v-bind:class={类名:表达式} --> </div> <script src="js/vue.js"></script> <script> var vm = new Vue({ el: '#box', data: { bol: true } }) </script> </body>
v-bind指令
四、指令练习
4.1、需求
点击li标签,让被点li的背景变为红色
4.2、代码实现
<head> <meta charset="UTF-8"> <title>Title</title> <style> .red {background: red;} </style> </head> <body> <div id="box"> <!-- v-for:类似于js中的for循环 语法:v-for:'item in arr' item: 每次遍历后得到的元素,arr:需要遍历的数组 v-for='(item,index) in arr' index:下标 注: item和index 名字是随意取的(参数1,参数2) 参数1: 每次遍历后得到的元素 参数2: 每个元素的下标 注:参数跟它叫什么名字无关,只跟参数的顺序有关 --> <ul> <!--有多少条数据,就渲染(render)多少个li--> <!--<li v-for="item in arr">{{ item }}</li>--> <li v-for="(item,index) in arr" @click="fn(index)" v-bind:class="{red: item.bol}">{{ index + '、' }}{{ item.des }}</li> </ul> </div> <script src="js/vue.js"></script> <script> var vm = new Vue({ el: "#box", data: { arr: [ {des:"吃饭",bol:false}, {des:"睡觉",bol:false}, {des:"LOL",bol:false}, {des:"打豆豆",bol:false} ] }, methods: { fn: function(index){ //通过当前index知道 当前被点击的数据是谁 // 把被点击的数据的 bol 值改为true // 把所有其他的未被选中的数据 bl 改为 false // 思路:先都改成false,然后再把选中的改成 true for(var i = 0;i<this.arr.length;i++){ this.arr[i].bol = false; }; this.arr[index].bol = true; } } }); </script> </body>
指令练习
五、总结
- v-show:控制切换一个元素的显示和隐藏
- v-on: 为HTML元素绑定事件监听
- v-model:将用户的输入同步到视图上
- v-for:遍历data 中的数据,并在页面进行数据展示
- v-bind:绑定HTML 元素的属性
记住了,如果在指令中 用到 表达式是的话,是不需要 加 {{ }} 的,但是不在指令中,在标签之外的,那就要 加 {{ }}了,如下:
<body> <div id="box"> <h1>{{ msg }} world</h1> // 在指令之外的,需要 {{msg}} <h1 v-text="msg">world</h1> //使用在指令中的,不需要,直接 v-text="msg" </div> <script type="text/javascript" src="js/vue.js"></script> <script> var vm = new Vue({ el: '#box', data: { msg: 'hello' } }) </script> </body>
第2章-Vue.js指令的更多相关文章
- 第3章-Vue.js 指令扩展 和 todoList练习
一.学习目标 了解Vue.js指令的实现原理 理解v-model指令的高级用法 能够使用Vue.js 指令完成 todoList 练习(重点+难点) 二.todoList练习效果展示 2.1.效果图展 ...
- Vue.js 第1章 Vue常用指令学习
今日目标 能够写出第一个vue应用程序 能够接受为什么需要学vue 能够使用指令 能够通过指定完成简单的业务(增加删除查询) 能够理解mvvm 为什么要学习vue 企业需要 可以提高开发效率 实现vu ...
- vue.js指令总结
1.v-html 用于输出真正html,而不是纯文本. 2.v-text 输出纯文本. <!DOCTYPE html> <html lang="en"> & ...
- 第10章-Vue.js 项目实战
一.本节内容 掌握项目环境中路由的配置方法 ***** 熟练掌握编写单文件组件的编写 *** 能够使用swiper.js进行轮播图组件的封装 能够使用axios进行数据请求 二.webpack项目的目 ...
- vue.js指令v-model实现方法
原文链接:http://www.jb51.net/article/99097.htm V-MODEL 是VUE 的一个指令,在input 控件上使用时,可以实现双向绑定. 通过看文档,发现他不过是一个 ...
- 第5章-Vue.js交互及生命周期练习
一.学习目标 使用网络请求进行前后端交互 (重点) 理解钩子函数的作用 (难点) 掌握Vue.js过滤器的使用方法 了解Vue.js事件的深入用法 (重点) 二.仿写留言板 2.1.实现" ...
- 第4章-Vue.js 交互及实例的生命周期
一.学习目标 了解实例生命周期的过程 理解钩子函数的作用 掌握Vue.js过滤器的使用方法 (重点) 能够使用网络请求进行前后端交互 (重点.难点) 二.交互的基本概念 2.1.前端和后端的概念 说明 ...
- Vue.js指令实例
v-if v-else v-show v-if 根据表达式的值的真假条件渲染元素. v-else 不需要表达式.前一兄弟元素必须有 v-if 或 v-else-if v-show 根据表达式之真假 ...
- 一份不错的vue.js基础笔记!!!!
第一章 Vue.js是什么? Vue(法语)同view(英语) Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项 ...
随机推荐
- linux 的 awk 使用
linux中awk命令对文本内容进行操作,其功能十分强大 1.如:查看一个有几百万行内容的文件中第3列数字内容(不重复) cat test.csv | awk -F ',' '{print $3}' ...
- 关于0x80000000为什么等于-2147483648和负数在内存上储存的问题
转载自大佬的博客https://blog.csdn.net/youyou362/article/details/72667951/ 1·先说明负数怎么储存 (1)十进制负数是以其补码储存在内存上. 验 ...
- java 中的 i=i++
记得大学刚开始学C语言时,老师就说:自增有两种形式,分别是i++和++i,i++表示的是先赋值后加1,++i是先加1后赋值,这样理解了很多年也没出现问题,直到遇到如下代码,我才怀疑我的理解是不是错了: ...
- 基础系列(4)—— C#装箱和拆箱
一 装箱和拆箱的概念 装箱是将值类型转换为引用类型 : 拆箱是将引用类型转换为值类型 : 值类型:包括原类型(Sbyte.Byte.Short.Ushort.Int.Uint.Long.Ulong.C ...
- 测试bug
模板在运行时出现了以下 1 个错误:---------------------------Controller.tt(-1,-1) : error : 获取 AppDomain 以便从主机运行转换时出 ...
- vs快捷键代码格式化或代码对齐名字
开发人员,换个电脑后环境要重装,vs的环境也需要重新设置. 快捷键需要重新设置,插件也需要重装,在这里备注下,换个环境就可以直接用了. 由于vs不同版本,代码对齐或者代码格式化的快捷键都不一样,所以导 ...
- C++ Primer Plus学习:第七章
C++入门第七章:函数-C++的编程模块 函数的基本知识 要使用C++函数,必须完成如下工作: 提供函数定义 提供函数原型 调用函数 库函数是已经定义和编译好的函数,可使用标准库头文件提供原型. 定义 ...
- 【第三周】每周psp
代码累计 300+575+475=1250 随笔字数 1700+3000+3785=8485 知识点 Cppunit框架 Ui设计 Scrum站立会议 燃尽图(好像没燃起来) 博客写作技能 本周主要是 ...
- [历史百科]抗战时期兵团简介 From 百度知道
中央军委1948年11月1日和1949年1月15日两次关于统一全军组织和部队番号的训令,我军先后进行了整编.西北野战军改称第一野战军,司令员兼政治委员彭德怀,第一副司令员张宗逊,第二副司令员赵寿山,参 ...
- NIO网络编程中重复触发读(写)事件
一.前言 公司最近要基于Netty构建一个TCP通讯框架, 因Netty是基于NIO的,为了更好的学习和使用Netty,特意去翻了之前记录的NIO的资料,以及重新实现了一遍NIO的网络通讯,不试不知道 ...