day67

目录

• 组件
• 子组件
• 组件化
• 组件传参—父传子
• 组件传参—子传父
• Vue基础知识
• 知识点总结
• Vue项目环境
• 安装
• Vue项目创建
• 今日日考：

组件

组件概念：一个包含html、css、js独立的集合体，这不样的集合，这样的集合体可以完成页面结构的代码复用

组件分类：根组件、全局组件、局部组件

​ 根组件：所有被new Vue（）产生的组件，在项目开发阶段，一个项目只会出现一个根组件

​ 全局组件：不用注册，就可以成为任何一个组件的子组件 Vue.component('组件名'，{})，{}内部采用的是vue语法

​ 局部组件：必须注册，才可以成为注册该局部组件的子组件 组件名= {} ，{}内部采用的是vue语法

每一个组件都有自身的html结构，css样式，js逻辑

每一个组件其实都有自己的template，就是用来标识自己html结构的

template模板中有且只有一个根标签

根组件一般不提供template，就由挂载点的真实DOM提供html结构

除根组件的其他组件，数据要有局部作用域，保证组件复用时，各组件数据的独立性

在多组件共处时，在哪个组件模板中出现的变量，有当前组件提供

组件的特点：

1. 组件都有管理组件html页面的template实例成员

2. 根组件都是作为最顶层，局部与全局组件作为子组件，也可以成为其他局部与全局组件的父组件

3. 子组件的数据需要隔离（数据组件化，每一个组件拥有自己数据的独立名称空间）

4. 布局组件必须注册后才能使用，全局组件不需要注册，提倡使用局部组件（因为不需要注册，使用方便）

5. 组件中实例，出现的所有变量（模板中、逻辑中），由该组件自己提供管理

6. 局部全局和根组件都是一个vue实例，一个实例对应一套html、css、js结构，所以实例就是组件

new Vue({
        el: '#app',  // 被组件 template 模块进行替换的占位符
        data: {
            msg: '组件信息'
        },
        template: '<p>{{ msg }}</p>'
    })

总结：根组件，可以不明确template，template默认采用挂载点页面结构，如果设置的template，挂载点内部的内容无效，因为会被替换

解析：html，body标签不能被替换，所以不能作为挂载点

子组件

声明局部组件：局部组件要在其父组件中注册才能使用

1. 声明组件
2. 注册组件
3. 渲染组件 =>全局组件不需要注册
4. 在哪个组件模板中出现的属性变量和方法变量，都由当前所属组件自己提供

组件化

局部组件或全局组件，一个组件可能会被多次复用，每个组件都应该有自己独立的变量名称空间

数据需要组件化，作为方法的返回值（方法执行后会产生一个局部作用域）

组件传参—父传子

1. 子组件可以通过props自定义组件属性（采用反射机制，需要填写字符串，但是使用时可以直接作为变量）
2. 子组件会在父组件中渲染，渲染时，将父组件的变量绑定给子组件自定义属性户，将父组件变量传递给子组件
3. 组件标签不能添加系统事件，只能添加自定义事件，自定义事件在组件内部通过$emit主动触发

组件传参—子传父

自定义组件标签的事件

自定义事件是属于子组件的，子组件在父组件中渲染并绑定事件方法，所以事件方法由父组件来实现

子组件如何触发自定义事件：this.$emit（‘自定义事件名’，触发事件回调的参数们）

子组件 =触发自定义事件，携带出子组件的内容，在父组件中实现自定义事件的方法，拿到子组件传递给父组件的消息

Vue基础知识

组件：

组件概念：vue实例就是组件

根组件、局部组件、全局组件

组件传参：

父传子：自定义组件属性

子传父：自定义组件事件

实例成员：

el
data 
methods
computed
watch
filters
delimiters
props
template
components

指令：

{{}}
v-text
v-html
v-once
v-model
v-bind
v-show
v-if
v-else-if
v-else
v-for
v-cloak

知识点总结

1. 可以用来复用的子组件，数据data需要做局部化处理，当组件被复用时，数据会互相独立

2. 将父组件的数据传递给子组件，在渲染子组件标签时，给自定义属性设置父级数据，在子级内部用自定义属性拿父级数据

3. 将子组件的数据传递给父组件，子组件需要主动触发$emit自定义事件携带数据，父级实现自定义事件方法，就可以接受到子级数据

4. 搭建vue环境需要依赖node环境，以及用npm包管理器安装vue脚手架cli（npm可以换源为cnpm）

5. 斗篷指令解决页面闪烁

   v-cloak => [v-cloak] {dispaly:none}=>加载vue就会清楚v-cloak属性
   

Vue项目环境

python

Vue ~~ Django		vue是用来搭建vue前端项目的
node ~~ Python		node是用c++编写的用来运行ds代码
npm ~~ pip			npm是一个终端应用商城，可以换成国内源cnmp

安装

1. 官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/

2. 换成国内源cnpm

    npm install -g cnpm --registry=https://registry.npm.taobao.org
   

3. 安装vue项目手架

   cnpm install -g @vue/cli
   

   注意：安装第二三步骤的时候失败时，可以清空npm缓存 再重复执行失败的步骤

   npm cache clean --force
   

   Vue项目创建

   选中一个有vue.js的代码文件夹，show in explorer,先切换创建项目的盘（D:），然后cd 路径（D:python12期day66代码），

   创建项目vue create v-proj

   项目初始化default，选default下面的一行，

   选中Router回车

   选择 ESLint with error prevention only

   选中 Lint on save

   选中In dedicated config files

   然后选中n

   然后去66代码就能看到新建的项目文件夹

今日日考：

1.条件指令一共有哪些？有两个相似功能的指令区别在哪？
v-show="布尔变量"   隐藏时，采用display:none进行渲染
v-if="布尔变量"     隐藏时，不再页面中渲染(保证不渲染的数据泄露)，保存在内存中
v-if | v-else-if | v-else

2.循环指令怎么处理字符串，数组和对象
v-for="(v, i) in str|arr"   
v-for="(v, k, i) in dic"
v:值 k:键 i:索引

3.简述计算属性和监听属性
result必须渲染；绑定的方法内部出现的变量更新方法被调用；方法返回值是result的值；result不能在data中重复定义
computed: {
	result() {
	// 一个方法属性值依赖于多个变量
		return this.n1 + this.n2;
	}
}

监听属性属性更新方法被调用；方法参数为被监听属性当前值，上一次值；多个变量依赖一个变量
watch: {
	full_name(n, o) {
		this.first_name = n.split('')[0]
		this.last_name = n.split('')[1]
	}
}

4.简述过滤器
{{ n1, n2 | f1(30) | f2 }}

filters: {
	f1(n1,n2,n3) {return 过滤结果},
	f2(f1的res) {return 过滤结果},
}
可以对过滤的结果进行多次过滤（串联）