版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wuskzuo/article/details/81939130
Vue.js基础
1.第一个Vue.js程序
实例与数据绑定
- 创建实例
var app = new Vue({
el:''
data:''
})
el
指定已存在的dom挂载Vue实例v-model
用于数据的绑定,对应data
中的字段 *
生命周期
- created:实例创建完成后调用,尚未挂载(初始化数据)
- mounted:el挂载到实例上之后调用(第一个业务逻辑开始)
- beforeDestroy:实例销毁前调用(解绑监听事件)
插值与表达式
- 插值
{{}}
- 使用
v-html
将插值输出成html - 使用
v-pre
可跳过这个元素及其子元素的编译
- 使用
- 表达式
在{{}}
中可以使用JavaScript表达式进行简单的二、三元计算,如需要发咋计算需要使用计算属性
- 过滤器
支持在{{}}
的尾部加入|
对数据进行过滤,常用于格式化文本,复杂处理需使用计算属性
。
{{date | formatDate}}
new Vue({
...
filters:{
formatDate:function({
...
return XXXX;
})
})
2.指令和事件
- 指令是Vue.js模板中最常用的一项功能,它带有前缀
v-
,其主要职责就是当其表达式的值改变时,相应的对DOM进行操作。
v-bind
:基本用途是动态的更新HTML元素上的属性v-on
:使用它来绑定事件监听器
- 语法糖
<a v-bind:href="url"/> --> <a :href="url"/>
<button v-on:click="click"/> --> <button @click="click"/>
3.计算属性
计算属性需要以函数的形式添加在Vue实例的computed选项中,最终返回计算后的结果。
计算属性用法
<div id="app">
{{prices}}
</div>
<script>
var app = new Vue({
el:'#app',
data:{
package1:[
{
name:'iphone7',
price:7199,
count:2
},
{
name:'ipad',
price:2888,
count:1
}
],
package2:[
{
name:'apple',
price:3,
count:5
},
{
name:'banana',
price:2,
count:10
}
]
},
computed:{
prices:function(){
var prices = 0;
for (var i = 0; i<this.package1.length; i++) {
prices += this.package1[i].price*this.package1[i].count;
}
for (var i = 0; i<this.package2.length; i++) {
prices += this.package2[i].price*this.package2[i].count;
}
return prices;
}
}
})
</script>
- 计算属性可以依赖其他计算属性
- 计算属性可以依赖其他实例的数据
- 计算属性基于它的依赖缓存,依赖的数据变化时他才会重新取值。
4.v-bind及class与style绑定
绑定class的几种方式
- 对象语法:为
v-bind:class
设置一个对象,可以动态的切换class - 数组语法:为
v-bind:class
绑定一个数组,应用一个class列表 - 在组件上使用:直接在组件中使用
class
或者:class
,会直接应用到这个组件上。
::当设置的表达式过长或较为复杂则应该优先使用计算属性::
绑定内联样式
使用v-bind:style
可以给元素绑定内联样式,使用和绑定class类似。
5.内置指令
- 基本指令
v-cloak
:不需要表达式,经常和display:none
配合使用,在加载内容缓慢时使用v-once
:不需要表达式,定义的元素只能渲染一次
<div v-once></div>
- 条件渲染指令
v-if
v-if
:当表达式为真时,当前元素/组件及其子节点渲染,为假时被移除v-else-if
:跟在v-if
之后v-else
:跟在v-if
或v-else-if
之后v-show
:是改变元素CSS属性display:none
v-if
用于不经常改变的场景,v-show
用于频繁切换的场景
出于效率考虑,vue会尽量使用已有元素而非重新渲染,可以使用
key
属性决定是否要复用。
- 列表渲染指令
v-for
- 遍历数组
<ul>
<template v-for="item in items">
<li >{{item.name}}</li>
<li >{{item.price}}</li>
</template>
</ul>
* 遍历对象属性
<ul>
<template v-for="(value,key,index) in user">
<li >{{index}} - {{key}} - {{value}}</li>
</template>
</ul>
- 方法与事件
v-on:click
可以直接使用JavaScript语句,也可以使用选项中methods方法
修饰符
* .stop -> 阻止单击事件冒泡
* .prevent -> 提交事件不再重载页面
* .capture -> 添加时间侦听器时使用事件捕获模式
* .self -> 当事件在该元素触发时触发回调
* .once -> 只触发一次
还可以使用按键修饰符,按下某个键才会调用。
* <input @click.ctrl="doSomething"/>
6.表单与v-model
基本用法
<div id="app>
<input type="text" v-model="message">
<p>{{message}}</p>
</div>
* 使用`v-model`实现了表单元素的双向绑定。
* 对于`textarea`文本域的使用和`text`相同
* 单选按钮`radio`可以直接使用`v-bind`绑定一个布尔类型的值,选中时为true。如果使用组合来实现互斥时间,就需要`v-model`配合value使用,当选中时将value的值赋到绑定的数据中。
* 复选框、选择列表使用方法也基本相同。需要把想选择的数据绑定到value上
绑定值
在业务中v-model
绑定的值大多是动态的,这时需要使用v-bind
来实现。
<input type="checkbox" v-model="checkList" :value="item">
选中时,将item的值加入checkList中。
修饰符
与事件的修饰符类似,用于控制数据同步的时机。
* .lazy
:使用该修饰符后,在输入过程中并不会数据同步,而是在change事件中同步。
* .number
:会将输入转换为Number类型,否则虽然你输入的是数字,但是还是会被识别为String。
* .trim
:可以自动过滤掉收尾的空格。