Vue

目录

• Vue成员获取
• Vue原义指令
• Vue循环指令
• todolist案列
• Vue分隔符
• Vue计算属性成员
• Vue监听属性
• Vue组件
  • 根组件
  • 局部组件
  • 全局组件
  • 组件复用的数据隔离
  • 组件信息交互 - 父传子
  • 组件信息交互 - 子传父

Vue成员获取

获取自定义成员和methods时，用$options.成员来获取，

<div id="app">
    <h1 @click="btnClick">{{ msg }}</h1>
    <p>{{$data}}</p>
    <p>{{$options}}</p>
    <p>{{$options.myarr}}</p>
</div>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            msg: '数据'
        },
        methods: {
            btnClick() {
                console.log(this.msg)
            }
        },
        myarr: [1, 2, 3, 4]
    });
    console.log(app.msg);
    console.log(app.$data);
    console.log(app.$options.methods);
    console.log(app.$options.myarr)
</script>

Vue原义指令

<div class="app">
    <p v-pre>
        <!--v-pre的内部解除vue控制，都是原义输出：插值表达式不是插值表达式，变量也不是变量，vue指令也只是普通的属性-->
        {{msg}}
        <span v-on="abc"></span>
    </p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'msg'
        }
    })
</script>

Vue循环指令

<div id="app">
    <!--列表-->
    <p>{{arr}}</p>
    <div>
        <!--值遍历-->
        <p v-for="v in arr">
            <span>{{ v }}</span>
        </p>
        <!--值、索引遍历-->
        <p v-for="(v,i) in arr">
            <span>第{{ i+1 }}个值为：{{ v }}</span>
        </p>
    </div>

    <!--字典-->
    <p>{{ student }}</p>
    <div>
        <!--value遍历-->
        <p v-for="v in student">
            <span>{{ v }}</span>
        </p>
        <!--value、key遍历-->
        <p v-for="(v,k) in student">
            <span>{{ k }}:{{ v }}</span>
        </p>
        <!--value、key、索引遍历-->
        <p v-for="(v,k,i) in student">
            <span>{{ k }}:{{ v }}({{i}})</span>
        </p>
    </div>
</div>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            arr: [1, 2, 3, 4, 5],
            student:{
                'name':'Bob',
                'age':18,
                'gender':'男'
            }
        }
    })
</script>

todolist案列

<style>
    li:hover {
        color: red;
        cursor: pointer;
    }
</style>
<div id="app">
        <input type="text" v-model="info">
        <button @click="addMsg">留言</button>
    <ul>
        <li v-for="(msg,i) in msgs" @click="delMsg(i)">{{msg}}</li>
    </ul>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            info: '',
            msgs: JSON.parse(sessionStorage.msgs || '[]'),
        },
        methods: {
            addMsg() {
                if (this.info) {
                    this.msgs.unshift(this.info);
                    this.info = ''
                    sessionStorage.msgs = JSON.stringify(this.msgs);  // sessionStorage中不能直接存列表，需要先转成JSON字符串存入，在取得时候再解析回列表
                }
            },
            delMsg(i) {
                this.msgs.splice(i, 1)
                sessionStorage.msgs = JSON.stringify(this.msgs);
            }
        }
    })
</script>

Vue分隔符

<div id="app">{{msg}}</div>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'message'
        },
        // 修改插值表达式符号.在Django中的模块渲染中也是用的{{ }}。这样导致在取变量时有冲突，所以可以用delimiters来修改插值表达式符号
        delimiters:['[[','}}'],

    })
</script>

Vue计算属性成员

<div id="app">
    <input type="text" v-model="a">
    <input type="text" v-model="b">
    <span>{{xyz}}</span>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            a:'',
            b:''
        },
        // 1)计算后属性不需要再data中重复定义
        // 2）计算后属性必须渲染后，绑定的方法才会生效
        // 3）计算后属性绑定的方法中的任意变量值更新，方法都会被调用
        // 4）计算后属性为只读属性（不可写）
        computed:{
            xyz(){
                this.a;
                this.b;
                console.log('我被调用了')
            }
        },
        // 应用场景：一个计算后属性的值，可以来源于多个属性值

    })
</script>

Vue监听属性

<div id="app">
    <input type="text" v-model="num_a">
    <p>num_b:{{num_b}}</p>
    <p>num_c:{{num_c}}</p>
</div>
<script>
    // 1)监听绑定的属性，该属性可以get、set
    // 2)监听的属性一旦发生值更新，绑定的方法就会被调用
    // 3)监听的属性是已定义的属性（必须在data中定义）
    new Vue({
        el:'#app',
        data:{
            num_a:'',
            num_b:'',
            num_c:'',
        },
        watch:{
            // 很多变量依赖同一个变量值，给这个变量设监听函数来处理这些变量
            num_a(){
                console.log('num_a更新时，我被调用了')
                this.num_b = this.num_a*10;
                this.num_c = this.num_a*20
            }
        },
    })
</script>

Vue组件

组件：由template + css + js 三部分组成（.vue文件）

• 1）组件具有复用性
• 2）复用组件时，数据要隔离
• 3）复用组件时，方法不需要隔离，因为方法使用隔离数据就可以产生区别

根组件

// 组件介绍：
// 1）每一个组件都有自己的template(虚拟DOM)，最后要替换掉真实DOM（渲染）
// 2）挂载点el，在根组件没有规定template，用挂载的真实DOM拷贝出虚拟DOM,完成实例创建后再替换掉真实DOM
// 3）挂载点el，在根组件规定template，就采用自己的template作为虚拟DOM，挂载点还是必须的，用于占位
// 4）所有new Vue()产生的组件都称之为根组件 -> 项目开发时，整个项目都只有一个根组件
// 5）template只能解析一个根标签，根标签里可以有多个标签

