vue学习 条件、循环指令、computed、watch、局部、全局、组件间交互

1.条件指令

<div id="app">
    <p v-if="r1" key="p_r1">if条件</p>
    <p v-show="r2">show条件</p>
    <!--{{ num + 1 - 5 * 2 + '好的' }}-->
    
    <ul>
        <!--v-else会默认与v-if等有条件的分支绑定-->
        <!--v-else-if必须由条件才和有条件v-if分支绑定-->
        <li v-if="tag == 1">111</li>
        <li v-else-if="tag == 2">222</li>
        <li v-else>333</li>
    </ul>

    <ul>
        <li @click="action('a')">a</li>
        <li @click="action('b')">b</li>
        <li @click="action('c')">c</li>
    </ul>
    
    <ul>
        <li v-show="flag == 'a'">aaa</li>
        <li v-show="flag == 'b'">bbb</li>
        <li v-show="flag == 'c'">ccc</li>
    </ul>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 10,
            r1: false,
            r2: false,
            tag: 2,
            flag: 'a'
        },
        methods: {
            action: function (s) {
                this.flag = s   //实现点击事件切换显示的数值
            }
        }
    })
</script>

　　

2、循环指令

<div id="app">
    <p>{{ nums[2] }}</p>
    <ul>
        <!-- 只遍历值 -->
        <li v-for="num in nums">{{ num }}</li>
    </ul>

    <ul>
        <!-- 值与索引 -->
        <li v-for="(num, index) in nums">{{ num }} {{ index }}</li>
    </ul>

    <ul>
        <!-- 值，键，索引 -->
        <li v-for="(v, k, i) in people">{{ v }} {{ k }} {{ i }}</li>             // 成行打印
    </ul>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            nums: [5, 3, 2, 1, 4],
            people: {
                'name': 'Owen',
                'age': 17.5,
                'gender': 'others'
            }
        }
    })
</script>

　　

3、Vue里的splice的用法


splice(start: number, deleteCount: number, ...items: T[]): T[];
    
   eg1:
    k = [1,2,3,4,5]
    k.splice(0,0,11，22)  # 从索引为0的位置，操作0位，将其元素改变为括号内第三个元素及其后的元素   结果如下：
    k=[11, 22, 1, 2, 3, 4, 5]
    
   eg2：
	k = [1,2,3,4,5]
    k.splice(1,2,22,33)
    结果如下：
    k = [1,22,33,4,5]

　　

4、评论案例         通过ajax拿到值，应该可以更好的处理评论楼的样式


<style>
    span {
        margin-left: 100px;
        cursor: pointer;    //  改变光标的类型，效果明显
        color: green;
    }
    span:hover {
        color: red;
    }
</style>

<div id="app">
    <p>
        <input type="text" v-model="val">
        <button @click="add">评论</button>
    </p>
    <ul>
        <li v-for="(info, i) in infos">
            {{ info }}
            <span @click="del(i)">x</span>
        </li>
    </ul>
</div>

<script src="js/vue.js"></script>

<script>
    new Vue({
        el: '#app',
        data: {
            infos: [],  // 管理所有留言
            val: ''  // 管理当前留言
        },
        methods: {
           
            add: function () {
                let val = this.val;
                if (val) {
                    this.infos.splice(0, 0, val);  // 留言
                    this.val = ''  // 输入框置空
                }
            },
             del: function (i) {
                // splice: 从哪个索引开始  操作的位数  操作成的结果(可变长)
                this.infos.splice(i, 1)  // 删除留言
            }
        }
    })
</script>

　　

5、实例成员之computed


<div id="app">
    <p>
        姓：<input type="text" v-model="first_name">
        名：<input type="text" v-model="last_name">
    </p>
    <p>
        姓名：<b>{{ full_name }}</b>
    </p>
</div>


<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            first_name: '',
            last_name: '',
        },
        computed: {
            // 1.在computed中定义的变量的值等于绑定的函数的返回值
            // 2.绑定的函数中出现的所有vue变量都会被监听
            full_name: function () {
                console.log('被调用了');  //输入框内的数值只要改变，就会打印该字符串
                return this.first_name + this.last_name;
            }
        }
    })
</script>

　　

6、实际例成员之watch

<div id="app">
    <p>
        姓名：<input type="text" v-model="full_name">
    </p>
    <p>
        姓：<b>{{ first_name }}</b>
        名：<b>{{ last_name }}</b>
    </p>
</div>


<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            full_name: '',
            first_name: '',
            last_name: ''
        },
        watch: {
            // 1.后方绑定的函数就是监听前方的变量，变量值改变，函数被调用
            full_name: function () {
                let res = this.full_name.split('');
                this.first_name = res[0];
                this.last_name = res[1];
            }
        }
    })

　　

7、解决插值表达式符号冲突

<div id="app">
    ${ msg }   // 设置完后，其值为 ‘12345’
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '12345'
        },
        delimiters: ['${', '}']   // 设置完后，可以利用该方式在vue里使用
    })
</script>

　　

总结：

指令：
文本：{{}} v-text v-html v-once
属性：v-bind:href  |  :href  :class='c1'  :class='[c1, c2]'  :style='s1'  
		（s1={color: "red"}）
事件：v-on:click  |  @click   @click="action" @click="action(msg)" @click="action($event)"
表单：v-model
条件：v-show  v-if v-else-if v-else
循环：v-for="(value, index) in list"   v-for="(value, key, index) in dict"

