day67 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;
            }
        }
    }
"""

补充

在data里,属性名与值为变量的变量名相同时,可以简写忽略值
data{
    scores
}
for in 遍历的是取值关键   |for of 遍历的是值
for (score of scores) {
        score.total = score.math + score.chinese + score.english;
    }//scores是一个列表套字典

组件

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

组件分类
根组件:new Vue() 生成的组件
局部组件:组件名={},{}内部采用的是Vue语法
全局组件:Vue.component(‘组件名’,{}),{}内部采用的是vue语法

组件特点:
1)组件都有管理组件html页面结构的 template 实例成员,template中有且只有一个根标签
2)根组件都是作为最顶层父组件,局部与全局组件作为子组件,也可以成为其他局部与全局组件的父组件
3)子组件的数据需要隔离(数据组件化,每个组件拥有自己数据的独立名称空间)
4)局部组件必须注册才能使用,全局组件不要需要注册,提倡使用局部组件
5)组件中出现的所有变量(模板中、逻辑中),都由该组件自己提供管理
6)局部全局和根组件都是一个vue示例,一个实例对应一套html、css、js结构,所以实例就是组件

总结:跟组件,可以不明确template,template默认采用挂载点页面结构;如果设置了template,挂载点内部的内容无效
解释:html、body标签不能被替换,所以不能作为挂载点

<body>
    <div id="app">
        {{ msg }}
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',//被组件template模块进行替换的占位符
        data:{
            msg:'组件信息'
        },
        template:'<p>{{ msg }}</p>'
    })
</script>

子组件

<body>
    <div id="app">
        <div class="wrap">
            <local-tag></local-tag>
            <global-tag></global-tag>
        </div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>

    //声明局部组件:局部组件要在其父组件中注册才能使用
    //1、声明组件    2、注册组件  3、渲染组件  全局组件不需要注册
    let localTag={
        template:`
        <div class="box" @click="fn">
            <img src="img/001.jpg" alt="">
            <h2>美女</h2>
        </div>`,
        method:{
            fn(){
                console.log(this)
            }
        }
    };

    Vue.component('global-tag',{
        template:`
        <div class="box" @click="fn">
            <img src="img/002.jpg" alt="">
            <h2>美女呀</h2>
        </div>`,
        methods:{
            fn(){
                console.log(this)
            }
        }
    })

    new Vue({
        el:'#app',
        data:{},
        components:{//注册组件
            localTag,
        }
    })
</script>
</html>

组件化

<body>
    <div id="app">
        <div class="wrap">
            <local-tag></local-tag>
            <local-tag></local-tag>
        </div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    let localTag={
        template:`
        <div class="box" @click="fn">
            <img src="img/002.jpg" alt="">
            <h2>锤了美女{{ count }}下</h2>
        </div>`,

        data(){//局部或全局组件,一个组件可能会被复用多次,每个组件都应该有自己独立的变量名称空间
            return {
                count:0,
            }
        },//数据需要组件化,作为方法的返回值(方法执行之后会产生一个局部作用域)
        methods:{
            fn(){
                this.count++
            }
        }
    }

    new Vue({
        el:'#app',
        data:{},
        components:{
            localTag,
        }
    })
</script>
</html>

组件传参-父传子

总结:
1)子组件可以通过props自定义组件属性(采用反射机制,需要填写字符串,但是使用时可以直接作为变量)
2)子组件会在父组件中渲染,渲染时,将父组件的变量绑定给子组件的自定义属性,就可以将变量值传递给子组件

<body>
    <div id="app">
        <local-tag v-for="dog in dogs" :dog="dog"></local-tag>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    let dogs=[
        {
            name:'美女一号',
            img:'img/001.jpg',
        },
        {
            name:'美女二号',
            img:'img/002.jpg',
        },
        {
            name:'美女三号',
            img:'img/003.jpg',
        },
        {
            name:'美女四号',
            img:'img/004.jpg',
        },
    ]

    let localTag={
        props:['dog','def','xyz'],

        template:`
        <div class="box" @click="fn">
            <img :src="dog.img" alt="">
            <h2>锤了{{ dog.name }}{{ count }}下</h2>
        </div>`,

        data(){
            return {
                count:0,
            }
        },
        methods:{
            fn(){
                this.count++
            }
        }
    }
    new Vue({
        el:'#app',
        data:{
            dogs
        },
        components:{
            localTag
        }
    })
</script>
</html>

组件传参-子传父

自定义组件标签的事件:
自定义事件是属于子组件的,子组件在父组件中渲染并绑定事件方法,所以事件方法由父组件来实现
子组件如何触发自定义事件:this.$emit('自定义事件名',触发事件回调的参数们)

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h1>{{ h1 }}</h1>
        <h2>{{ h2 }}</h2>
        <tag @action="actionFn"></tag>
        <hr>
        <tag2 @h1a="aFn1" @h2a="aFn2"></tag2>
    </div>
</body>
<script src="js/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){
                    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">
        </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='主标题';
                    return
                }
                this.h1=a;
            },
            aFn2(a){
                if (!a){
                    this.h2='子标题';
                    return
                }
                this.h2=a;
            }
        }
    })
</script>
</html>

vue基础知识

组件:
	组件概念:vue实例就是组件
    根组件、局部组件、全局组件
    组件传参:
    	父传子:自定义组件属性
        子传父:自定义组件事件
实例成员:
	el  data  methods  computed  watch  fileters  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

vue项目环境

vue~~django
node~~python
npm~~pip 
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
posted @ 2019-12-18 23:05  风啊风啊  阅读(106)  评论(0编辑  收藏  举报