一。v-model
实现input输入框的双向绑定,在input中修改,vue对象中的数据也会修改,
vue对象中的数据修改,input输入框的内容也会修改。
是一个复合指令,是v-bind修改value 和 v-on绑定input事件的结合
1.与radio(单选框)结合
<div id="main">
<input type="radio" value="男" v-model="sex">男
<input type="radio" value="女" v-model="sex">女
<h1>{{sex}}</h1>
</div>
</body>
<script>
const o = new Vue({
el:'#main',
data:{
sex:'男',
}
})
</script>
2.与复选框结合
1.checkbox单选
<div id="main">
<label>
<input type="checkbox" id="agree" v-model="isagree">同意协议
</label>
<br>
您选择的是{{isagree}}
<br>
<button v-bind:disabled="!isagree">下一步</button>
</div>
<script>
const o = new Vue({
el:'#main',
data:{
isagree:false,
}
})
</script>
<div id="main">
<input type="checkbox" value="Phigros" v-model="games">Phigros
<input type="checkbox" value="MushDash" v-model="games">MushDash
<input type="checkbox" value="主播女孩重度依赖" v-model="games">主播女孩重度依赖
<input type="checkbox" value="明日方舟" v-model="games">明日方舟
<br>
<h1>您的爱好是{{games}}</h1>
</div>
<script>
const o = new Vue({
el:'#main',
data:{
games:[],
}
})
</script>
3.与select结合
<div id="main">
<select id="" v-model="foods">
<option value="苹果">苹果</option>
<option value="榴莲">榴莲</option>
<option value="大猪蹄子">大猪蹄子</option>
<option value="臭豆腐">臭豆腐</option>
</select>
<h1>您选择的是{{food}}</h1>
</div>
<script>
const o = new Vue({
el:"#main",
data:{
food:'榴莲',
}
})
</script>
<select id="" v-model="foods" multiple>
<option value="苹果">苹果</option>
<option value="榴莲">榴莲</option>
<option value="大猪蹄子">大猪蹄子</option>
<option value="臭豆腐">臭豆腐</option>
</select>
<h1>您选择的是{{foods}}</h1>
<script>
const o = new Vue({
el:"#main",
data:{
foods:[],
}
})
</script>
4.值绑定
<div id="main">
<label v-for="item in OriginGames">
<input type="checkbox" v-bind:value="item" v-model="games">{{item}}
</label>
<br>
<h3>您的爱好是{{games}}</h3>
</div>
<script>
const o = new Vue({
el:'#main',
data:{
games:[],
OriginGames:["Phigros","MushDash","主播女孩重度依赖","明日方舟"],
}
})
5.修饰符
<!-- 1.lazy 失去焦点或按下回车才会刷新 -->
<div id="main">
<input type="text" v-model.lazy='message'>
<h3>
{{message}}
</h3>
<!-- 2.number 在输入框中获取的字符串转化为数字-->
<input type="text" v-model.number="age">
<h3>{{age}}--{{typeof age}}</h3>
<!-- 3.trim 删除字符串首尾的空格 -->
<input type="text" v-model='name'>
<h3>{{name}}</h3>
</div>
<script>
const o = new Vue({
el:'#main',
data:{
message:'你好',
age:18,
name:'',
}
})
</script>
二。组件化
1.思想
将页面拆分为一个个组件,每个组件中拥有许多小组件
小组件尽可能提高复用性
2.基本使用
1.创建组件构造器
2.注册组件
3.使用组件
<!-- 3.使用 -->
<div id="main">
<mycpn></mycpn>
<mycpn></mycpn>
<mycpn></mycpn>
</div>
<script src="../环境/vue.min.js"></script>
<script>
// 1.创建组件构造器
const cpnc = Vue.extend({
template: `
<div>
<h1>我是标题</h1>
<p>段落1</p>
<p>段落2</p>
</div>`,
})
// 2.注册组件
Vue.component('mycpn',cpnc);//第一个参数为注册的html标签名(必须全部用小写),第二个参数为组件构造器
const app = new Vue({
el:'#main',
})
</script>
3.全局组件和局部组件
全局组件可以在多个vue对象中使用,局部组件只能在定义的vue对象中使用,上面的一种方式注册的是全局组件。
局部组件注册方式如下
<script src="../环境/vue.min.js"></script>
<script>
const cpnc = Vue.extend({
template:`
<div>
<h1>我是标题</h1>
<p>段落1</p>
<p>段落2</p>
</div>`,
})
const o = new Vue({
el:'#main',
data:{
s:1,
},
components:{
mycpn:cpnc,
}
})
</script>
4.父组件和子组件
1.vue实例对象可以看作一个root组件
2.可以在组件内部注册组件作为子组件,这样可以直接在父组件内使用注册的子组件标签。
<div id="main">
<cpn2></cpn2>
</div>
<script src="../环境/vue.min.js"></script>
<script>
const cpnc1 = Vue.extend({
template:`
<div>
<h1>标题1</h1>
<p>段落1</p>
</div>
`,
})
const cpnc2 = Vue.extend({
template:`
<div>
<h1>标题2</h1>
<p>段落2</p>
<cpn1></cpn1>
</div>
`,
components: {
cpn1:cpnc1,
}
})
const o = new Vue({
el:'#main',
data:{
},
components: {
cpn2:cpnc2,
}
})
</script>
5.语法糖
1.直接将组件构造器的对象作为第二个参数传入(全局和局部都可以使用,以全局为例)。
Vue.component('mycpn',{
template: `
<div>
<h1>我是标题</h1>
<p>段落1</p>
<p>段落2</p>
</div>`
});//第一个参数为注册的html标签名(必须全部用小写),第二个参数为组件构造器的对象
6.组件模板的分离写法
<script type="text/x-template" id="cpn1">
<div>
<h1>我是标题</h1>
<p>段落1</p>
<p>段落2</p>
</div>
</script>
<template id="cpn1">
<div>
<h1>我是标题</h1>
<p>段落1</p>
<p>段落2</p>
</div>
</template>
Vue.component('mycpn',{
template:'#cpn1',
});
7.组件的data函数
vue组件拥有自己存放数据的地方,组件内的data不是一个对象,而是一个函数,返回一个对象
Vue.component('mycpn',{
template:'#cpn1',
data () {
return {
title:'我是标题',
p1:'段落1',
p2:'段落2',
}
}
});
8.父子组件的通信
1,父传子使用props
2,子传父使用$emit自定义事件
<div id="main">
<cpnc v-bind:cgames="games" :cage="age"></cpnc>
</div>
<template id="cpn">
<div>
<h1>{{cgames}}</h1>
<h1>{{cage}}</h1>
</div>
</template>
<script>
const cpnc = {
template:'#cpn',
data(){
return {}
},
props: ['cgames','cage'],//propS里面的属性必须是小写,驼峰标识用-转化
}
const o = new Vue({
el:'#main',
data:{
games:['phigros','主播女孩重度依赖','明日方舟'],
age:18
},
components: {
cpn:cpnc,
}
})
<div id="main">
<cpnc @itemclick="print"></cpnc>
<!-- 这里省略参数会默认将之前的参数传递 -->
</div>
<template id="cpn">
<div>
<button v-for="item in games"
@click = 'go(item)'>{{item}}</button>
</div>
</template>
<script src="../环境/vue.min.js"></script>
<script>
const cpnc = {
template:'#cpn',
data(){
return {games:['phigros','主播女孩重度依赖','明日方舟'],}
},
methods: {
go(item){
//向父组件发射事件,自定义事件
this.$emit('itemclick',item);
}
}
}
const o = new Vue({
el:'#main',
data:{
},
components: {
cpnc:cpnc,
},
methods: {
print(item){
console.log(item);
}
}
})
</script>