Vue03
一.
1.表单绑定v-model
<input type="text" :value="message">
<input type="text" v-model="message">
<h2>{{message}}</h2>
当输入内容时，用v-model绑定的input的message值会实时改变，
而直接用v-bind绑定的无法改变message值，所以v-model实现了双向绑定
<input type="radio" value="男" v-model="sex">男
<input type="radio" value="女" v-model="sex">女
<h2>您选择的性别是：{{sex}}</h2>
sex : "男"
当有v-model时无需name属性也可以单选
二.修饰符
三.注册组件的基本步骤
1.组件的使用分成三个步骤：
1.1 创建组件构造器
1.2 注册组件
1.3 使用组件
2.全局组件和局部组件
<div id="app">
<my-cpn></my-cpn>
<my-cpn></my-cpn>
</div>
const cpnConstructor = Vue.extend({
template : `
<div>
<h2>hello world!</h2>
<h1>hello world!</h1>
</div>
`
})
Vue.component("my-cpn",cpnConstructor);
使用 `` 这种字符串可以换行
这里注册的组件是全局组件，意味着可以在多个Vue实例下使用，
想要注册局部组局可以在单个Vue实例中注册
components : {
my-cpn : cpnConstructor
}
3.父组件和子组件
<div id="app">
<cpn2></cpn2>
</div>
const cpnC1 = Vue.extend({
template : `
<div>
<h1>构造器1</h1>
</div>
`
})
const cpnC2 = Vue.extend({
template : `
<div>
<h2>构造器2</h2>
<cpn1></cpn1>
</div>
`,
components : {
cpn1 : cpnC1
}
})
const app = new Vue({
el : "#app",
data : {
message : "demo"
},
components : {
cpn2 : cpnC2
}
})
4.组件的语法糖注册方式
1.
Vue.component("cpn1",{
template : `
<h2>hello world</h2>
`
});
2.
components : {
cpn2 : {
template : `
<h2>hello world</h2>
`
}
}
5.组件模板分离写法
1.
<script type="text/x-template" id="cpn3">
<h3>cpn3</h3>
</script>
Vue.component("cpn3",{
template : "#cpn3"
})
2.
<template id="cpn3">
<h3>cpn3</h3>
</template>
6.组件数据存放
Vue.component("cpn3",{
template : "#cpn3",
data(){
return {
title : "title--------"
}
}
})
7.组件通信-父子组件传递数据
1.props基本用法 父传子
<div id="app">
<cpn :cmovies="movies" :cmessage="message"></cpn>
</div>
<template id="temp">
<div>
<p>{{cmessage}}</p>
<p v-for="m in cmovies">{{m}}</p>
</div>
</template>
data : {
message : "demo",
movies : ["火影忍者","海贼王","蜡笔小新"]
}
//两种写法
props : ["cmovies","cmessage"]
props : {
cmovies : Array,
cmessage : String
//cmessage: {
type: String,
defalut: "123123123"
required: true -> 必须传值不然报错
}
//cmovies: {
type: Array,
defalut() {
return []
}
}
}
如果传入的为（cMessage）驼峰标识，则在绑定的时候用 :c-message="message"
2.自定义事件 子传父