Vue框架(二)——Vue指令(v-once指令、v-cloak指令、条件指令、v-pre指令、循环指令)、todolist案例、Vue实例(计算、监听)、组件、组件数据交互

Vue指令

1、v-once指令  单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改)

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <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>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            msg:'初始值'
        }
    })
</script>
</html>

2、v-cloak指令(了解)   防止页面闪烁

1.不处理的情况下,每次新开该页面,都会先渲染{{ }},会闪烁一下,当vue环境加载成功,{{ }}又会被解析消失。

2.处理后,vue环境没加载好时,#app是被隐藏的,vue环境加载成功,会依次#app的v-cloak属性,就不会出现{{ }}渲染闪烁问题。
<style>
    [v-cloak] {
        display: none;
    }
</style>

<div id="app" v-cloak>
    {{ }}
    {{ }}
    {{ }}
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
    })
</script>

3、条件指令

v-if / v-show

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

v-if / v-else-if / v-else

v-if='变量'
v-else-if='变量'
v-else
一组分支,上分支成立会屏蔽下方所有分支,else分支没有条件,在所有分支不成立后才显示出来

条件指令小案例:点击颜色按钮,下面方框生成对应的颜色

按钮绑定一个点击事件changeBox,根据showName生成对应的颜色框

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            height: 400px;
            width: 300px;
        }
        .r {
            background-color: red;
        }
        .y {
            background-color: yellow;
        }
        .b {
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="em">
            <p>
                <!--第一种指定按钮颜色变化-->
                <!--<button @click="changeBox('rBox')" :class="showName == 'rBox' ? 'r':''">红</button>-->
                <!--<button @click="changeBox('yBox')" :class="showName == 'yBox' ? 'y':''">黄</button>-->
                <!--<button @click="changeBox('bBox')" :class="showName == 'bBox' ? 'b':''">蓝</button>-->
                <!--第二种指定按钮颜色变化-->
                <button @click="changeBox('rBox')" :class="{r:showName=='rBox'}">红</button>
                <button @click="changeBox('yBox')" :class="{y:showName=='yBox'}">黄</button>
                <button @click="changeBox('bBox')" :class="{b:showName=='bBox'}">蓝</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>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            showName:'rBox'
        },
        methods:{
            changeBox(name){
                this.showName=name
            }
        }
    })
</script>
</html>

 4、v-pre指令(了解)

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

5、循环指令 v-for

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) 遍历字典:可以只逐一遍历值(value),也可以连同遍历成员键(key),还可以遍历成员key索引
  依次遍历value,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">
    <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> #依次取出字典的value,key,key索引 </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永久保存数据  (这次案例以localStroage保存)
    sessionStorage临时保存数据(当所属页面标签被关闭,数据被清空)
3) 前台localStorage 和 sessionStorage数据库存储的值是字符串类型,所以要存放arr、dic等复杂数据需要JSON参与

点击留言按钮就把输入框中的留言保存在下面,再点击留言就是删除

push是尾增,unshift是首增

<!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">  #获取输入框的值userMsg并且传递给data
            <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>
</html>

Vue实例

1、插值表达式符号(delimiters) 了解

生成插值表达式显示的符号

<div id="app">
    {{ msg }}  //显示 {{msg}}
    {[ msg ]}  //显示 12345
</div>
<script>
new Vue({
    el: '#app',
    data: {
        msg: '12345'
    },
    // delimiters: ['{{', '}}'],
    delimiters: ['{[', ']}'],
})
</script>

2、计算实例  computed   计算是把多个事件合成一个(监听多个合成一个)

// 1) computed是用来声明 方法属性 的
// 2) 声明的方法属性不能在data中重复定义
// 3) 方法属性必须在页面中渲染使用,才会对内部出现的所有变量进行监听
// 4) 计算属性的值来源于监听方法的返回值

把两个输入框的值合并,用{{flName}}渲染出来

