VUE

class绑定

style绑定

侦听器

表单输入绑定 v-model

修饰符：lazy，number，trim

模版引用

操作dom，获取ref

this.$ref

<div ref="container" class="containser">{{content}}</div>

<input type="text" ref="username">

<button @click="getElimentHandle">获取元素</button>

data(){

return{

content:'内容'

}

},

methods:{

getElimentHandle(){

this.$refs.container.innerHTML ="哈哈";

console.log(this.$ref.username.value);

}

}

组件的组成

scoped 作用域：只在当前组件生效

组件注册方式

全局方式（main.js）

局部方式：单文件内使用

组件传递数据 props （父传子）

（可传任何类型数据）

父组件，可动态传递数据

子组件

组件传递props

default 默认值，type 类型，required 必选项

子类无法修改父类传来的数据

父组件

<h3>ComponentA</h3>

<ComponentB :title="title" :age="age" :names="names"/>

import ComponentB from './cb.vue'

export default{

data(){

return {

title: '标题',

age:18,

names:["male","female"]

}

},

components:{

ComponentB

}

}

子组件

<h3>ComponentB</h3>

<p>{{ title }}</p>

<p>{{ age }}</p>

<p v-for="(item, index) of names" :key="index">{{ item }}</p>

export default {

data() {

return {

}

},

props: {

title: {

type: [String, Number, Array, Object],

default: 'Component',

required: true

},

age: {

type: Number,

default: 18,

},

//数组和对象，必须通过工厂函数返回默认值

names: {

type: Array,

default(){

return ["空"]

}

}

}