复习
"""
1、v-model完成表单指令，简单的控制value，单选框中的使用，单独复选框的使用以及复选框中的使用
<input type="password" v-model="控制value的变量" />
2、了解：斗篷指令解决页面闪烁
v-cloak => [v-cloak] {display:none} => 加载vue就会清除v-cloak属性
3、条件指令v-if与v-show区别，v-if家族成员以及上分支会成立会屏蔽下分支的工作机制
v-if不渲染隐藏 | v-show以display:none渲染隐藏
v-if | v-else-if | v-else
4、循环指令v-for如何循环渲染字符串、数组、字典，以及需要嵌套循环渲染赋值结构
v-for="v in str" v-for="（v,i) in str"
v-for="v in arr" v-for="（v,i) in arr"
v-for="v in dic" v-for="（v,k) in dic" v-for="（v,k,i) in dic"
[{},{}] {a:[]} [str1,str2]
5、了解：delimiters实例成员解决插值表达式符号冲突
delimiters: ['{{', '}}']
6、计算属性(方法属性)在computed中声明，方法内部变量会被监听，值来源于方法返回值
computed: {
methodAttr() {
// 内部出现的变量都会被监听，发生值更新会回调该方法
return '方法属性的值'
}
}
7、监听watch可以设置数据的监听方法，在监听属性更新时，完成特定逻辑
watch: {
attr() {
// attr属性被监听，发生值更新会回调该方法
}
}
8、重点：组件的概念，组件就是vue实例(对象)
<div id="app">
<tag />
<tag />
</div>
let tag = {
template: '<p>子组件</p>'
}
new Vue({
el: '#app',
components: {
tag,
}
})
9、创建、注册、使用子组件的三部曲
"""
VUE组件
组件
- 每一个组件都是一个vue实例
- 每个组件均具有自身的模板template，根组件的模板就是挂载点
- 每个组件模板只能拥有一个根标签
- 子组件的数据具有作用域，以达到组件的复用
vue组件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
{{ msg }}
</div>
</body>
<script src="js/vue.js"></script>
<script>
/**
* 1、组件：由html、css、js三部分组成的独立单位，可以类似于变量，重复使用
* 2、组件其实就是vue实例(对象)，一个组件就是一个vue实例(对象)
* 3、new Vue()产生的也是实例(对象)，所以也是组件，我们称之为 根组件
* 一个页面建议只出现一个根组件（项目开发模式下，一个项目建议只出现一个根组件）
* 4、组件的html页面结构有 template 实例成员提供
* template提供的html结构是用来构虚拟DOM
* 真实DOM最终会被虚拟DOM替换
* 根组件一般不提供template，就由挂载点el来提供构建虚拟DOM的页面结构，根组件如果提供了template，还需要设置挂载点作为替换占位
* template模板有且只有一个根标签
*/
let c1 = '';
new Vue({
el: '#app',
data: {
msg: '12345',
c1: 'red'
},
template: `
<div id="app">
<p :style="{color: c1}">{{ msg }}</p>
<p @click="clickAction">{{ msg }}</p>
</div>
`,
methods: {
clickAction() {
console.log(this.msg)
}
}
})
</script>
</html>
子组件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>子组件</title>
</head>
<body>
<!--根组件的template-->
<div id="app">
<!--在根组件template中加载的组件，称之为根组件的子组件-->
<my-tag></my-tag>
<my-tag></my-tag>
<my-tag></my-tag>
<tag></tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 1、定义组件
// 2、注册组件
// 3、使用组件
// 如何定义子组件：组件就是一个普通对象，内部采用vue语法结构，被vue注册解释后，就会成为vue组件
let myTag = {
template: `
<div>
<h3>子组件</h3>
<p>我是自定义的子组件</p>
</div>
`,
};
// 了解：全局组件，不要注册就可以直接使用
Vue.component('tag', {
template: `
<div>
<h3>全局组件</h3>
<p>我是自定义的全局组件</p>
</div>
`,
});
new Vue({
el: '#app',
components: {
// 'my-tag': myTag,
// myTag: myTag,
myTag,
}
})
</script>
</html>
子组件
let tag = {
template: `...`,
data() {
return {
// 数据...
}
}
}
// 在哪个组件模板中出现的属性变量和方法变量，都由当前所属组件自己提供
父传子
<div id="app">
<tag :sub_msg="msg" />
</div>
<script>
let tag = {
props: ['sub_msg']
template: `<div>{{ sub_msg }}</div>`,
}
new Vue({
el: '#app',
components: {
tag,
},
data: {
msg: '父级数据'
}
})
</script>
子传父(了解)
<div id="app">
<h1> {{ title }} </h1>
<!-- 组件标签不能添加系统事件，只能添加自定义事件，自定义事件在组件内部通过$emit主动触发 -->
<tag @self_action="changeTitle"/>
</div>
<script>
let tag = {
template: `
<div>
<input v-model="sub_title" />
</div>
`,
data() {
return {
sub_title: ''
}
},
watch: {
// 监听sub_title属性，值一改变就会触发
sub_title() {
// 将sub_title与父级的title建立关联
// 激活(触发)self_action自定义事件
this.$emit('self_action', this.sub_title)
}
}
};
new Vue({
el: '#app',
components: {
tag,
},
data: {
title: '父级初始标题'
},
methods: {
changeTitle(sub_title) {
this.title = sub_title ? sub_title : '父级初始标题';
}
}
})
</script>