昨日回顾
"""
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,
}
})
"""
重点
子组件
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>
知识点总结
"""
1、可以用来复用的子组件，数据data需要做局部化处理，当组件被复用时，数据会相互独立
2、将父组件的数据传递给子组件，在渲染子组件标签时，给自定义属性设置父级数据，在子级内部用自定义属性拿父级数据
3、将子组件的数据传递给父组件，子组件需要主动触发$emit自定义事件携带出数据，父级实现自定义事件方法，就可以接收到子级数据
4、搭建vue环境需要依赖node环境，以及用npm包管理器安装vue脚手架cli（npm可以换源为cnpm）
5、通过 vue create 项目 来创建前台项目，选择配置好项目所需的依赖
6、用pycharm来配置vue项目启动
7、属性vue项目目录结构，以及基本的各种原理：项目入口从main.js开始
"""
作业
"""
1、按照上方 知识点总结 模块，总结今天所学知识点；
2、有以下广告数据（实际数据命名可以略做调整）
ad_data = {
tv: [
{img: 'img/tv/001.png', title: 'tv1'},
{img: 'img/tv/002.png', title: 'tv2'},
{img: 'img/tv/003.png', title: 'tv3'},
{img: 'img/tv/004.png', title: 'tv4'},
],
phone: [
{img: 'img/phone/001.png', title: 'phone1'},
{img: 'img/phone/002.png', title: 'phone2'},
{img: 'img/phone/003.png', title: 'phone3'},
{img: 'img/phone/004.png', title: 'phone4'},
]
}
i) 有两个大标题，电视和手机，点击对应的标题，渲染对应的数据
ii) 一个字典作为一个显示单位，定义一个子组件进行渲染（涉及父子组件传参）
3、在第2题基础上，页面最下方有一个 h2 标签，用来渲染用户当前选择的广告（点击哪个广告就是选中哪个广告）
i）当没有点击任何广告，h2 标签显示：未选中任何广告
ii）当点击其中一个广告，如tv1，h2 标签显示：tv1被选中
"""