什么是mvvm？
-
m model 模型当前视图中可用的数据
-
view 视图 页面dom html
-
(c controller 控制器 处理，加工model)
-
vm viewModel 监控者 数据的处理及渲染
vue的核心是什么： 数据驱动 组件
双向数据绑定
- v-model 表单、输入框的value值
<template>
<div>
<h3>复选框</h3>
<div>
<input type="checkbox" v-model="checkArr" value="1">1
<input type="checkbox" v-model="checkArr" value="2">2
<input type="checkbox" v-model="checkArr" value="3">3
<span>{{checkArr}}</span>
</div>
<h3>单选框</h3>
<div>
<input type="radio" v-model="radio" value="1">1
<input type="radio" v-model="radio" value="2">2
<input type="radio" v-model="radio" value="3">3
<span>{{radio}}</span>
</div>
<h3>下拉框</h3>
<div>
<select v-model="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<span>{{select}}</span>
</div>
</div>
</template>
<script>
export default {
name: 'Test',
data () {
return {
checkArr: [1,2],
radio: [],
select: [],
}
}
</script>
复制代码- Object.defineProperty() 动态添加属性
基本运用
var obj = {};
<!--单个-->
Object.defineProperty(obj,'name',{
value: 'abc',
writable: false // 为true是可以修改 当前属性值是否能修改
})
<!--修改多个-->
Object.defineProperties(obj,{
'name': {
value: 'abc',
writable: false
},
'age': {
value: '11',
writable: true
}
})
复制代码var obj = {};
var a = 123;
Object.defineProperty(obj,'name',{
get: function(){
return a;
},
set: function(){
a = val
}
})
console.log(obj.name) // 触发get
obj.name = abc;//触发set
复制代码一些使用小技巧
- v-cloak 解决{{}}浏览器闪烁的问题。使用时必须配置css样式，否则不生效。
<style>
[v-cloak] {
display: none;
}
</style>
<body>
<div v-cloak>{{msg}}</div>
</dody>
复制代码- event表示事件的状态、鼠标的位置，按钮的状态。。。
<!--传参写法-->
<button @click="change($enevt)"></button>
复制代码