vue是一个mvvm框架
m: model 数据
v: view 视图
vm: ViewModel 视图模型 vue已经处理
双向数据绑定: v变了m会自动变 m变了,v会自动变
数据驱动思想:vue不推荐操作DOM,直接操作数据
1、 v-bind 动态属性
用于属性绑定
<!-- v-bind:原生属性名="vue变量" -->
<!-- 可简写为 :原生属性名="vue变量" -->
<!-- :class="{类名: 布尔值} -->
<!-- :style="{css属性名: 值} -->
2、v-on绑定事件
事件绑定
<!-- v-on: 事件名="method中的函数名/少量代码" -->
<!-- @事件名="method中的函数名" -->
事件对象
<template>
<div>
<a @click="one" href="http://www.baidu.com">百度</a>
<hr />
<!-- 传值需要主动输入参数$event -->
<a @click="two(10,$event)" href="http://www.taobao.com">淘宝</a>
</div>
</template>
<script>
export default {
methods: {
one(e) {
e.preventDefault()
},
two(num, e) {
e.preventDefault()
}
}
}
</script>
<style>
</style>
按键修饰符
<!-- .stop阻止冒泡行为,.prevent阻止默认行为,.once 只生效一次 -->
@事件名.stop="函数"
3、v-model 双向绑定
<template>
<div>
<div>
<span>用户名</span>
<input type="text" v-model="username" />
</div>
<div>
<span>地址</span>
<select v-model="form">
<option value="北京市">北京</option>
<option value="南京市">南京</option>
<option value="天津市">天津</option>
</select>
</div>
<div>
<span>爱好</span>
<input type="checkbox" v-model="hobby" value="抽烟"> 抽烟
<input type="checkbox" v-model="hobby" value="喝酒"> 喝酒
<input type="checkbox" v-model="hobby" value="写代码"> 写代码
</div>
<div>
<span>性别</span>
<input type="radio" v-model="gender" value="男" name="sex"> 男
<input type="radio" v-model="gender" value="女" name="sex"> 女
</div>
<div>
<span>年龄</span>
<input type="text" v-model.number="age">
</div>
<div>
<span>自我介绍</span>
<!-- trim 去两端空格,lazy失焦再更新内容,number转换为数字型 -->
<textarea v-model.trim.lazy="intro"></textarea>
</div>
</div>
</template>
<script>
export default {
data() {
return {
username: "",
form:"",
hobby:[], //""只能全选,返回值为布尔值,[]返回被选择的选项的数组
gender:"",
intro:"",
age:""
}
}
}
</script>
<style>
</style>
4、v-text和v-html
v-html可以识别html标签
v-html="vue变量"
v-text="vue变量"
5、v-show和v-if控制标签隐藏和出现
v-show使用display:none;将标签隐藏,v-if是移除标签
v-if="布尔值"
v-show="布尔值"
6、v-for指令
可用于遍历数组、对象、数字、字符串
<template>
<div>
<h3>数组</h3>
<div v-for="(item,index) in arr" :key="index">
索引号:{{index}}---元素:{{item}}
</div>
<h3>对象</h3>
<div v-for="(value,key) in obj" :key="key">
键:{{key}}---值:{{value}}
</div>
<h3>字符串</h3>
<div v-for="(item,index) in str" :key="index">
索引:{{index}}---元素:{{item}}
</div>
<h3>数字</h3>
遍历1~number的数字
<div v-for="(item,index) in number" :key="index">
索引:{{index}}---元素:{{item}}
</div>
</div>
</template>
<script>
export default {
data() {
return {
arr: [1, 2, 3, 4],
obj: {
a: 11,
b: 22,
c: 33
},
number:3,
str:'qwert'
}
}
}
</script>
<style>
</style>
7、过滤器
全局过滤器:在main.js定义
// 全局过滤器
Vue.filter("reverse", val => val.split("").reverse().join(""))
局部过滤器:在export default对象定义
export default {
data(){
return {
msg:'abcdef'
}
},
// 局部过滤器
filters:{
toUp(val){
return val.toUpperCase()
}
}
}
使用
<p>{{ msg | reverse | toUp}}</p>
8、监听器
语法:
watch: {
变量名 (newVal, oldVal){
// 变量名对应值改变这里自动触发
},
变量名: {
handler(newVal, oldVal){
},
deep: true, // 深度侦听(对象里面层的值改变)
immediate: true // 立即侦听(网页打开handler执行一次)
}
}
//监听器
watch: {
list: {
handler() {
// 存入本地
localStorage.setItem('pList', JSON.stringify(this.list))
},
deep: true
}
},
9、计算属性computed
// 计算属性
computed: {
allPrice() {
// 3. 求总价
return this.list.reduce((sum, obj) => sum += obj.price, 0)
},
avgPrice() {
// 4. 求均价 - 保留2位小数
return (this.allPrice / this.list.length).toFixed(2)
}
},