VUE之组件
子组件
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被选中
"""子组件
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被选中
"""