第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的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项 ...
随机推荐
- app结合unity3D程序中遇到的问题 MapFileParser unity3d导出到IOS程序下 集成unity3dAR功能
转载自: 来自AR学院(www.arvrschool.com),原文地址为:http://www.arvrschool.com/index.php?c=post&a=modify&ti ...
- POJ 3784 Running Median（动态维护中位数）
Description For this problem, you will write a program that reads in a sequence of 32-bit signed int ...
- python中 try、except、finally 的执行顺序
def test1(): try: print('to do stuff') raise Exception('hehe') print('to return in try') return ...
- 大学网站UI设计分析（以学校领导/历届领导为例）
第一次的冲刺阶段让我过了一把PM的瘾,第一阶段的冲刺完成以后第一感觉就是PM不好当,在大学里做个课程设计当个PM相对而言还是比较容易的,但是我明白,当我们走向工作岗位以后,面临的情况会比学校的情况的复 ...
- Codeforces Round #345 (Div. 1) C. Table Compression dp+并查集
题目链接: http://codeforces.com/problemset/problem/650/C C. Table Compression time limit per test4 secon ...
- selenium Object Page 设计模式理解及实现!
Page Object模式是Selenium中的一种测试设计模式,主要是将每一个页面设计为一个Class,其中包含页面中需要测试的元素(按钮,输入框,标题 等),这样在Selenium测试页面中可以通 ...
- 【Nginx】优化配置
nginx优化 突破十万并发 一.一般来说nginx 配置文件中对优化比较有作用的为以下几项: 1. worker_processes 8; nginx 进程数,建议按照cpu 数目来指定,一般为它 ...
- 淘宝免费ip地址查询导致服务堵死的坑
1.业务中因为想根据用户ip来做一些友好的提示,所以在网上找了个免费的ip查询地址 http://ip.taobao.com/service/getIpInfo.php?ip= 虽然说淘宝的这个地址会 ...
- vue-cli3使用cdn方式引入moment.js
1. index.html引入: <script src="https://cdn.bootcss.com/moment.js/2.20.1/moment.min.js"&g ...
- hdu-题目1159：Common Subsequence
http://acm.hdu.edu.cn/showproblem.php?pid=1159 Common Subsequence Time Limit: 2000/1000 MS (Java/Oth ...