Vue的借鉴
- 借助了angular模板和数据绑定
- 借助了react的组件化和虚拟DOM的技术
Vue的插件
- vue-cli
- vue-resource
- vue-router
- vue-lazyload
- vue-scroller
- mint-ui
- element-ui
MVVC的理解
模板语法:
- 插值表达式的里面是变量,可以用原生js写
<p>{{username.toUpperCase()}}</p>
<img src="url">
是html的语法,应该这样写<img v-bind:src="url">
可以省略为简洁写法<img :src="url">
(强制绑定属性)- 绑定事件监听,
<button v-on:click="test(可选)"> <button>
简洁写法,<button @click="test(可选)"> <button>
计算属性和监视
- computed:计算属性中的一个方法,方法的返回值作为属性值
- 初始化显示执行
- 相关的data属性发生了变化
计算属性高级----**计算属性存在缓存,多次读取只执行一次getter计算
- get()方法(当需要读取当前值回调,根据相关的数据计算并返回当前属性的值)
- set()方法(监视当前属性值的变化,当属性值改变是发生回调,更新相关的属性数据)
computed: {
all: {
get() {
return this.first + " " + this.last
},
set(value) {
this.first = value.split(" ")[0]
this.last = value.split(" ")[1]
}
}
},
- watch—(更大用处:深度监视)–用回调处理(1. 什么时候调用?2. 用来做什么?)
- 监视属性,指明回调函数
function(newVal,oldVal){}
函数调用说明属性值发生了变化
class和style的绑定
class基本语法:class="xxx"
- xxx是字符字符串
<p :class="a">小凡</p>
a写到data中去 - xxx是对象—用的比较多的
<p :class={aClass:isTrue}>小凡</p>
Boolean类型,写到data中去 - xxx是数组
<p :class=['aClass','bClass']>小凡</p>
直接指定类名就行
style语法:style={color:data里面的数据}
<p :style={color:iscolor}>小凡</p>
iscolor写在data中去
条件渲染
- v-if:把标签移除(再显示需要在内存中创建)
- v-show:元素样式隐藏(内存中对象还在)—频繁切换用它
<p v-if="ok">成功了</p>
<p v-else>失败了</p>
<button @click="ok=!ok">切换</button>
<p v-show="ok">表白成功了</p>
<p v-show="!ok">表白失败了</p>
列表渲染
v-for
- 遍历数组:
v-for="(item index) in list" :key="index"
- 遍历对象 :
v-for="(value,key) in obj " :key="key"
注意的地方:
- 如果没有改变
list
本身,只是改变了数组对象内部的数据,vue
并不知道这种改变,只是监视了list
的改变,没有监视内部对象 - 内部对
push()
,pop()
,shift()
,unshift()
,splice()
,sort()
,reverse()
的重写(1.先调用原生的方法,2.更新界面)数组内部变化,自动更新界面
data: {//代表model层
//1 并没有改变list本身,vue并不知道这种改变,只是监视了list的改变,没有监视内部对象
//2 内部对push(),pop(),shift(),unshift(),splice(),sort(),reverse()的重写(1.先调用原生的方法,2.更新界面)
//数组内部变化,自动更新界面
list: [
{title: "奥迪", price: 18999},
{title: "宝马", price: 5999},
{title: "奔驰", price: 3323},
{title: "凯迪拉克", price: 14546},
]
},
methods: {
//删除某一个
handle(index) {//这里splice可以更新界面
this.list.splice(index, 1)
},
//更新某一个
update(index) {
// this.list[index].age = 78// }//没调方法,没有调用变异方法,vue不知道,不会更新界面
this.list.splice(index, 1, {title: "别克", price: 9999})
}
}
搜索和排序
<input type="text" v-model="searchTitle">
<ul>
<li v-for="(item,index) in filterList" :key="index">
品牌:{{item.title}}----价格:{{item.price}}----点击数:{{item.click}}
</li>
</ul>
<button @click="orderModel=0">原始排序</button>
<button @click="orderModel=1">价格升序</button>
<button @click="orderModel=2">价格降序</button>
<button @click="orderModel=3">点击升序</button>
data: {
list: [
{title: "奥迪1", price: 18999, click: 23},
{title: "宝马1", price: 5999, click: 54},
{title: "奔驰", price: 3323, click: 32},
{title: "凯迪拉克1", price: 14546, click: 13},
],
searchTitle: '',
orderModel: 0//0为原始排序,1为价格升,2为价格降,3为点击数升
},
computed: {
filterList() {
//得到相关的数据
const {searchTitle, list, orderModel} = this
//对list进行过滤
const newArr = list.filter(item => item.title.includes(searchTitle))
if (orderModel === 0) {//为0的时候就不排了
return newArr
}
return newArr.sort((a, b) => {
if (orderModel === 1) {
return a.price - b.price
} else if (orderModel === 2) {
return b.price - a.price
} else if (orderModel === 3) {
return a.click - b.click
}
})
}
},
事件处理
- 绑定事件监听
@click=回调函数(要传的参数,$event)
同时传入参数以及获取事件对象身上的值,可以这样写
<button @click="handle(112,$event)">按钮</button>
-------$event
可以用
handle(a, event) { console.log(a, event.target.innerText) }
- 事件修饰符–停止事件冒泡,在内部元素事件后面加上
.shop
—阻止默认行为的用.prevent
- 按键修饰符
@keyup.enter=""
表示enter键抬起时候触发回调函数
表单输入的判断—自动收集表单信息
用v-model
去拿到value
的值
阻止表单的默认提交行为:@submit.prevent=""
阻止默认行为
- text/textarea
- checkbox
- radio
- select
记住一句话:v-model永远得到的是value的值,修改的也是value的值
<select v-model="cityId">
<option>未选择</option>
<option :value="item.id" v-for="(item) in city">{{item.name}}</option>
</select><br>