1218 组件分类,组件传参

目录

• 昨日内容
• 组件
  • 1.概念
  • 2.组件分类
    • 特点
    • 根组件
    • 局部组件
    • 全局组件
  • 3.组件传参
    • 父传子
    • 子传父
  • 作业
• Vue项目环境的搭建
  • Vue项目环境搭建
  • Vue项目创建
  • pycharm配置并启动vue项目
  • vue项目目录结构分析
  • vue组件(.vue文件)
  • 全局脚本文件main.js（项目入口）
    • 改写
• Vue基础总结

昨日内容

"""
1、表单指令：
	v-model="变量"   变量与value有关
	普通：变量就代表value值
	单选框：变量为多个单选框中的某一个value值
	单一复选框：变量为布尔，代表是否选中
	多复选框：变量为数组，存放选中的选项value
	
	
2、条件指令：
	v-show:  display:none
	v-if:    不渲染
	v-if | v-else-if | v-else
	前者条件成立，就不管之后分支，当所有条件都不成功，才执行v-else分支
	
3、循环指令：
	v-for="(v, i) in str|arr"   
	v-for="(v, k, i) in dic"
	v:值 k:键 i:索引

4、sessionStorage | localStorage
	sessionStorage：生命周期同所属标签(标签关闭被销毁)
	localStorage：永久保存
	localStorage.key = value
	localStorage.clear()

5、分隔符：delimiters: ['[{', '}]'],

6、过滤器：
	{{ n1, n2 | f1(30) | f2 }}
	
	filters: {
		f1(n1,n2,n3) {return 过滤结果},
		f2(f1的res) {return 过滤结果},
	}

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

8、监听属性：
	监听属性属性更新方法被调用；方法参数为被监听属性当前值，上一次值；多个变量依赖一个变量
	watch: {
		full_name(n, o) {
			this.first_name = n.split('')[0]
			this.last_name = n.split('')[1]
		}
	}
	
9、冒泡排序：
	for (let i=0; i<arr.length-1; i++) {  // 趟数
        for (let j=0; j<arr.length-1-i; j++) {  // 比较次数
            // 处理条件即可
            if (arr[j]参数 > stus[j + 1]参数) {
                let temp = stus[j];
                stus[j] = stus[j + 1];
                stus[j + 1] = temp;
            }
        }
    }
"""

组件

1.概念

html,css与js的集合体,为该集合体命名,用该名字复用html,css与js组成的集合体 ==> 复用性

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

2.组件分类

• 根组件 new Vue() 生成的组件
• 局部组件 组件名 = {} , { } 内部采用的是vue语法
• 全局组件 vue.component('组件名',{}), { }内部采用的是vue语法

特点

1. 组件都有管理组件html页面结果的 template 实例成员, template 中有且只有一个根标签

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

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

4. 局部组件必须注册后才能使用,全局组件不需要注册(使用局部变量省内存)

5. 组件中出现的所有变量(模板中,逻辑中),都由该组件自己提供管理

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

根组件

挂载点el本质是被组件template模块进行替换的占位符

• 根组件,可以不确定template,template默认采用挂载点页面结构
• 如果设置的template,挂载点内部的内容无效,因为会被替换掉
• html,body标签不能被替换,所以不能作为挂载点

使用new Vue来定义根组件
在template 中定义文本

<script>
    new Vue({
        el:'#app',
        data:{
            msg:'组件信息'
        },
        template:'<p>你好{{ msg }}</p>'
    })
</script>

局部组件

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

• 声明组件 template
• 注册组件 components
• 渲染组件 直接在页面中写

<div id="app">
    <div class="warp">
        <zujian></zujian>
    </div>
</div>
<script>
    
// 声明局部组件
    // 1.声明组件 2.注册组件 3. 渲染组件
    let zujian = {
        template:`
        <div class="box">
            <img src="img/1.jpg" alt="">
            <h2>美女</h2>
        </div>
        `
    };

    new Vue({
        el:'#app',
        data:{},
// 注册组件
        components:{
            // 组件注册时,可以直接写组件名
            zujian
        }
    })
