Vue的指令和成员
Vue的指令和成员
指令
表单
表单指令一般是和属性指令联合使用的,最常见的就是v-model="变量",这种情况下绑定的变量所控制的就是表单元素的实际value值,我们可以用这种方法来实现实时同步一些input框的内容,以及单一复选框和多个复选框的设置,如下例
<body>
<div id="app">
<form action=""><!--这里我们定义的两个input框,一个textarea大文本框,其v-model都是绑定的同一个v1,这种情况下,我们只需要改变v1的值,三个框的值都会实时改变,而v-mode的值就是表单的value值,所以我们在input框里面输入的值就可以实时呈现出来-->
<input type="text" v-model="v1">
<input type="text" v-model="v1">
<textarea name="" id="" cols="300" rows="100" v-model="v1"></textarea>
<hr>
<!--单一复选框-->
<!---->
<input type="checkbox" name="agree" v-model="v2">
<!--这里的v2,只要给的值布尔值为真就为真,向后端发送的数据就是agree:true-->
<hr>
<!--多个复选框,多个复选框的v-model值要相同,-->
男:<input type="checkbox" name="hobbies" value="male" v-model="v3">
女:<input type="checkbox" name="hobbies" value="female" v-model="v3">
???:<input type="checkbox" name="hobbies" value="lala" v-model="v3">
<p>{{ v3 }}</p>
<hr>
<!--单选框,type类型为radio-->
中午吃啥：<br>
肉肉:<input name="food" type="radio" value="rourou" v-model="v4">
菜菜:<input name="food" type="radio" value="caicai" v-model="v4">
<p>{{ v4 }}</p>
<hr>
<button type="submit">提交</button>
</form>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
v1:'', //v1的初值可以为空
v2:true,//这里应该给的是布尔值,true或者false
v3:['male','female'],//这里是一个比较有意思的用法,我们绑定v3的框有三个,value分别是'male','female'和'lala',这个数组里我们可以指定默认的value,即生成网页的时候数组里写的value对应的多选框会默认选中
v4:'caicai',//这里的用法和上面的相似,也是生成时候的默认值,默认选中value值为'caicai'的单选框
}
})
</script>
斗篷
斗篷指令比较适用于一些比较大的项目中,因为通常情况下我们导入Vue的语句会放在body的下面,这样其实在网页渲染的时候,在上面还没有读取到Vue的时候里面的{{}}不会被解析,而是直接以{{}}的形式显示出来,当然这个时间非常的短暂,不过如果网页较大,或者网速较慢的情况下,会比较明显的看到这个问题,所以斗篷指令就是为了解决这个问题,方法也非常的简单,我们在需要提前解析的地方加入v-cloak,然后在style里面赋予display:none就可以了.
<head>
<style>
[v-cloak]{
display:none;
}
</style>
</head>
<body>
<div v-cloak>
{{}}
{{}}
</div>
</body>
这样我们在打开网页的时候就不会出现双大括号没被渲染的那一个瞬间了.
条件
Vue中的条件指令不多,常用的其实就两个类,即v-if和v-show,其后面所应该添加的都应给是布尔值,两者展示出的效果几乎完全相同,但是内层含义有些许区别.
- v-if="true|false",当其值为假时,页面上不渲染该标签,我们可以用此方法来隐藏标签中的信息
- v-show="true|false",如果这个后面的值为false,我们在页面上也看不到该标签,但这并不代表该标签没有渲染,而是给这个属性所在的标签赋予了
display:none的属性,所以虽然没有展示出来,但实际上是经过了渲染的.且存在于整个页面的结构中,只是因为这个属性所以隐藏了.
实例如下:
<body>
<div id="app">
<!--这里两者的显示效果是一样的,但是真正存在形式不太一样-->
<p v-if="false">if指令</p>
<p v-show="false">show指令</p>
<!-- v-if其实就类似于我们之前所接触到的if,同样有elif,有else
v-if
v-else-if
v-else
使用的时候需要注意两点:
1、上分支成立，下分支会被屏蔽
2、else分支只要在所有上分支都为假时就会显示，不需要条件
-->
<p v-if="v1 === '1'">if分支</p>
<p v-else-if="v1 === '2'">elif分支1</p>
<p v-else-if="v1 === '3'">elif分支2</p>
<p v-else>else分支</p>
<hr>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
v1: '1'
}
})
</script>
循环
Vue中的循环也是我们非常熟悉的东西,就是for,只不过这里的是v-for,其基本的语法结构为
v-for="成员 in 容器"
这个容器可以是很多的东西,比如字符串,比如数组,字典,甚至可以是对象,下面我们一一举例:
<body>
<div id="app">
<!--1、字符串-->
<p>
<span v-for="v in title">{{ v }}</span>
</p><!--只有一个v的话就是从字符串里每次取一个值,然后渲染-->
<p>
<span v-for="(v, i) in title">
<span v-if="i != 0"> | </span>
{{ v }}
</span>
</p><!--有两个参数,第一个v依然是从字符串里取出来的值,第二个参数是索引值,不仅字符串可以这样使用,数字,字典,对象都可以在最后加一个参数来取到其索引值-->
<!--2、数组-->
<div>
<p v-for="(v, i) in arr">第{{ i }}元素：{{ v }}</p>
</div>
<!--3、对象: 可以只遍历值，也可以遍历值与键，还可以遍历值、键与索引-->
<div><!--只遍历value-->
<p v-for="v in people">{{ v }}</p>
</div>
<div><!--同时遍历value和key-->
<p v-for="(v, k) in people">{{ k }}:{{ v }}</p>
</div>
<div><!--遍历value和key的同时加上索引值-->
<p v-for="(v, k, i) in people">{{ i }}-{{ k }}:{{ v }}</p>
</div>
<br>
<div><!--for循环的嵌套,即先把对象们从数组中取出来,然后对每个对象的value和key值进行遍历-->
<div v-for="(stu, i) in stus">
<hr v-if="i != 0">
<p v-for="(v, k) in stu">{{ k }}:{{ v }}</p>
</div>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
title: '循环指令',
arr: [1, 4, 2, 5, 3],
people: {
name: '兔子',
color: '粉白',
price: 6.66,
},
stus: [
{
name: "Bob",
age: 18
},
{
name: "Tom",
age: 17
},
{
name: "Jerry",
age: 19
}
]
}
})
</script>
成员
成员其实就是我们在定义new Vue({})时候里面的一些值,比如el实例成员,data数据成员,methods方法成员,computed计算成员,watch监听成员以及delimiters分隔符成员,下面我们着重介绍计算成员和监听成员
计算成员
计算成员的关键字为computed,添加方法和data相同,但使用的时候需要注意以下几点:
- computed中定义的是方法属性,和data相似,所以如果在computed中定义了一个值,不需要再data中重复定义,否则会报错
- computed中定义的方法属性一定要有返回值,否则正文中此方法属性就会呈现为none的形式
- computed中定义的方法属性只有在被渲染的时候才会触发,如果只是在computed中定义了,正文中并没有进行渲染,那么就不会触发这个方法属性
- computed中定义的方法属性中,如果出现了别的变量值,那么其内的所有变量值任意发生变化都会重新调用一次绑定的方法,重新更新一下方法属性的值
实例如下,这个实例实现的是两个input框,第三个button按钮里面会实时显示前两个框的和,如果前两个框有一个为空,button按钮显示为"结果"字符,而不是其和:
<body>
<div id="app">
<input type="text" v-model="v1">
+
<input type="text" v-model="v2">
=
<button>{{ res }}</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
v1: '',
v2: '',
// res: '结果',这里没必要重复定义,因为我们已经在computed里面定义过res这个方法属性
},
computed: {
res () {
console.log('该方法被调用了');
return this.v1 && this.v2 ? +this.v1 + +this.v2 : '结果';//这个三元表达式的意思是,如果v1和v2框内都有值的情况下,res就会被返回这两者的数值和,一旦有一个框没有值,res被返回的就是"结果"这个字符串.+this.v1和+this.v2指的是取v1和v2的数值类型,而不是字符串
}
}
})
</script>
监听成员
监听,顾名思义,就是我们可以在监听成员里面加入已有的方法属性,从而实时监听其状态,显示出来或者对其做判断,做操作等等.监听成员在添加的时候需要注意以下几点:
- watch只能给已有的属性设置监听方法,即如果上面的data或者computed里面都没有定义这个属性方法,watch是没有办法监听的
- watch监听的意义在于,监听的属性值一旦发生变化就会触发监听成员里面定义的方法,执行其逻辑,触发方式类似于js的change
- watch监听成员里面定义的方法不需要返回值,这一点和computed要区别开,computed的方法属性是一定要有返回值.
接下来我们实现实时拆分一个两字姓名的人的姓和名,分别显示在两个span框里面,实例如下:
<body>
<div id="app">
<p>
姓名：<input type="text" v-model="full_name">
</p>
<p>
姓：<span>{{ first_name }}</span>
</p>
<p>
名：<span>{{ last_name }}</span>
</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
full_name: '',
first_name: '',
last_name: '',
},
watch: {//full_name是上文中已经定义过的属性,所以可以添加监听方法
full_name() {//我们监听的方法是,当输入的姓名长度为2时,执行监听方法,以空格切割开姓名之后,取其第一个值为姓,第二个值为名,分别赋予first_name和last_name,这样是实现了实时拆分姓和名
if (this.full_name.length === 2) {
k_v_arr = this.full_name.split('');
this.first_name = k_v_arr[0];
this.last_name = k_v_arr[1];
}
}
}
})
</script>
Vue的指令和成员的更多相关文章
- Vue --- 基础指令
目录 表单指令 条件指令 循环指令 分隔符(了解) 过滤器 计算属性 监听属性 冒泡排序 表单指令 使用方法: v-model 数据双向绑定 v-model绑定的变量可以影响表单标签的值,反过来表单标 ...
- Vue.js 第1章 Vue常用指令学习
今日目标 能够写出第一个vue应用程序 能够接受为什么需要学vue 能够使用指令 能够通过指定完成简单的业务(增加删除查询) 能够理解mvvm 为什么要学习vue 企业需要 可以提高开发效率 实现vu ...
- vue学习（二）Vue常用指令
2 Vue常用指令 1. vue的使用要从创建Vue对象开始 var vm = new Vue(); 2. 创建vue对象的时候,需要传递参数,是json对象,json对象对象必须至少有两个属性成员 ...
- vue自定义指令
Vue自定义指令: Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...
- vue 自定义指令的使用案例
参考资料: 1. vue 自定义指令: 2. vue 自定义指令实现 v-loading: v-loading,是 element-ui 组件库中的一个用于数据加载过程中的过渡动画指令,项目中也很少需 ...
- vue的指令
我之前学了学angular 发现angular和vue的指令有点类似 先说一下 new Vue({ el: "#box", // element(元素) 当前作 ...
- vue自定义指令用法总结及案例
1.vue中的指令有哪些?
- vue之指令
一.什么是VUE? 它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 二.怎么使用VUE? 1.引入vue.js 2.展示HTML <div id=" ...
- vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...
随机推荐
- 使用node搭建简单的服务
//创建依赖模块var http = require('http');var url = require('url');var fs = require('fs');var server = http ...
- 扩展欧几里得原理的应用：POJ1061青蛙的约会
/* POJ 1061: 青蛙的约会 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 123709 Accepted: 26395 ...
- TTreeView、TTreeNodes和TTreeNode
TreeView是Delphi中使用频率比较高的一个控件,虽然使用次数很多,但总结不够.借着这次做GDW原型的机会总结一下,写的过程中也会参考网上的博文. TTreeView.TTreeNodes和T ...
- Go 算术运算符
Go 算术运算符 package main import "fmt" func main() { var a int = 21 var b int = 10 var c int c ...
- delphi 注册表
Delphi中定义了一个Tregistry类,通过使用这个类中封装的很多有关对注册表操作的方法和属性可以完成对注册表的操作.1. 在注册表中创建一个新的关键字Tregistry类中有一个CreateK ...
- NX二次开发-UFUN更改视图比例大小UF_DRAW_set_view_scale
#include <uf.h> #include <uf_draw.h> #include <uf_drf.h> #include <uf_obj.h> ...
- I/O与NIO（异步I/O)
1.原来的I/O库与NIO最重要的区别是数据打包和传输方式的不同,原来的I/O以流的方式处理数据,而NIO以块的方式处理数据. 面向流的I/O系统一次一个字节地处理数据.一个输入流产生一个字节的数据, ...
- hdu多校第五场1005 （hdu6628） permutation 1 排列/康托展开/暴力
题意: 定义一个排列的差分为后一项减前一项之差构成的数列,求对于n个数的排列,差分的字典序第k小的那个,n<=20,k<=1e4. 题解: 暴力打表找一遍规律,会发现,对于n个数的排列,如 ...
- faster-rcnn算法总结
faster-rcnn的整体流程比较复杂,尤其是数据的预处理部分,流程比较繁琐.我写faster-rcnn系列文章的目的是对该算法的原始版本有个整体的把握,如果需要使用该算法做一些具体的任务,推荐使用 ...
- Day 12 :迭代器与生成器
可迭代:在Python中如果一个对象有__iter__( )方法,则称这个对象是可迭代的(Iterable): 其中__iter__( )方法的作用是让对象可以用for ... in循环遍历,列表Li ...