Vue相关操作
-
计算属性
computed
—
setter
和getter
:在计算属性中一般会封装get()
和set()
方法,但是一般是set()
方法是不常用的,因此计算属性只有get()
方法,表现为只读属性;—因为
computed
中都含有get()
方法,所以一般简写为如下方式:—一定要注意,计算属性中传递的参数是一个对象,因此在访问计算属性时,可以直接使用
{{}}
进行读取内容;<div id = "app"> <h2>{{fullName}}</h2> </div> <script src="vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ firstName:'Kobe', lastName:'Tommy' }, computed:{ //最终书写方法 fullName:fucntion(){ return this.firstName + ' ' + this.lastName } //在计算属性中一般会传递一个属性,封装着set()方法和get()方法 fullName:{ get:function(){ return this.firstName + ' ' + this.lastName } //计算属性一般是没有set()方法的,只读属性,设置set()后可以进行内容修改 set:function(newValue){ const name = newValue.split(' '); this.firstName = name[0]; this.lastName = name[1]; } } } }) </script>
—计算属性和
methods
对比一般进行语法的相关操作,多使用计算属性,因为计算属性内存缓存较小,多次调用计算属性,如果属性不会发生变化,实质只会调用一次;而
methods
会调用多次!! -
ES6相关语法
let
/var
—
var
可以看作是JavaScript语言设计上的错误,这种错误多半不能修复和移除,并且需要考虑浏览器的兼容性;—因此为了修复这个问题,新增了关键字
let
,可以将let
看作更完美的var
;—ES5中的
var
是没有作用域的,而ES6中的let
是有块及作用域的;—ES5之前因为
if
和for
语句都没有作用域,因此在很多时候必须借助于function
的作用域(闭包)解决应用外面变量的问题;—在ES6中,加入了
let
,let
有if
和for
的块级作用域;—使用
let
后,可以很好的解决作用域问题:<script> //ES5中可以使用闭包 var btns = document.getElementsByTagName('button'); for(var i=0;i<btns.length;i++){ (function(i){ btns[i].addEventListener('click',function(){ console.log('第'+i+'个按钮被点击'); }) })(i) } //例如循环绑定监听事件 const btns = document.getElementsByTagName('button') for(let i=0;i<btns.length;i++){ btns[i].addEventListener('click',function(){ console.log('第'+i+'个按钮被点击'); }) } </script>
const
—主要作用是将某个变量修饰为常量,使用
const
修饰的标识符为常量,不可以再次赋值;—在ES6开发中,优先使用
const
,只需要改变某一个标识符的时候才使用let
;—
const
修饰的标识符必须要进行赋值;—
const
定义的常量,指向对象时,对象不能修改,但是对象内部的属性可以修改;对象字面量增强写法
—属性的增强写法
<script> //ES5的写法 const name = 'Tom'; const age = 18; const obj = { name:name, age:age } //ES6的写法 const obj = { name, age } </script>
—函数的增强写法
<script> //ES5的写法 const obj = { run:fucntion(){ }, eat:function(){ } } //ES6写法 const obj = { run(){ }, eat(){ } } </script>
-
事件监听
v-on
绑定事件监听器—简介语法:
@事件
,例如<button @click=""></button>
;—参数传递:
- 情况一:绑定方法中不需要额外传递参数,则方法后面的()可以省略;
- 情况二:如果函数需要参数,但是没有传入参数,那么函数的形参返回
undefined
;但是注意如果方法本身中有一个参数,那么默认将原生事件event
参数传递进去; - 情况三:在方法定义时,我们需要
event
对象,同时又需要其他参数,则在调用方法式,如何手动获取浏览器参数的event
对象:$event
;
v-on
修饰符—
.stop
:阻止事件冒泡,调用event.stopPropagation()
;—
.prevent
:阻止默认事件,调用event.preventDefault()
;—
.enter
:监听键盘的Enter回车键位;—
.native
:监听组件根元素的原生事件;—
.once
:只触发一次回调; -
条件判断
—
v-if
、v-else-if
和v-else
:这三个指令和JavaScript的条件语句if
、else
和else if
相似;—Vue的条件指令可以根据表达式的值在DOM中渲染或者销毁元素或组件;
—
v-if
:可以传入布尔值,进行元素的显示与隐藏;例如:<h2 v-if="true">{{message}}</h2>
;—
v-if
和v-else
结合使用:<h2 v-if=isshow>{{message}}</h2> <h2 v-else>如果isshow为false就显示</h2>
;v-else
不需要传递条件字符;—一般复杂的条件判断,可以写入
computed
属性中,进行条件判断;但是简单的条件逻辑可以使用v-if
指令;登录切换案例
<div id="app"> <span v-if="isUser"> <label for="username">用户账号</label> <input type="text" id="username" placeholder="用户账号" key="username"> </span> <span v-else> <label for="email">用户邮箱</label> <input type="text" id="email" placeholder="用户邮箱" key="email"> </span> <button @click="isUser = !isUser">切换类型</button> </div> <script src=vue.js></script> <script> const app = new Vue({ el:"#app", data:{ isUser:true } }) </script>
—Vue在进行DOM渲染之前,会在内存中创建一个虚拟DOM,出于性能的考虑,会尽可能的复用已经存在的元素,而不是重新创建新的元素;
—上面案例中,在进行切换时,Vue内部会发现原来的
input
元素不在使用,直接复用该元素内容,作为else
中的input
内容来使用;—可以通过加一个标识
key
,实现是否可以复用;当key
中的属性值不同就不可以复用;v-show
—该语法和
v-if
十分相似,也用于决定一个元素是否渲染;—
v-if
和v-show
的区别:v-if
:当条件为false
时,包含v-if
指令的元素根本不会存在DOM中;v-show
:当条件为false
时,只是给元素增加了一个行内样式:display:none;
—在开发中,当需要在显示与隐藏之间切换很频繁时,使用
v-show
,当只有一次切换时,就使用v-if
; -
循环遍历
v-for
—在遍历的过程中h获取索引值:
<li v-for="(item,index) in list">{{index+1}}.{{item}}</li>
;—循环遍历对象:
(1)如果只是获取一个值,获取到的是属性值;
(2)如果获取属性关键字和属性值:
<li v-for="(value,key) in obj">{{value}}-{{key}}</li>
;(3)如果获取属性关键字、属性值和下标索引值:
<li v-for="(value,key,index)" in obj></li>
;绑定和非绑定
key
的区别—官方推荐我们在使用
v-for
时,给对应的元素或组件添加一个key
属性;—
key
的作用主要是为了高效的更新虚拟DOM;—当我们希望在列表中插入一个元素时,Diff算法默认执行操作是:把当前插入位置的元素改为要插入的元素,依次更改元素,直至更改到最后一个元素;例如:ABCDE中,B后面插入F,他会将C改为F,D更新为C,E更新为D,最后插入E;这样十分没有效率;
—因此我们需要使用
key
来给每个节点做一个唯一标识,Diff算法就能正确识别该节点,在正确的位置下插入新的节点;—一般
key
会绑定在元素本身,保证key
与元素一一对应,而不是索引下标,因为随着元素插入,索引下标对应的元素不唯一:<li v-for="item in list" :key="item">{{item}}</li>
;for
循环的三种方式:for(let i=0;i<arry.length;i++)
for(let i in this.books)
for(let i of this.books)
-
数组的响应式方法
—扩展:可变参数,当定义一个方法时,传入形参的数量不等,可以传入可变参数,例如
sum(...num)
,因此这样的函数可以传入随机个数的参数;—数组响应式方法:当数组通过该类方法发生变化时,实时响应在web页面上;
—
push()
:在数组后面添加一个元素;—
pop()
:删除数组中最后一个元素;—
shift()
:删除数组中第一个元素;—
unshift()
:在数组最前面添加一个元素;—
splice()
:可以实现删除、插入和替换元素;—
sort()
:数组排序;—
reverse()
:数组逆序显示;—注意通过索引值修改数组中的元素是非响应式的,不会再web页面中显示:
list[0]='bb';
—可以通过Vue的方法进行响应式修改:
Vue.set()
;需要传入三个参数:第一个参数为要修改的对象,第二个参数为要修改对象中的元素索引值,第三个参数为修改值; -
v-model
表单绑定—表单控件在实际开发中非常常见,特别对于用户信息得提交;
—Vue中使用
v-model
实现表单元素和数据的双向绑定;—双向绑定:相当于两个指令,一个是将
data
中的数据信息绑定在表单的value
属性中,即::value="message"
;另一个是表单中的数据信息实时绑定在data
中,有一个事件v-on:input
可以监听表单输入,可以为其绑定一个方法,将监听到的表单内容返回给
data
:v-on:input="valueChange"
methods:{valueChange(event){this.message = event.target.value}}
;简单写法:
<input type='text' :value="message" @input="message = $event.target.value">
—
v-model
其实是一个语法糖,背后实质是两个操作:v-bind
绑定一个value
属性,v-on
给当前元素绑定input
事件;—而使用
v-model
可以直接实现表单项和数据之间的双向绑定:<input type="text" v-model="message">
;值绑定
—一般表单项在实际开发中,
value
值是动态从网络获取或者从data
在获取,因此需要通过v-bind
动态给value
绑定值;例如:
<script> <label v-for="item in originHobbies" :for="item"> <input type = "checkbox" :value="item" :id="item" v-model="hobbies">{{item}} </label> </script>
修饰符
—
.lazy
:默认情况下,v-model
时在input
事件同步输入框的数据;lazy
修饰符可以使得在用户在表单项中输入回车时,才会将表单内容全部加载出来;即可以让数据在失去焦点或者回车时才更新;—
.number
:默认情况下,在表单输入框中,无论是输入字母还是数字,都会被当作字符串类型处理;可以通过该修饰符直接将内容当作数字处理;即可以让输入框中输入的内容自动转换为数字类型;—
.trim
:去除用户输入表单项中的多余空格内容;即可以过滤内容左右两边的空格;