</script>

解耦合

components 注册(注册是小写)
	对应使用-来替换驼峰体的变量

全局组件

• Vue.component('组件名',{"语法组件"})
• 使用template定义语法组件
• 全局组件不需要注册

// 全局组件
        <quanju></quanju>

    Vue.component('quanju',{
        template:`
        <div class="box">
            <img src="img/2.jpg" alt="">
            <h2>美女</h2>
        </div>
        `
    });

3.组件传参

组件数据的局部化

• 函数产生局部作用域,进行组件化data(){}
• 一个组件可能会被复用多次,每个组件都有应该有自己独立的变量名称空间
• 数据需要组件化,作为方法的返回值(方法执行后会产生一个局部作用域)

    // 声明局部组件
    // 绑定了点击事件
    let zujian = {
        template:`
        <div class="box" @click="fn">
            <img src="img/1.jpg" alt="">
            <h2>锤了美女{{ count }}下</h2>
        </div>
        `,
        // 函数产生局部作用域,进行组件化
        // 一个组件可能会被复用多次,每个组件都有应该有自己独立的变量名称空间
        data(){
            return{
                count:0,
            }
    },
        // 数据需要组件化,作为方法的返回值(方法执行后会产生一个局部作用域)
        methods:{
            fn(){
                this.count++;
            }
        }
    };

父传子

• 传值时,自定义属性前加:是变量,不加直接传值
• 子组件可以通过props自定义组件属性(采用反射机制,需要填写字符串,但是使用时可以直接当做变量)
• 子组件会在父组件中渲染,渲染时,将父组件的变量绑定给子组件的自定义属性,可以将变量值传递给子组件

传值
    // 加":"传变量  :abc="m" 传变量m ,  xyz="123"传的普通字符串

    <zujian v-for="m in meinv" :abc="m" xyz="123"></zujian>

取值
	 let zujian = {
     // 接收变量
        props:['abc','xyz'],
        
        template:`
        <div class="box" @click="fn">
            <img :src="abc.img" alt="">
            <h2>锤了{{ abc.name }}{{ count }}下</h2>
            <!--<h3>{{ abc }}</h3>    必须是 :src,才能接收变量-->
        </div>
        `,

子传父

利用自定义方法来获取子组件的数据,this.$emit('自定义事件名',触发事件回调的参数们)

自定义组件标签的事件

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

• 子组件如何触发自定义事件:
  this.$emit('自定义事件名',触发事件回调的参数们)

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

• 触发自定义事件在自组件内部完成,触发自定义绑定方法是在父组件实现,在触发的过程中,将子组件参数带出来,父组件中完成逻辑
  

    <!--点击提交按钮进行修改标题-->
    <tag @action="actionfn"></tag>
    
    
    methods:{
            changetitle(){
                if (this.t1 && this.t2){
                    // 触发父事件 $emit('事件名',携带的参数)
                    this.$emit('action',this.t1,this.t2);
                    this.t1 = '';
                    this.t2 = '';
                }

代码实现标题的改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子传父</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="app">

    <h1>{{ h1 }}</h1>
    <h2>{{ h2 }}</h2>
    <!--点击提交按钮进行修改标题-->
    <tag @action="actionfn"></tag>
    <br>
    <hr>
    <br>
    <!--随时修改自动跟随标题-->
    <tag2 @h1a="afn1" @h2a="afn2"></tag2>
</div>
</body>
<script src="vue/vue.js"></script>
<script>
    let tag={
        template:`
                <div>
                    <input type="text" v-model="t1">
                    <input type="text" v-model="t2">
                    <button @click="changetitle"> 修改标题 </button>
                </div>
        `,
        data(){
            return {
                t1:'',
                t2:'',
            }
        },
        methods:{
            changetitle(){
                if (this.t1 && this.t2){
                    // 触发父事件 $emit('事件名',携带的参数)
                    this.$emit('action',this.t1,this.t2);
                    this.t1 = '';
                    this.t2 = '';
                }
            }
        }
    };

    let tag2={
        template:`
                <div>
                    修改主标题:<input type="text" v-model="t1" @input="t1fn">
                    修改副标题:<input type="text" v-model="t2" @input="t2fn">
                </div>
        `,
        data(){
            return {
                t1:'',
                t2:'',
            }
        },
        methods:{
            // 使用子传父的实现
            t1fn(){
                this.$emit('h1a',this.t1)
            },
        },
            // 利用监听来改变
        watch:{
            t2(){
                this.$emit('h2a',this.t2)
            }
        }
    };

// 父组件
    new Vue({
        el:'#app',
        data:{
            h1:'主标题',
            h2:'副标题',
        },
        components:{
            tag,
            tag2
        },
        methods:{
            actionfn(a,b){
                this.h1 =a;
                this.h2 =b;
            },
            afn1(a){
                if (!a){
                    this.h1='主标题';
                    this.h2='子标题';
                    return;
                }
                this.h1=a;
            },
            afn2(a){
                if (!a){
                    this.h1='主标题';
                    this.h2='子标题';
                    return;
                }
                this.h2=a;
            }
        }
    })
</script>
</html>

作业

"""
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被选中
"""

Vue项目环境的搭建

Vue项目环境搭建

"""
node ~~ python：node是用c++编写用来运行js代码的
npm(cnpm) ~~ pip：npm是一个终端应用商城，可以换国内源cnpm
vue ~~ django：vue是用来搭建vue前端项目的

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

2) 换源安装cnpm
>: npm install -g cnpm --registry=https://registry.npm.taobao.org

3) 安装vue项目脚手架
>: cnpm install -g @vue/cli

注：2或3终端安装失败时，可以清空 npm缓存 再重复执行失败的步骤
npm cache clean --force
"""

Vue项目创建

1) 进入存放项目的目录
>: cd ***

2) 创建项目
>: vue create 项目名

3) 项目初始化

