指令

复习

"""
vue:
	为什么选择vue - 综合其他框架优点,轻量级,中文API,数据驱动,组件化开发,数据的双向绑定,虚拟DO
	渐进式js框架 - 选择性控制 - 创建一个vue实例对象,关联一个挂载点
	
实例成员:
	el:body,html不能,通常用id,css3选择器语法
	data: 数据,字典形式
	filters:过滤器函数 fn(a, b) - {{ a | fn(b) }} | {{ a,b | fn }}
	methods: 事件方法
	
指令:
	文本:{{ }} | v-text | v-html
	事件:v-on:click="clickAction" | @click="clickAction" | @click="clickAction($event)"
	属性:v-bind:style="myStyle" | :class="[c1, c2]" | :class="{active: isActive}"
	表单指令:v-model="变量"
"""

v-once指令

"""
v-once:单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改)
"""
<div id="app">
    <input type="text" v-model="msg">
    <!-- 一旦赋值,只可主动更改 -->
    <input type="text" v-model="msg" v-once>
    <p>{{ msg }}</p>
    <!-- 一旦赋值,便不可更改 -->
    <p v-once>{{ msg }}</p>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '初始值'
        }
    })
</script>

v-cloak指令(了解)

"""
v-cloak:防止页面闪烁
"""
<style>
    [v-cloak] {
        display: none;
    }
</style>
<!-- 不处理的情况下,每次新价值该页面,都会先渲染{{}},当vue环境加载成功,{{}}有会被解析消失 -->
<!-- 处理后,vue环境没加载好时,#app是被隐藏的,vue环境加载成功,会依次#app的v-cloak属性,就不会出现{{}}渲染闪烁问题 -->
<div id="app" v-cloak>
    {{ }}
    {{ }}
    {{ }}
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
    })
</script>

条件指令

<!--
1) 两种都可以控制标签的显隐,绑定的值是布尔类型值,当都隐藏标签时
         v-if是不渲染标签
         v-show以 display:none 方式渲染
-->

<div id="app">
    <p v-if="isShow">if条件指令</p>
    <p v-show="isShow">show条件指令</p>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            isShow: false,
        }
    })
</script>

<!--
2) 	v-if="变量"
	v-else-if="变量"
	v-else
	一组分支,上成立分支会屏蔽下方所有分支,else分支没有条件,在所有分支不成立后才显示
-->

<style>
    .box {
        width: 400px;
        height: 300px;
    }
    .r { background-color: red; }
    .y { background-color: yellow }
    .b { background-color: blue; }
    .active {
        background-color: pink;
    }
</style>
<div id="app">
    <div class="em">
        <p>
            <button @click="changeBox('rBox')" :class="{active: showName == 'rBox'}"></button>
            <button @click="changeBox('yBox')" :class="{active: showName == 'yBox'}"></button>
            <button @click="changeBox('bBox')" :class="{active: showName == 'bBox'}"></button>
        </p>
        <p>
            <button @click="changeBox('rBox')" :class="showName == 'rBox' ? 'active' : ''"></button>
            <button @click="changeBox('yBox')" :class="showName == 'yBox' ? 'active' : ''"></button>
            <button @click="changeBox('bBox')" :class="showName == 'bBox' ? 'active' : ''"></button>
        </p>
        <div class="box r" v-if="showName == 'rBox'"></div>
        <div class="box y" v-else-if="showName == 'yBox'"></div>
        <div class="box b" v-else></div>
    </div>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            showName: 'rBox'
        },
        methods: {
            changeBox(name) {
                this.showName = name;
            }
        }
    })
</script>

在这里插入图片描述

v-pre指令(了解)

"""
v-pre指令可以在vue控制范围内,形成局部vue不控制区域(局部不解析vue语法)
"""
<div id="app">
    <p>{{ msg }}</p>
    <!-- v-pre 指令可以在vue控制范围内,形成局部vue不控制区域
	{{ }} 和 v-if 都会原样输出,不会被解析
	-->
    <p v-pre>
        {{ }}
        <span v-if="hehe"></span>
    </p>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'message'
        }
    })
