①表单输入绑定
v-model指令在表单input、textarea、select元素进行数据双向绑定，v-model在做双向数据绑定时会忽略value、checked、selected attribute的值，会把实例中的data数组作为数据源
<input type="text" value="123" v-model="val">
<input type="radio" name="" id="" checked v-model="checked">
<select v-model="num">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
</select>
data() {
return {
val: '',
checked: 'false',
selected: 'false',
num: 1
}
},
最终结果为 空 未选中 1
复选框
单个复选框绑定boolean值
<input type="checkbox" name="" id="" v-model="checkbox">
多个复选框绑定数组
<input type="checkbox" name="" id="" v-model="checkboxs" value="1">
<input type="checkbox" name="" id="" v-model="checkboxs" value="2">
<input type="checkbox" name="" id="" v-model="checkboxs" value="3">
checkbox: true,
checkboxs: [1,2]
结果为 √ √ √ ×
单选按钮
绑定值和value值一致选中
选择框
单选时与value值一致选中
多选时[]中的值和value值一致选中
修饰符
.lazy //change时更新
.number //将用户输入转化为数字类型
.trim //去除首尾空白字符
②指令
v-text //防止xss攻击
v-html
v-show
v-if
v-else
v-else-if
v-for
v-on
v-bind
v-model
v-slot
v-pre
v-cloak //给带有[v-cloak]属性设置displsy:none,获取到数据时，vue会自动吧v-cloak去掉
v-once
③自定义指令
/* 局部注册 */
directives: {
autofocus: {
/**
* @descripttion:
* @param {*} el 真实dom元素
* @param {*} binding 绑定值得信息对象
* @return {*}
*/
bind(el, binding) {
},
inserted(el, binding) {
},
update(el, binding) {
},
},
/* 函数简写 */
autofocus(el, binding){
}
}
/* 全局注册 */
Vue.directive('autofocus', {
bind(el, binding) {
},
inserted(el, binding) {
},
update(el, binding) {
},
})
/* 函数简写 */
Vue.directive('autofocus', function(){
})
④生命周期
⑤组件
多文件组件
一个组件中包含多个组件。
局部创建组件
const school = Vue.extend({
data() {
return {
}
},
template:"<div>学校</div>"
})
简写形式
const school ={
data() {
return {
}
},
template:"<div>学校</div>"
}
会自动调用Vue.extend()
注册组件
components:{
school
},
使用组件
<school></school>
全局注册组件
Vue.component('',{})
使用Vue.extend创建组件时，会返回一个全新的Vue.component()函数，在使用组件时会自动new这个构造函数
并且把options传入，Vue.componet构造函数，和Vue区别是前者不能用el去挂载顶层元素，在school组件中，methods、data中的this是vue.component
Vue.component.prototype.__proto__ === Vue.prototype 是组件能用Vue原型上很多方法的原因
单文件组件
只包含一个组件
<templeate></templeate>
export degault {}
<style></style>
⑥ref
ref类似于id标识，可方便查找。
在html元素身上可以直接获取dom元素，在组件身上可以获取到组件的实例对象
⑦props
props:[name,age]
prosps:{
name:{
type:String,
default: 'xxx'
},
age:{
type:Number,
default: 99
}
}
在往子组组件传递数据时，用props配置项进行接收,可以用数组和对象形式去接收，当不能满足对象里面的条件时程序会报错，但是不影响显示。props是单向数据流，不能改变传过来的值，最好在data中接收
⑧mixin混入
const mixin = {
和data中配置项相同
}
使用mixins[mixin]
混入可以对重复的功能代码进行抽离，会自动和组件中的配置项合并，当与方法冲突时优先使用组件中的方法，生命周期钩子函数会都执行，且混入的先执行
⑨插件
const obj = {
install(){
}
}
Vue.use(obj)
安装插件，需要提供一个install方法，会自动调用，并且会吧vue构造函数传递过去，可以通过这个封装库
⑩scoped
在style上加上scoped属性，会在元素上生成唯一的一个标识，最后通过属性选择器实现组件间的样式不被覆盖。不加就会导致后引入的组件覆盖前面引入组件的样式，一帮在app组件中不叫scoped是为了引入全局样式。
