VUE-02

Posted 2020-11-26 afrafre

VUE - 02

VUE使用：
1. html 引入vue
2. new Vue({el: '#app'})  # 挂载点
3. 成员 data,methods:{}
4. 内容指令
-- 插值表达式 {{ 变量表达式 }}
-- 过滤器 {{ 变量表达式 | 过滤器 }}  {{ a,b | f(c,d) | f1 }}
   Vue.filter('f',function(a,b,c,d){return a+b})
-- 文本指令 v-text='变量'  v-html= '变量' v-once='变量' 只是原始值
5. 属性指令  v-bind:style='变量'   简写： ：class='变量'  {c1: x1} x1为true或false,表示c1是否存在 [c1,c2 ] 表示双类名
6. 事件指令  v-on:click='方法' 简写： @mouseover = '方法（$event,$data）'
7. 表单指令： v-model='变量' （单选框：   复选框    选中非选中）
8. 条件指令： v-if | v-show | v-if v-else-if v-else
    
-- 

options - 成员获取

# 直接拿不到的成员，使用options去拿
new Vue({
        el: '#app',
        data:{
            msg:'数据'
        },
        methods:{
            btnClick(){
                console.log(this.msg)
            }
        },
        arr: [1,2,3,4],
        filters:{  #filter的第二种写法
            add(v){
                return v+1
            }
        }
    })

# 外界想访问data, 必须 let app = new Vue     console.log(app.msg)  app.$data
# 使用options去拿成员， data,methods, arr等   app.$options.arr 
{{ $options.arr }} 

v-pre 原义指令

# 跳过编译过程，直接显示标签的原内容
<span v-pre> {{ msg }}</span>  # 显示 {{ msg }} 

# v-pre 内部接触vue控制
<span v-pre> 
        {{ msg }}
        <p v-on="abc"></p>   # v-on没有了特殊含义，只是一个属性名
    </span>

for - 循环指令

# 值
<div>
    <p v-for="v in arr">
        <span>{{ v }}</span>
    </p>
</div>

# 索引
<div>
    <p v-for="(v,i) in arr">
        <span>第{{ i+1 }}个值:{{ v }}</span>
    </p>
</div>

# 字典
<div>
        <p v-for="(v,k，i) in student">
            <span>
                {{ k,v | f1 }}   # 过滤器返回
            </span>
        </p>
    </div>
# 循环套循环    
<div>
            <!--
            name: Bob | aendge:18 | ger:男
            name: Tom | age:1 | gender:男
            -->
            <p v-for="stu in stus">
                <!--<span v-for="(v, k, i) in stu">{{i?' | ':''}}{{k}}:{{v}}</span>-->
                <span v-for="(v, k, i) in stu">{{i|f2}}{{k}}:{{v}}</span>
            </p>
        </div>

delimiters: 分隔符