</script>

循环指令

"""
1) 遍历字符串:可以只逐一遍历字符,也可以连同遍历索引
	<p v-for="ch in str"></p> | <p v-for="(ch, index) in str"></p>
	
2) 遍历数组:可以只逐一遍历成员元素,也可以连同遍历索引
	<p v-for="ele in arr"></p> | <p v-for="(ele, index) in arr"></p>
	
3) 遍历对象:可以只逐一遍历成员元素,也可以连同遍历成员键(key),还可以遍历成员key索引
	<p v-for="v in dic"></p> | <p v-for="(v,k) in arr"></p> | <p v-for="(v,k,i) in arr"></p>
"""
<div id="app">
    <p>{{ str }}</p>
    <p>{{ str[0] }}</p>
    <div>
        <span v-for="ch in str">{{ ch }}</span>
    </div>
    <div>
        <!--针对循环遍历的标签,通过会提供key属性来优化渲染速度,但key的值必须唯一(key可以不用提供) -->
        <span v-for="(ch, i) in str" :key="ch + i">{{ i }}{{ ch }}</span>
    </div>


    <div>
        <p v-for="(ele, i) in arr">{{ i }}{{ ele }}</p>
    </div>


    <div>
        <p v-for="ele in dic">{{ ele }}</p>
    </div>

    <div>
        <p v-for="(ele, k) in dic">{{ k }}:{{ ele }}</p>
    </div>

    <div>
        <p v-for="(ele, k, i) in dic">{{ i }}{{ k }}:{{ ele }}</p>
    </div>

</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            str: 'abc123呵呵',
            arr: [3, 4, 1, 2, 5],
            dic: {
                name: 'Tank',
                age: 80,
                gender: '哇塞',
            }
        }
    })
</script>

todolist留言板案例

"""
1) 留言就是往留言数组中添加数据,删除留言就是从留言数组中移除数据

2) 前台数据库:localStorage 和 sessionStorage
	localStorage永久保存数据
	sessionStorage临时保存数据(当所属页面标签被关闭,数据被清空)
	
3) 前台localStorage 和 sessionStorage数据库存储的值是字符串类型,所以要存放arr、dic等复杂数据需要JSON参与
"""
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        li:hover {
            color: red;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>
            <input type="text" v-model="userMsg">
            <button type="button" @click="sendMsg">留言</button>
        </p>
        <ul>
            <li v-for="(msg, index) in msgs" @click="deleteMsg(index)">
                {{ msg }}
            </li>
        </ul>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msgs: localStorage.msgs ? JSON.parse(localStorage.msgs) : [],  // 所有留言
            userMsg: '',  // 用户留言
        },
        methods: {
            sendMsg() {  // 留言事件
                // 尾增
                // this.msgs.push(this.userMsg);
                // 首增
                // this.msgs.unshift(this.userMsg);

                let userMsg = this.userMsg;
                if (userMsg) {
                    this.msgs.unshift(userMsg);  // 渲染给页面
                    localStorage.msgs = JSON.stringify(this.msgs);  // 同步到数据库
                    this.userMsg = '';  // 清空留言框
                }
            },
            deleteMsg(index) {
                // 开始索引  操作长度  操作的结果们
                this.msgs.splice(index, 1)
            }
        }
    })
</script>

<script>
    // localStorage['num'] = 10;
    // sessionStorage.num = 888;
    // console.log(localStorage.num);

    // localStorage.msgs = JSON.stringify(['1111', '2222']);
    // console.log(JSON.parse(localStorage.msgs));
    // console.log(JSON.parse(localStorage.msgs)[0]);
</script>

</html>

实例成员 - 插值表达式符号(了解)

<div id="app">
    {{ msg }}
    {[ msg ]}
</div>
<script>
new Vue({
    el: '#app',
    data: {
        msg: '12345'
    },
    // delimiters: ['{{', '}}'],
    delimiters: ['{[', ']}'],
})
</script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值