成员:
el：挂载点
data：数据
methods：方法
computed：计算 -- 监听方法内所有的变量，返回值给绑定的变量，该变量无需在data中声明
watch：监听 -- 监听绑定的变量，绑定的变量必须在data中声明

　　

8、组件

组件：有html模板，有css样式，有js逻辑的集合体
每一个组件都是一个vue实例
每个组件均具有自身的模板template，根组件的模板就是挂载点，子组件必须自己定义template(局部子组件、全局子组件
每个组件模板只能且必须拥有一个根标签
子组件的数据具有作用域，以达到组件的复用

　　

9、根组件


<div id="app">
    <h1>{{ msg }}</h1>
</div>
<script type="text/javascript">
	// 通过new Vue创建的实例就是根组件(实例与组件一一对应,一个实例就是一个组件)
	// 每个组件组件均拥有模板,template
	var app = new Vue({
		// 根组件的模板就是挂载点
		el: "#app",
		data : {
			msg: "根组件"
		},
		// 模板: 由""包裹的html代码块,出现在组件的内部,赋值给组件的$template变量
		// 显式书写模块,就会替换挂载点,但根组件必须拥有挂载点
		template: "<div>显式模板</div>"
	})
	// app.$template
</script>

　　

10、局部组件



<div id="app">
    <!--div.box>h1{标题}+(p.p${文本内容}*2)-->   // 生成标签的快捷方式
    <abc></abc>   //  两个局部组件，数据并不同步
    <abc></abc>
</div>
<script src="js/vue.js"></script>
<script>
    // 定义局部组件
    let localTag = {
        // 1.data要达到组件的复用，必须为每个组件提供一个名称空间(作用域)
        // 2.data的值就是一个存放数据的字典
        // 需要满足1和2，data值为一个可以产生名称空间的函数的返回值，返回值是字典
        data: function () {
            return {
                count: 0,
                // r: ''
            }
        },
        template: `
        <div class="box" style="border: solid;  100px">
            <h1>标题</h1>
            <p class="p1">文本内容</p>
            <p @click="action" class="p2" style="background: yellowgreen">被点击了{{ count }}下</p>
            <button @click="send">提交</button>
        </div>
        `,
        methods: {
            action: function () {
                this.count++
            },
            // 结合JQ完成组件与后台的交互
            // send: function () {
            //     $.ajax({
            //         url:,
            //         type:,
            //         data:，
            //         success: function (result) {
            //             this.r = result
            //         }
            //     })
            // },
            // watch: {
            //     r: function () {
            //
            //     }
            // }
        }
    };

    new Vue({
        el: '#app',
        data: {
        },
        // 局部组件必须注册
        components: {
            'abc': localTag
        }
    })
</script>

　　

11、全局组件


<div id="app">
    <!--在标签中建议使用 - 语法命名，对应js中就是驼峰命名-->
    <old-boy></old-boy>
</div>

<script src="js/vue.js"></script>
<script>
    // Vue.component(组件名, {组件主体});
    Vue.component('oldBoy', {
        data: function () {
            return {
                count: 0
            }
        },
        template: `
        <div class="box" style="border: solid;  100px">
            <h1>全局</h1>
            <p class="p1">文本内容</p>
            <p @click="action" class="p2" style="background: yellowgreen">被点击了{{ count }}下</p>
        </div>
        `,
        methods: {
            action: function () {
                this.count++
            },
        }
    });
    // 全局组件无需注册
    new Vue({
        el: '#app',
        data: {

        }
    })
</script>

　　

12、组件间的交互：父传子


<div id="app">
    <!-- local-tag就可以理解为自定义标签，msg变量值由父组件提供 -->
    <!-- local-tag标签代表的是子组件，owen为标签的自定义属性 -->
    <!-- 在子组件内部能拿到owen，就可以拿到父组件的信息 -->
    <local-tag :owen="msg"></local-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    let localTag = {
        // 子组件拿到父级自定义属性
        props: ['owen'],
        template: `
        <div>
            <h1>信息</h1>
            <p>{{ owen }}</p>
        </div>
        `
    };

    new Vue({
        el: '#app',
        data: {
            msg: '父级的信息'
        },
        components: {
            // 'localTag': localTag,  当二者同名时，可以简写
            // localTag: localTag,
            localTag  // 在页面中 <local-tag>
        }
    })
</script>

　　

13、 组件间的交互：子传父

通过发送事件请求的方式进行数据传递

<div id="app">
    <h1>{{ title }}</h1>
    <global-tag @recv="get_title"></global-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    Vue.component('global-tag', {
        template: `
        <div>
            <input type="text" v-model="msg">
            <!--<button @click="action">修改标题</button>-->
        </div>
        `,
        data: function () {
            return {
                msg: ''
            }
        },
        methods: {   //  这种更原始
            // action: function () {
            //     let msg = this.msg;
            //     // recv是自定义的事件
            //     this.$emit('recv', msg)
　　　　　　　　　　　　// $emit 触发父级自定义事件 ，将值传给这个事件
            // }
        },
        watch: {   //这种更简单
            msg: function () {  // 只要msg只有变化，就将值同步给父组件
                this.$emit('recv', this.msg)
            }
        }
    });

    new Vue({
        el: '#app',
        data: {
            title: '父组件定义的标题'
        },
        methods: {
            get_title: function (msg) {
                this.title = msg
            }
        }
    })
</script>