# Django模板中也可以导入vue 使用，但是 {{}} 的用法就会冲突
# 为了解决冲突问题，使用delimiters分隔符
new Vue({
        el: '#app',
        delimiters:['[[',']]'],       # delimiters:['$[',']']
        data:{
            msg:'message'
        }
}
使用： [[ msg ]]

计算属性成员

# 使用场景： 一个计算后属性的值，可以来源于东哥属性值
# 检测某个值变化，可以设置回调的方法
 <p>
        <input type="text" v-model="a">
        <input type="text" v-model="b">
</p>
{{ letter_change }}

new Vue({
        el: '#app',
        data: {
            msg: '数据',
            a: '',
            b: ''
        },
        computed:{
            letter_change(){
                this.a;   // 实时监控a的变化
                console.log('变量a发生了变化')
            }
        }

    })
# 注意点：
1. 计算后属性letter_change不能再data中重复定义
2. 计算后属性必须渲染后，绑定方法才能生效
3. 计算后属性绑定的方法中任意变量值发生变化（a）， 方法被调用
4. 计算后属性为只读属性，不可写
<input type="text" v-model="letter_change">  # 报错，因为letter_change只读

# 监听姓名变化
 <p>
      姓：<input type="text" v-model="firstname">
      名：<input type="text" v-model="lastname">
  </p>

    {{ full_name }}
computed:{
    full_name(){
        if (this.firstname && this.lastname){
            return this.firstname + ' ' + this.lastname
        }else{
            return '姓名'
        }
    }
}

监听某个变量，修改另外变量

# b的值永远是a的值的十倍
data: {
    num_a: '',
    num_b: '',
    num_c: '',
},
watch:{
    // 监听绑定的属性,该属性可以get,set
    // 监听的属性一点发生值更新，绑定的方法会调用
    num_a(){
        console.log('发生了变化');
        this.num_b = this.num_a*10;
        this.num_c = this.num_a * 20;
    }
}

todolist

<p>
    <input type="text" v-model="info">
    <button @click="btnClick">添加</button>
    <ul>
        <li v-for="(m,i) in msg" @click="delFun(i)">{{m}}</li>
    </ul>
</p>

new Vue({
        el: '#app',
        data: {
            info: '',
            msg: JSON.parse(sessionStorage.msg || '[]'),

        },
        methods: {
            btnClick() {
                let info = this.info;
                if (info) {
                    // msg中添加info,尾增
                    this.msg.push(this.info);
                    // sessionStorage 不能存列表，用json转换
                    // sessionStorage.msg = this.msg;
                    sessionStorage.msg = JSON.stringify(this.msg);
                    // 首增
                    // this.msg.unshift(this.info);

                    // 清空留言框
                    this.info = '';

                }

            },
            delFun(i) {
                // 从第零位开始，操作0位，操作为1
                // 从第i为开始，操作一位，操作为空
                this.msg.splice(i,1);
                sessionStorage.msg = JSON.stringify(this.msg);

            }

        }
# sessionStorage不能存储列表，需要json转换

组件

# 由template + css + js 组成
-- 组件具有复用性
-- 复用组件是，数据要隔离
-- 复用组件时，方法不需要隔离，因为方法使用隔离数据
# 组件介绍
1. 每一个组件都有自己的template(虚拟DOM)，最后替换真实DOM渲染
2. 挂载点el, 根组件没有规定template,就挂载的真实DOM拷贝出虚拟DOM
3. 挂载点el,根组件规定template, 采用自己的template作为虚拟DOM
4. 所有的new Vue() 产生的组件都称之为根组件，项目开发，只有一个根组件
5. template只能解析一个跟标签

# 类似后端的展位符   '%s%s'%(name,age)
前端写法： `${name}:${age}`

局部组件

# 根组件
new Vue({
        el: '#app',
        data: {},
    })

1. 创建组件
let locatTag = {
    
}
2. 注册组件
new Vue({
    el: '#app',
    components: {
        ad:localTag,
    }
})
3. 使用,渲染组件
<ad></ad>  # 页面中以标签形式

# 不支持大写，如果使用大写，如下
localTag: localTag
简写： localTag
使用： <local-tag></local-tag> 

全局组件

全局组件：
1. 创建组件
//全局组件
    Vue.component('global',{
        template: `
        <div class="dog">
       <img src="img/dog.jpg" alt="">
       <h1>全局标题</h1>
   </div>
`
    });
2. 使用
<global></global>

复用组件的数据隔离

    //局部组件
    let localTag = {
        template: `
        <div class="dog" @click="click1">
       <img src="img/dog.jpg" alt="">
       <h1>标题点击了{{ num }}次</h1>
   </div>
`,
        methods: {
            click1() {
                this.num ++
            }
        },
        data(){   # 数据要隔离开，使用方法，每次创建一个新的作用域
            return {
                num:0
            }
        }
    };

    //全局组件
    Vue.component('global', {
        template: `
        <div class="dog" @click="click2">
       <img src="img/dog.jpg" alt="">
       <h1>全局标题{{count}}次</h1>
   </div>
`,
        methods: {
            click2() {
                this.count++
            }
        },
        data(){
            return {
                count:0
            }
        }
    });

数据传递- 父传子

1. 父级提供数据
new Vue({
    el: '#app',
    data:{
        // 父组件的数据要传给子组件
        ads:ads  // 数据由后台返回的
    },
    components:{
        localTag
    }
})
2. 父级模板中，为子组件标签设置自定义属性 ad_dic, 绑定父级数据
<local-tag :ad_dic="ad" v-for="ad in ads" :key="ad.title"></local-tag>

3. 在子级props中接收自定义属性
//局部组件
    let localTag = {
        props:['ad_dic'],
        template: `
        <div class="dog" >
       <img :src="ad_dic.img" alt="">  # 这里访问父级数据
       <h1>{{ ad_dic.title }}</h1>
   </div>
`,
4. 在子组件模板和方法中使用自定义属性名，就可以访问父级数据     
        
'''
注意： 自定义属性： ad-dic, 在使用中 adDic
'''

组件信息交互-子传父

# 先渲染父组件，然后渲染子组件
# 子组件主动设置激活事件，告诉子组件的数据拿到了，传给父组件
<div id="app">
    <p>
        <input type="text" v-model="info">
        <button @click="btnClick">添加</button>

    <ul>
        <!--自定义事件 @delAction-->
        # 第四步： 在父级为自定义事件绑定父级方法
        <msg-tag @del_action="del_li" :msg="m" :index="i" v-for="(m,i) in msg" :key="m.info"></msg-tag>
    </ul>

    </p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    let msgTag = {
        # 子组件产生数据
        props:['msg','index'],
        template:  `
         <li>
            // 这里需要把要删除的index传递过来
        # 第一步： 点击子组件中标签，触发子组件delFun方法
            <span class="del" @click="delFun">x</span>
            <span>{{msg}}</span>
        </li>
        `,
        methods:{
            # 第二步： 子组件中设置delFun方法
            # 激活自定义事件，将参数index 传出去
            delFun(){
                // alert(this.index)
                // 点击子级标签，触发delFunc, 这个方法触发了一个事件delAction(并带了一个参数）
                this.$emit('del_action',this.index)
            }
        }
    };
    new Vue({
        el: '#app',
        components:{
            msgTag
        },
        data: {
            info: '',
            msg: JSON.parse(sessionStorage.msg || '[]'),

        },
        methods: {
            btnClick() {
                let info = this.info;
                if (info) {
                    this.msg.push(this.info);
                    sessionStorage.msg = JSON.stringify(this.msg);
                    this.info = '';
                }
            },
            # 第五步： 父级实现方法，接收子组件传递的方法
            del_li(i){
                console.log(i)
                // 删除index为i的标签
                this.msg.split(i,1);
                sessionStorage.msg = JSON.stringify(this.msg)
            }
        }
    })
</script>

'''
子组件提供数据
子组件通过系统事件激活自己的绑定方法，发送一个自定义事件， 携带自身数据
在父组件模板中的子组件标签中为自定义事件绑定父组件方法
父组件实现方法获得子组件数据
'''