<div id="app">
    姓:<input type="text" v-model="fName">
    名:<input type="text" v-model="lName">
    姓名:<b>{{ flName }}</b>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            fName: '',
            lName: '',
        },
        computed: {
            flName(){
                // this.fName和this.lName有值发送改变,该方法都会被调用
                // 变量flName的值是由函数的返回值决定
                return this.fName + this.lName;
            }
        }
    })
</script>

3.监听实例   watch

// 1) watch为data中已存在的属性设置监听事件
// 2) 监听的属性值发送改变,就会触发监听事件
// 3) 监听事件的方法返回值没有任何意义

监听一个值,然后拆成两份

<div id="app">
    姓名:<input type="text" v-model="fullName">
    姓:<b>{{ firstName }}</b>
    名:<b>{{ lastName }}</b>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            fullName: '',
            firstName: '',
            lastName: '',
        },
        watch: {
            // fullName值改变,就会调用绑定的事件方法
            fullName() {
                nameArr = this.fullName.split('');  //拆分
                this.firstName = nameArr[0];
                this.lastName = nameArr[1];
            }
        }
    })
</script>

 组件

// 1) 组件:一个包含html、css、js独立的集合体,这样的集合体可以完成页面解构的代码复用
// 2) 分组分为根组件、全局组件与局部组件
//      根组件:所有被new Vue()产生的组件,在项目开发阶段,一个项目只会出现一个根组件
//      全局组件:不用注册,就可以成为任何一个组件的子组件
//      局部组件:必须注册,才可以成为注册该局部组件的子组件
// 3) 每一个组件都有自身的html结构,css样式,js逻辑
//      每一个组件其实都有自己的template,就是用来标识自己html结构的
//      template模板中有且只有一个根标签
//      根组件一般不提供template,就由挂载点的真实DOM提供html结构
// 4) 除根组件的其他组件,数据要有局部作用域,保证组件复用时,各组件间数据的独立性
// 5) 在多组件共处时,在哪个组件模板中出现的变量,有当前组件组件提供

1、局部组件

// 1) 创建局部组件
// 2) 在父组件中注册该局部组件   根组件称为父组件
// 3) 在父组件的template模板中渲染该局部组件
<style>
    .box {
        box-shadow: 0 3px 5px 0 #666;
        width: 240px;
        height: 300px;
        text-align: center;
        padding: 20px 0;
        float: left;
        margin: 5px;
    }
    .box img {
        width: 200px;
    }
</style>
<div id="app">
    <!--<mcc></mcc>-->
  //3.在父组件模板中渲染局部组件 <local-tag></local-tag> <local-tag></local-tag> </div> <script src="js/vue.js"></script> <script>

  //1.创建局部组件 let localTag = { template: ` <div class="box"> <img src="img/666.jpg" alt=""> <h3>凤哥</h3> <p>马叉虫❤马叉虫</p> </div> ` }; new Vue({ el: '#app', components: { //2.在父组件中注册局部组件 // mcc: localTag, // localTag, 'local-tag': localTag, } }) </script>

2.全局组件

// 1) 创建全局组件
// 2) 在父组件的template模板中直接渲染该全局组件
<style>
    .box {
        box-shadow: 0 3px 5px 0 #666;
        width: 240px;
        height: 300px;
        text-align: center;
        padding: 20px 0;
        float: left;
        margin: 5px;
    }
    .box img {
        width: 200px;
    }
</style>
<div id="app">
  //2.父组件模板渲染全局组件 <global-tag></global-tag> <global-tag></global-tag> <global-tag></global-tag> </div> <script src="js/vue.js"></script> <script>
   //1.注册全局组件 Vue.component('global-tag', { template: ` <div class="box" @click="action"> <img src="img/666.jpg" alt=""> <h3>凤哥</h3> <p>马叉虫❤{{ num }}</p> </div> `, data () { return { num: 0 } }, methods: { action() { this.num++; } } }); new Vue({ el: '#app', }) </script>