<div id="app">
    <div>
        {{msg}}
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'message'
        },
        template: `
        <div class="main">
        <p>{{msg}}</p>
        <p>{{msg}}</p>
        </div>
        `
    })
</script>

局部组件

// 1) 创建组件
// 2) 注册组件
// 3) 渲染组件
<style>
    .ad {
         200px;
        margin: 5px;
        padding: 5px;
        box-shadow: 0 0 5px 0 gold;
        float: left;
    }
    .ad img {
         100%;
    }
    .ad h4 {
        text-align: center;
        font: normal 20px/30px '微软雅黑';
    }
</style>
<div id="app">
    <!-- 3) 渲染组件 -->
    <local-tag></local-tag>
    <local-tag></local-tag>
    <local-tag></local-tag>
    <local-tag></local-tag>
</div>
<script>
    // 1) 创建局部组件
    let localTag = {
        template: `
        <div class="ad">
            <img src="img/dog.jpg" alt="">
            <h4>可爱柯基</h4>
        </div>
        `
    };
    new Vue({
        el: '#app',
        // 2) 注册组件
        components:{
            // localTag:localTag
            localTag
        }
    })
</script>

全局组件

// 1）创建组件
// 2）渲染组件
<div>
    <div id="app">
        <global-tag></global-tag>
    </div>
    <div id="main">
        <global-tag></global-tag>
    </div>
</div>
<script>
    // 创建全局组件
    Vue.component('global-tag', {
        template: `
        <div class="ad">
            <img src="img/dog.jpg" alt="">
            <h4>可爱柯基</h4>
        </div>
        `
    });
    new Vue({el: '#app',});
    new Vue({el: '#main',})
</script>

组件复用的数据隔离

<div>
    <div id="app">
        <global-tag></global-tag>
        <local-tag></local-tag>
    </div>
    <div id="main">
        <global-tag></global-tag>
        <local-tag></local-tag>
    </div>
</div>
<script>
    let localTag = {
        template: `
        <div class="ad" @click="click1">
            <img src="img/dog.jpg" alt="">
            <h4>局部组件柯基点{{num}}次</h4>
        </div>
        `,
        data() {
            return {num: 0,}
        },
        methods: {
            click1() {this.num++}
        }
    };
    Vue.component('global-tag', {
        template: `
        <div class="ad" @click="click2">
            <img src="img/dog.jpg" alt="">
            <h4>全局组件柯基点{{count}}次</h4>
        </div>
        `,
        data() {
            return {count: 0,}
        },
        methods: {
            click2() {this.count++}}
    });
    new Vue({
        el: '#app',
        components: {localTag}
    });
    new Vue({
        el: '#main',
        components: {localTag}
    })
</script>

组件信息交互 - 父传子

<div>
    <div id="app">
        <local-tag :my_dic="ad" v-for="ad in ads" :key="ad.title"></local-tag>
    </div>
</div>
<script>
    let localTag = {
        props:['my_dic',],
        template: `
        <div class="ad">
            <img :src="my_dic.img" alt="">
            <h4>{{my_dic.title}}</h4>
        </div>
        `
    };
    let ads = [
        {
            img:'img/dog.jpg',
            title:'柯基1'
        },
        {
            img:'img/dog.jpg',
            title:'柯基2'
        },
        {
            img:'img/dog.jpg',
            title:'柯基3'
        },
    ];
    new Vue({
        el: '#app',
        components:{localTag,},
        data:{
            ads:ads,
        }
    })
    // 1）父级提供数据
    // 2）在父级模板中，为子组件标签设置自定义属性绑定父级数据
    // 3）在子级props成员中，接收自定义属性
    // 4）在子组件模板和方法中，使用自定义属性名就可以访问父级数据
</script>

组件信息交互 - 子传父

<div id="app">
    <p>
        <input type="text" v-model="info">
        <button @click="add_msg">留言</button>
    <ul>
        <msg-tag @del_action="del_li" :msg="msg" :index="i" v-for="(msg, i) in msgs" :key="msg"></msg-tag>
    </ul>
    </p>
</div>
<script>
    let msgTag = {
        props: ['msg', 'index'],
        template: `
        <li>
            <span @click="del_fn" class="del">x</span>
            <span>{{ msg }}</span>
        </li>
        `,
        methods: {
            del_fn() {
                this.$emit('del_action', this.index)
            }
        }
    };
    new Vue({
        el: '#app',
        components: {
            msgTag
        },
        data: {
            info: '',
            msgs: JSON.parse(sessionStorage.msgs || '[]'),
        },
        methods: {
            add_msg() {
                let info = this.info;
                if (info) {
                    this.msgs.unshift(this.info);
                    this.info = '';
                    sessionStorage.msgs = JSON.stringify(this.msgs);
                }
            },
            del_li(index) {
                console.log(index);
                this.msgs.splice(index, 1);
                sessionStorage.msgs = JSON.stringify(this.msgs);
            }
        }
    });
    // 分析数据 子传父
    // 1）子组件提供数据
    // 2）子组件通过系统事件激活自己的绑定方法，发送一个自定义事件，携带自身数据
    // 3）在父组件模板中的子组件标签中为自定义事件绑定父组件方法
    // 4）父组件实现方法获取到子组件数据
</script>