pycharm配置并启动vue项目

1) 用pycharm打开vue项目
2) 添加配置npm启动

vue项目目录结构分析

├── v-proj
|	├── node_modules  	// 当前项目所有依赖，一般不可以移植给其他电脑环境
|	├── public			
|	|	├── favicon.ico	// 标签图标
|	|	└── index.html	// 当前项目唯一的页面
|	├── src
|	|	├── assets		// 静态资源img、css、js
|	|	├── components	// 小组件
|	|	├── views		// 页面组件
|	|	├── App.vue		// 根组件
|	|	├── main.js		// 全局脚本文件（项目的入口）
|	|	├── router
|	|	|	└── index.js// 路由脚本文件（配置路由 url链接 与 页面组件的映射关系）
|	|	└── store	
|	|	|	└── index.js// 仓库脚本文件（vuex插件的配置文件，数据仓库）
|	├── README.md
└	└── package.json等配置文件

vue组件(.vue文件)

# 1) template：有且只有一个根标签
# 2) script：必须将组件对象导出 export default {}
# 3) style: style标签明确scoped属性，代表该样式只在组件内部起作用(样式的组件化)

<template>
    <div class="test">
        
    </div>
</template>

<script>
    export default {
        name: "Test"
    }
</script>

<style scoped>

</style>

全局脚本文件main.js（项目入口）

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

改写

import Vue from 'vue'  // 加载vue环境
import App from './App.vue'  // 加载根组件
import router from './router'  // 加载路由环境
import store from './store'  // 加载数据仓库环境

Vue.config.productionTip = false
new Vue({
    el: '#app',
    router,
    store,
    render: function (readFn) {
        return readFn(App);
    },
});

Vue基础总结

"""
组件：
	组件概念：vue实例就是组件
	根组件、局部组件、全局组件
	组件传参：
		父传子：自定义组件属性
		子传父：自定义组件事件
	
实例成员：
	el、data、methods、computed、watch、filters、delimiters、props、template、components

指令：
	{{}}、v-text、v-html、v-once、v-on、v-model、v-bind、v-if、v-show、v-else-if、v-else、v-for、v-cloak
"""