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相同,但使用的时候需要注意以下几点:

  1. computed中定义的是方法属性,和data相似,所以如果在computed中定义了一个值,不需要再data中重复定义,否则会报错
  2. computed中定义的方法属性一定要有返回值,否则正文中此方法属性就会呈现为none的形式
  3. computed中定义的方法属性只有在被渲染的时候才会触发,如果只是在computed中定义了,正文中并没有进行渲染,那么就不会触发这个方法属性
  4. 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>

监听成员

监听,顾名思义,就是我们可以在监听成员里面加入已有的方法属性,从而实时监听其状态,显示出来或者对其做判断,做操作等等.监听成员在添加的时候需要注意以下几点:

  1. watch只能给已有的属性设置监听方法,即如果上面的data或者computed里面都没有定义这个属性方法,watch是没有办法监听的
  2. watch监听的意义在于,监听的属性值一旦发生变化就会触发监听成员里面定义的方法,执行其逻辑,触发方式类似于js的change
  3. 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的指令和成员的更多相关文章

  1. Vue --- 基础指令

    目录 表单指令 条件指令 循环指令 分隔符(了解) 过滤器 计算属性 监听属性 冒泡排序 表单指令 使用方法: v-model 数据双向绑定 v-model绑定的变量可以影响表单标签的值,反过来表单标 ...

  2. Vue.js 第1章 Vue常用指令学习

    今日目标 能够写出第一个vue应用程序 能够接受为什么需要学vue 能够使用指令 能够通过指定完成简单的业务(增加删除查询) 能够理解mvvm 为什么要学习vue 企业需要 可以提高开发效率 实现vu ...

  3. vue学习(二)Vue常用指令

    2 Vue常用指令 1. vue的使用要从创建Vue对象开始 var vm = new Vue(); 2. 创建vue对象的时候,需要传递参数,是json对象,json对象对象必须至少有两个属性成员 ...

  4. vue自定义指令

    Vue自定义指令: Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...

  5. vue 自定义指令的使用案例

    参考资料: 1. vue 自定义指令: 2. vue 自定义指令实现 v-loading: v-loading,是 element-ui 组件库中的一个用于数据加载过程中的过渡动画指令,项目中也很少需 ...

  6. vue的指令

    我之前学了学angular 发现angular和vue的指令有点类似 先说一下 new  Vue({          el: "#box", // element(元素) 当前作 ...

  7. vue自定义指令用法总结及案例

    1.vue中的指令有哪些?

  8. vue之指令

    一.什么是VUE? 它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 二.怎么使用VUE? 1.引入vue.js 2.展示HTML <div id=" ...

  9. vue自定义指令(Directive中的clickoutside.js)的理解

    阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...

随机推荐

  1. JavaWeb 二维码

    说明 相关包 zxing-core3.3 zxing-javase3.3 junit4.12 POM文件 <dependency> <groupId>com.google.zx ...

  2. 区别 |mysql |Timestamp、time、datetime

    Timestamp 时间格式为 类似 2012-11-11 12:23:00 ,默认值为当前时间 time 时间格式类似12:23:00 默认值为null datetime 时间格式类似2012-11 ...

  3. delphi 键盘常用参数(PC端和手机端 安卓/IOS)

    常数名称(红色手机端) 十六进制值 十进制值 对应按键(手机端) Delphi编程表示(字符串型)_tzlin注 0 0 大键盘Delete键 #0 VK_LBUTTON 1 1 鼠标的左键 #1 V ...

  4. NX二次开发-UFUN按类型遍历名字获取Tag函数UF_OBJ_cycle_by_name_and_type

    NX9+VS2012 #include <uf.h> #include <uf_draw.h> #include <uf_obj.h> #include <u ...

  5. NX二次开发-获得制图中对象的坐标点UF_DRF_ask_origin

    #include <uf.h> #include <uf_ui.h> #include <uf_drf.h> #include <uf_obj.h> # ...

  6. 20180713NOIP模拟赛

    20180713NOIP模拟赛 T1:动物园 zoo.cpp 2s [题目描述] 给定一张图,点有点权,求每个点到其他所有点中所有点的权值最小值之和. [思路] \(50pts\)做法:对于每个点跑一 ...

  7. Android获取Root权限之后的静默安装实现代码示例分析

    转:http://blog.csdn.net/jiankeufo/article/details/43795015 Adroid开发中,我们有时会遇到一些特殊功能的实现,有些功能并没有太高技术难度,但 ...

  8. 报错:[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the paren

    今天在做Vue的时候,子组件关闭的时候,报如下错误 报错:vue.esm.js?65d7:610 [Vue warn]: Avoid mutating a prop directly since th ...

  9. pycharm 参数、快捷键、调试模式

    PyCharm参数.快捷键.调试模式 PyCharm设置参数 在运行Python脚本时,会经常遇到需要传入额外的参数来运行脚本. 例如下脚本1: #!/usr/bin/env python2 # *. ...

  10. AsyncAwait

    using System; using System.Diagnostics; using System.Threading; using System.Threading.Tasks; namesp ...