复习

"""
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 및 집계,

부품 종류
루트 요소 : 새로운 새로운 뷰 () 컴포넌트에 의해 생성 된
서브 조립체 요소 이름 = {}, {} 문법 뷰 내부 용도
글로벌 성분 : Vue.component ( '성분 이름 ", {}), {} 내부에서 사용 구문은 VUE입니다

: 구성 요소 특징
, 1) 구성 요소 관리 템플릿 HTML 페이지 구조 구성 요소의 인스턴스 멤버가 템플릿은 오직 하나 개의 루트 태그가
루트 구성 요소와 2) 최상위 부모 구성 요소, 지역 및 하위 구성 요소 등 글로벌 부품, 다른이 될 수있다 부모 컴포넌트의 로컬 및 글로벌 성분
3) 데이터 서브 어셈블리는, 각 성분)의 별도의 공간 데이터가 분리 (컴포넌트 기반의 데이터를 필요로
로컬 구성 요소를 사용하기 위해 등록되어야 함) (4), 글로벌 요소가 레지스터 로컬 구성 요소의 사용을 촉진하지 않아도을
모든 변수 (템플릿 로직) 관리 구성 요소 자체 제공 5) 성분이 일어나
6) 로컬 및 글로벌 성분 루트 VUE 예, HTML, CSS, JS 구조 예들의 대응하는 세트의 인스턴스이다 그것은 구성 요소입니다

요약 : 명확하지 템플릿, 템플릿 기본값 포인트 페이지 구조를 장착 할 수 있습니다 구성 요소, 당신은 템플릿을 설정 한 경우, 내부 포인트 무효의 내용을 마운트
설명 : 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) 조립체 맞춤 부품 특성 (반사를 사용하여 문자열을 작성하는 것이 아니라 사용하는 경우 직접) 변수로서 사용될 수있다 소품 의한
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>

조립 매개 변수 전달 - 부모 아이 통과

사용자 정의 컴포넌트 태그 이벤트 :
사용자 정의 이벤트가 조립 부모의 하위 구성 요소, 서브 어셈블리 및 바인딩 이벤트 렌더링 방식의 일부 달성하기 위해 상위 구성 요소에 의해 이벤트 방법
(트리거 사용자 정의 이벤트 :.이 $의 발광을 하위 무엇 '사용자 정의 이벤트 이름', 이벤트 트리거 매개 변수는 콜백 있습니다)

서브 어셈블리는 메시지가 상위 구성 요소에 전달받을 사용자 정의 이벤트, 컨텐츠 서브 어셈블리, 부모 구성 요소 내에서 사용자 정의 이벤트 메소드 구현, 서브 - 어셈블리를 수행하는 트리거

<!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

day67의 VUE 구성 요소

꾸러미

하위

컴포넌트 화

매개 변수는 구성 요소를 통과 - 아버지가 아들에게

조립 매개 변수 전달 - 부모 아이 통과

VUE 프로젝트 환경

추천