v-model双向绑定 input textarea 修改input值时也会修改后台的值
<input type="text" v-model="message">
<!-- <input type="text" :value="message" @input="changeMessage">-->
v-model radio可以不用写name
<label for="male">
<input type="radio" id="male" value="男" v-model="sex">男
</label>
<label for="female">
<input type="radio" id="female" value="女" v-model="sex">女
</label>
v-model checkbox多选框
label 中用for可以实现点击文字选中文本框
:disabled 绑定boolean 来确定按钮状态
<label for="agree">
<input type="checkbox" id="agree" v-model="isAgree">同意协议
<button :disabled="!isAgree">下一步</button>
</label>
select 与 v-model
v-model多选框处理时是一个数组，单选框时是布尔值 单选
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<input type="checkbox" value="足球" v-model="hobbies">足球
<input type="checkbox" value="桌球" v-model="hobbies">桌球
<input type="checkbox" value="排球" v-model="hobbies">排球
<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
<br>
多选
<!-- {{fruit}}-->
<select name="abc" v-model="fruit">
<option value="苹果" >苹果</option>
<option value="香蕉" >香蕉</option>
<option value="榴莲" >榴莲</option>
<option value="葡萄" >葡萄</option>
</select>
<select name="abc" v-model="fruits" multiple>
<option value="苹果" >苹果</option>
<option value="香蕉" >香蕉</option>
<option value="榴莲" >榴莲</option>
<option value="葡萄" >葡萄</option>
</select>
{{fruits}}
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好啊',
sex:'男',
isAgree: false,
hobbies:[],
fruit:'苹果',
fruits:[],
},
methods:{
changeMessage(event){
this.message = event.target.value
}
}
})
</script>
值绑定 动态的获得数据 v-bind
v-model的修饰符
.lazy 失去焦点或者获得回车
v-model 默认绑定的类型是字符串类型，所以若要保持number属性要加上.number
.trim 除去多余的空格
<input type="text" v-model.trim="name">
什么是组件化？
它提供一种抽象的，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。
任何的应用都会被抽象成一颗组件树
注册组件的基本步骤
- 创建组件构造器
- 注册组件
- 使用组件
注意局部组件和全局组件的注册区别！！！
- 局部组件，在vue实例下注册，并且只能在特定的实例下使用
- 全局组件，在vue实例外面注册，可以在多个实例下使用
<div id="app">
<!-- 使用组件-->
<my-cpn></my-cpn>
</div>
<!--必须在Vue实例下才能使用-->
<my-cpn></my-cpn>
<script src="../js/vue.js"></script>
<script>
// 全局组件，意味着可以在多个Vue实例中使用
// 1.创建组件构造器对象
const cpnC = Vue.extend({
template: `
<div>
<h2>w</h2>
<h2>w</h2>
<h2>w</h2>
</div>
`
})
// 2.注册组件 全局注册
// Vue.component('my-cpn', cpnC)
const app = new Vue({
el:'#app',
data:{
},
components:{
// 局部注册 局部组件
cpn:cpnC,
}
})
</script>
语法糖组件注册
// 全局组件注册的语法糖
Vue.component('cpn1', {
template:`
<div>
<h2>woShiNiBa</h2>
<h2>sbWanYi</h2>
</div>
`
})
父组件和子组件的区别
注册的组件内容需要用 div包含起来
不能直接使用父组件下的子组件
模板分离 使代码更加简洁
第一种方法：使用javascript
<script type="text/x-template" id="cpn">
<div>
<h2>我是标题</h2>
<p>我是内容：哈哈哈</p>
</div>
</script>
<script>
// 1.注册一个全局组件
Vue.component('cpn',{
template:`#cpn`
})
const app = new Vue({
el:'#app',
data:{
}
})
</script>
第二种写法使用template
<template id="cpn1">
<div>
<h2>我是第二种写法</h2>
<p>我是内容：嘻嘻</p>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
// 1.注册一个全局组件
Vue.component('cpn',{
template:`#cpn1`
})
const app = new Vue({
el:'#app',
data:{
}
})
</script>
组件可以访问Vue实例数据吗？
组件是一单独功能的封装：
这个模块有属于自己的html模板，也应该有自己的数据data
组件中的数据是保存在哪里呢？顶层的Vue实例中吗？
不能直接访问到顶层Vue实例中的data
Vue组件应该有自己保存数据的地方
组件中要使用数据的话，需要使用data函数，并返回一个对象
组件中也可以使用 methods
<div id="app">
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h2>{{title}}</h2>
<h2>123</h2>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
Vue.component('cpn',{
template:'#cpn',
data(){
return {
title: 'abc',
}
}
})
const app = new Vue({
el:'#app',
data:{
title:'我是标题来自父类',
}
})
</script>
同一组件不共享统一对象数据，则也就是为什么组件中的data为什么要使用函数，这样就会使用不同的内存地址