3、组件交互-父传子(父组件提供数据)

// 数据交互 - 父传子 - 通过绑定属性的方式
// 1) 父组件提供数据
// 2) 在父组件模板中,为子组件标签设置自定义属性,绑定的值由父组件提供
// 3) 在子组件实例中,通过props实例成员获得自定义属性

使用父组件的数据,在子组件的模板上进行渲染。

1.先创建局部组件 2.在父组件中注册局部组件(components)3.在父组件模板中渲染出局部组件,为子组件标签设置自定义属性,自定义属性的值由父组件提供 4.在子组件实例中,通过props实例成员获得自定义属性

<style>
    .info {
        text-align: center;
        width: 200px;
        padding: 3px;
        box-shadow: 0 3px 5px 0 pink;
        float: left;
        margin: 5px;
    }
    .info img {
        width: 200px;
    }
</style>
<div id="app">
    <!-- 2) 在父组件模板中,为子组件标签设置自定义属性,绑定的值由父组件提供 -->
    <info v-for="info in infos" :key="info.image" :myinfo="info"></info> 
</div>
<script src="js/vue.js"></script>
<script>
    let infos = [
        {
            image: 'img/001.png',
            title: '小猫'
        },
        {
            image: 'img/002.png',
            title: '蛋糕'
        },
        {
            image: 'img/003.png',
            title: '蓝糕'
        },
        {
            image: 'img/004.png',
            title: '恶犬'
        },
    ];
  //局部组件
    let info = {
        template: `
        <div class="info">
            <img :src="myinfo.image" alt="">
            <p><b>{{ myinfo.title }}</b></p>
        </div>
        `,
        // 3) 在子组件实例中,通过props实例成员获得自定义属性
        props: ['myinfo']
    };
  //父组件 new Vue({ el:
'#app', components: { info, }, data: { infos, // 1) 父组件提供数据 } }) </script>

4、组件交互-子传父  (子组件传递数据)

// 组件交互-子传父
// 1) 数据由子组件提供
// 2) 子组件内部通过触发系统事件,发送一个自定义事件,将数据携带出来
// 3) 父组件位子组件标签的自定义属性通过方法实现,就可以通过参数拿到子组件传递处理的参数
<style>
    .close:hover {
        cursor: pointer;
        color: red;
    }
</style>
<div id="app">
    <p>
        <input type="text" v-model="userMsg">
        <button @click="sendMsg">留言</button>
    </p>
    <ul>
        <!-- 2) 子组件内部通过触发系统事件,发送一个自定义事件,将数据携带出来 -->
        <msg-li @remove_msg="removeAction" v-for="(msg, i) in msgs" :msg="msg" :index="i" :key="msg"></msg-li>
    </ul>
</div>
<script src="js/vue.js"></script>
<script>
    let msgLi = {
        template: `
        <li>
            <span class="close" @click="deleteMsg(index)">x </span>
            <span>第{{ index + 1 }}条:</span>
            <span>{{ msg }}</span>
        </li>
        `,
        props: ['msg', 'index'],
        methods: {
            // 最先触发系统的click事件
            deleteMsg(i) {
                // 1) 数据由子组件提供
                // $emit('自定义事件名', 参数们)
                this.$emit('remove_msg', i);
            }
        }
    };
    new Vue({
        el: '#app',
        data: {
            msgs: [],
            userMsg: ''
        },
        methods: {
            sendMsg() {
                if (this.userMsg) {
                    this.msgs.push(this.userMsg);
                    this.userMsg = "";
                }
            },
            // 3) 父组件位子组件标签的自定义属性通过方法实现,就可以通过参数拿到子组件传递处理的参数
            removeAction(i) {
                this.msgs.splice(i, 1)
            }
        },
        components: {
            msgLi
        }
    })
</script>

 

posted @ 2019-10-09 22:14  只会玩辅助  阅读(1002)  评论(0编辑  收藏  举报