Vue 简单的总结二
v-model 只能应用像在input textare select 标签
v-model.lazy 懒监听 不及时更改 当失焦的时候才更改
v-model.number 限制只能输入数字
v-model.trim 取出两边空格
<body> <div id="app"> <label for="username">用户名：</label> <input type="text" v-model="msg" id="username"> <p>{{ msg }}</p> <textarea placeholder="add multiple lines" v-model='msg'></textarea> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> <br> <!--多个复选框 使用列表保存--> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> <br> <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> <!--懒监听--> <input v-model.lazy="msg" > <!--数字显示--> <input v-model.number="age" type="number"> <!--清除前后空格--> <input v-model.trim="msg"> </div> <script src="vue.js"></script> <script> new Vue({ el: '#app', data() { return { msg: 'alex', checked: false, checkedNames: [], selected:'', age:0 } } }) </script> </body>
父子组件可以不使用template，但子组件最好还是有 注意：template中的标签一定要用一个标签包起来不然报这个错
总结：
1）一个子组件挂载到哪个组件，这个组件就是我的父组件；
2）以后模块化开发时，一个组件就是一个文件（一个组件包含了html，css，js），想使用这个组件时导入即可使用
<body> <div id="app"> <App></App> </div> <script src="vue.js"></script> <script> //如果仅仅是实例化vue对象中 既有el 又有template，如果template中定义模板的内容 // 那么template模板的优先级大于el //第一个参数是组件的名字，第二个参数 options参数 它是全局组件 // <slot></slot> slot是vue中提供的内容组件 它会去分发 内容 Vue.component('VBtn',{ data(){ return { } }, template:`<button> <slot></slot> </button>` }) // App header Vaside Vcontent // 1.声子 Vue中 组件的名字 首字母要大写 跟标签区分 组件中的data必须是个函数 一定要有返回值 let Vheader = { data(){ return { } }, //template定义模板的内容 // Component template should contain exactly one root element template:` <div> <h2>日天</h2> <h2>日天</h2> <VBtn>登录</VBtn> <VBtn>注册</VBtn> <VBtn>按钮</VBtn> <VBtn>提交</VBtn> </div> ` } let App = { data(){ return { text:"我是日天" } }, template:` <div id="a"> <h2>{{ text }}</h2> <Vheader></Vheader> <VBtn>删除</VBtn> <br> </div> `, methods:{ }, components:{ Vheader } } new Vue({ el: '#app', data() { return { msg:'alex' } }, template:`<App />`, components:{ //2.挂子 //如果key和value一样 可以只写一个 //App:App App } }) </script> </body>
1、声明子
let App = { data(){ return { } }, template:`<div> </div>` }
components:{
# 键和值相同可简写 正常 App：App
App
Son
...
}
1 可在template 中使用 template:` <App /> 或者 <App></App> `, 2 没有template 可以在引用部分直接用 <div id="app"> <App></App> </div>
父==》子
1.在子组件中 使用props声明 可以直接在子组件中任意使用
2.从父组件中接收的值也可以传值给其他组件
3.父组件 要定义自定义的属性
<div id="app">
<App></App> <!-- 使用局部组件App -->
</div>
<script>
// 声明一个局部组件Vheader
let Vheader = {
data(){
return {
}
},
// 挂载父组件的属性，该组件中就可以使用，从父组件接收到的值也可再传给其子组件
props:['msg','post'],
template:`
<div class="vheader">
<h2>子组件Vheader start</h2>
<p>{{ msg }}</p>
<p>{{ post.title }}</p>
<h2>子组件Vheader end</h2>
</div>
`
};
// 声明一个局部组件App
let App = {
data(){
return {
text:"我是父组件App的数据",
app_post:{
id: 1,
title: 'hello world'
}
}
},
//
template:`
<div class="app">
<Vheader :msg='text' :post='app_post'></Vheader>
</div>
`,
components:{
Vheader // 挂载局部组件Vheader
}
};
new Vue({
el: '#app',
data() {
return {
}
},
components:{
App // 挂载局部组件App
}
})
</script>
子==》父
1、子组件中 通过$emit()触发父组件中自定义的事件
2、父组件中声明自定义的事件介绍
<div id="app">
<App></App> <!-- 使用局部组件App -->
</div>
<script>
// 声明一个全局组件VBtn
Vue.component('VBtn',{
data(){
return {}
},
props:['id'], // 父组件Vheader传递过来的值
template:`
<button @click="clickHandler">{{ id }}</button>
`,
methods:{
clickHandler(){
console.log(this); // 每个组件中的this指的是当前组件对象
// this.$emit('父组件中声明的自定义的事件', ' 传值')
this.id++;
this.$emit('click_Handler', this.id);
}
}
});
// 声明一个局部组件Vheader
let Vheader = {
data(){
return {}
},
props:['post'], // 父组件App传递过来的数据
template:`
<div class="vheader">
<VBtn :id='post.id' @click_Handler="fuClickHandler"></VBtn>
</div>
`,
methods:{
fuClickHandler(val){
this.$emit('fatherHandler', val) // 往父组件App传值
}
}
};
// 声明一个局部组件App
let App = {
data(){
return {
app_post:{
id: 1,
title: 'hello world'
}
}
},
template:`
<div class="app">
{{ app_post.id }}
<Vheader :post='app_post' @fatherHandler="father_handler"></Vheader>
</div>
`,
methods:{
father_handler(val){
this.app_post.id = val
}
},
components:{
Vheader // 挂载局部组件Vheader
}
};
new Vue({
el: '#app',
data() {
return {}
},
components:{
App // 挂载局部组件App
}
})
</script>
使用$on()和$emit() 绑定的是同一个实例化对象
A===>B组件传值
1、声明一个Vue对象(bus 对象), 只是用来传值
2、B组件中要使用$on(‘事件的名字’,function(){})
3、A组件中使用$emit('事件的名字',值)
4、注意: 记住平行组件传值前提是这两个方法必须绑定在同一个实例化对象(bus)上
<div id="app">
<App></App> <!-- 使用局部组件App -->
</div>
<script>
// TestA ==》 TestB 传值
// 平行组件传值前提：这两个方法必须绑定在同一个实例化对象(bus)上
let bus = new Vue(); // 声明一个Vue对象，只是用来平行组件间传值
// TestB要声明事件 bus.$on('事件的名字', function(val){})
// TestA要触发事件 bus.$emit('TestA组件中声明的事件名', '值')
// 声明一个全局组件TestB
Vue.component('TestB',{
data(){
return {
text: ""
}
},
template:`
<h2>{{ text }}</h2>
`,
created(){
// 声明事件
bus.$on('testData', (val) => { // 注意这里用箭头函数
this.text = val
})
}
});
// 声明一个全局组件TestA
Vue.component('TestA',{
data(){
return {
msg: "我是子组件TestA的数据"
}
},
template:`
<button @click="clickHandler">TestA组件中按钮</button>
`,
methods:{
// 定义触发的函数
clickHandler(){
console.log(bus);
bus.$emit('testData', this.msg)
}
}
});
// 声明一个局部组件Vheader
let Vheader = {
data(){
return {}
},
template:`
<div class="vheader">
<TestA></TestA>
<TestB></TestB>
</div>
`,
};
// 声明一个局部组件App
let App = {
data(){
return {}
},
template:`
<div class="app">
<Vheader></Vheader>
</div>
`,
components:{
Vheader // 挂载局部组件Vheader
}
};
// 根组件，可以没有template属性，直接在el中使用子组件
new Vue({
el: '#app',
data() {
return {}
},
components:{
App // 挂载局部组件App
}
})
</script>
