[JavaScript知识库] 【vue】基础(三) 实例与选项、computed属性、watch属性、模板渲染

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 【vue】基础(三) 实例与选项、computed属性、watch属性、模板渲染 -> 正文阅读

[JavaScript知识库]【vue】基础(三) 实例与选项、computed属性、watch属性、模板渲染

Vue.js基本特性

一、实例与选项

Vue.js是通过new Vue({…})来声明一个实例对象的，在这个实例中包含了当前页面的HTML结构、数据和事件。Vue实例是MVVM模式中的ViewModel，实现了数据和视图的双向绑定。在实例化时可以传入一个选项对象，它包含数据、模板、挂载元素、方法、生命周期钩子函数等选项。

data

data：在Vue实例中初始化的 data 中的所有数据会自动进行监听绑定，然后可以使用两个大括号来绑定 data 中的数据。

<div id="app">
        <h2>{{message}}</h2>
        <input type="text" v-model="message">
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue'
            }
        });
    </script>

在后面的代码中，只要通过vm.message=”XXX”，即可进行视图的实时更新，使用起来很简单。

注意：data中的数据都是浅拷贝。这意味着，如果修改原来的对象也会改变data，从而触发更新事件。

注意：computed中的属性不能与data中的属性同名，否则会报错

Vue computed属性原理

计算属性

computed：计算属性，在进行数据绑定的时候，对数据要进行一定的处理才能展示到HTML页面上。虽然Vue提供了非常好的表达式绑定方法，但是只能应对低强度的需求。例如，把一个日期按照规定格式进行输出，可能就需要对日期对象做一些格式化。Vue提供的计算属性(computed)允许开发者编写一些方法，协助进行绑定数据的操作。这些方法可以跟data中的属性一样使用，注意用的时候不要加“()”。

注意：Mustache语法（{{}}）中不要放入太多的逻辑，否则会让模板过重、难以理解和维护

栗子1

<div id="box">
        <table border="1">
            <tr>
                <td width="100">生日</td>
                <td width="200">{{ getBirthday }}</td>
            </tr>
            <tr>
                <td width="100">性别</td>
                <td width="200">{{ gender }}</td>
            </tr>
            <tr>
                <td width="100">地址</td>
                <td width="200">{{ address }}</td>
            </tr>
        </table>
</div>
<script>
   var vm = new Vue({
       el:'#box',
       data:{
           birthday:1074228510514,
           gender:'男',
           address:'翻斗市翻斗花园B座1号102'
       },
       computed:{
           getBirthday:function(){
               var m = new Date(this.birthday);
               var str = m.getFullYear()+'年'+(m.getMonth()+1)+'月'+m.getDate()+'日'
               return str;
           }
       }
   })
</script>

在这里插入图片描述

每一个计算属性都包含一个getter 和一个setter ，上面的示例是计算属性的默认用法，只是利用了getter 来读取。

在需要时，也可以提供一个setter 函数，当手动修改计算属性的值就像修改一个普通数据那样时，就会触发setter 函数，执行一些自定义的操作。

【计算属性缓存】计算属性是基于它们的依赖进行缓存的，计算属性只有在它的相关依赖发生改变时才会重新求值。

【计算属性缓存的特点】是属性变化才执行getter函数，否则执行缓存默认的true指令打开缓存。

【计算属性缓存的作用】如果频繁使用计算属性，而计算属性方法中有大量的耗时操作(例如在getter中循环一个大的数组)，会带来一些性能问题。计算属性可以用来解决该问题。

利用计算动态把数据传入

栗子2

<div id="app">
        <p>水果</p>
        <span>{{ pear }}</span>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <span>{{ apple }}</span>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <span>{{ banana }}</span>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <span>{{ number }}</span>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <p style="padding: 12px 0;">{{ result }}</p>
        <button @click='btn'>输出结果</button>
</div>
<script>
    new Vue({
        el:'#app',
        data:{ //一般做初始化工作
            pear:'梨子',
            apple:'苹果',
            banana:'香蕉',
            number:'水果'
        },
        computed:{
            result:{
                // cache:true,
                // 自动调用
                get: function(){
                    return 'abcdefg'+this.pear+this.apple+this.banana+this.number
                },
                // 改变的时候自动调用它
                set: function(newVal){
                    this.pear = newVal.substr(2,2);
                    this.apple = newVal.substr(2,2);
                    this.banana = newVal.substr(4);
                    this.number = newVal.substr(4)
                }
            }
        },
        methods:{
            btn(){
                this.result = '123456';
            }
        }
    })
</script>

在这里插入图片描述

methods

methods：通过methods属性定义方法，并使用 v-on 指令来监听DOM事件。

<div id="app">
        <p>原字符串：{{ message }}</p>
        <p>反转字符串：{{ reverseMessage() }}</p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                message:'懒羊羊头顶大便'
            },
            methods:{
                reverseMessage:function(){
                    return this.message.split('').reverse().join('')
                }
            }
        })
</script>

在这里插入图片描述

Vue中的三种模板

html模板

html模板：基于DOM的模板，模板都是可解析的有效的HTML插值

文本：使用{{ }}语法，作用：替换实例上的属性值，当值改变时，插值内容处会自动更新
原生的html：双大括号输出的是文本，不会解析html（想要解析html，可以使用指令v-html）
属性：使用v-bind进行绑定，可以响应变化

<div id="app"></div>
    <script type="x-template" id="tmp">
        <div>
            <p>{{ list.name }}</p>
            <p>{{ list.age }}</p>
        </div>
    </script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                list:{
                    name:'喜羊羊',
                    age:6
                }
            },
            template:'#tmp'
        })
    </script>

在这里插入图片描述

字符串模板

字符串模板：先定义字符串模板，然后在vue 的选项对象里面利用template绑定。字符串模板的优先级会比html模板高，如果html和字符串模板中都有内容，会用字符串模板里的内容替换html模板。需要注意的是定义的字符串模板中根节点只能有一个。还有字符串用 ` 引起来是可以换行的。

<div id="app"></div>
    <script>
        let data = {
            content: 'world',
        }
        var str = `<div> 你好！{{content}}</div>`
        var vm = new Vue({
            el: '#app',
            data: data,
            template: str
        })
</script>

除了用变量定义模板字符串，还可以用script标签，给script 标签定义Id，根节点只能有一个，将html结构写在一对script标签中，设置type=“x-template”，模板将会替换挂载的元素。挂载元素的内容都将被忽略。Vue实例的template属性设置为给定的script标签

<div id="wrap"> </div>
    <script type="x-template" id="app">
        <div>
            <p>他的名字是{{list.name}}</p>
        </div>
</script>
 <script>
        var list = {
            name: "诸葛亮",
            age: 20
        }
        var vm = new Vue({
            el:"#wrap",
            data:{list},
            template:"#app"
        });
    </script>

render函数模板

render函数模板
render(createElement){ 
	createElement(标签名,[数据对象],子元素)//子元素为数组或对象
}
数据对象的属性
	class:{ },//绑定class
	style:{ };//绑定样式，
	attrs:{ };//添加行间属性
	domProps:{ }//DOM元素属性
	on:{ }//绑定事件

<style>
        .bg{background:yellowgreen;}
    </style>
    <div id="wrap">
        <p>你的名字是{{list.name}}</p>
    </div>
    <script>
        var list = {
            name:"donna",
            age:20
        }
        var vm = new Vue({
            el:"#wrap",
            data:{list},
            render(createElement){
                return createElement(
                    "ul",
                    {
                        class:{bg:true},
                        style:{listStyle:"none"},
                        attrs:{
                            name:"donna"
                        }
                    },
                    [
                        createElement("li","aaaaaa"),
                        createElement("li","bbbbbb"),
                        createElement("li","cccccc")
                    ]
                )
            }
        });
    </script>

watch属性

watch属性用来观察和响应Vue实例上的数据变动

概述：watch是一个对象，键是需要观察的表达式，值是对应的回调函数
作用：当表达式的值发生变化后，会调用对应的回调函数完成响应的监视操作
Vue实例将会在实例化时调用$watch()，遍历watch对象的每一个属性。
VUE $watch

【提示】不能使用箭头函数来定义watch中的回调函数

<div id="app">
        <button @click='a--'>a减1</button>
        <p>{{ message }}</p>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            a:2,
            message:''
        },
        watch:{
            a:function(val,oldVal){
                this.message = "a的旧值是："+oldVal+",a的新值"+val
            }
        }
    })
</script>

在这里插入图片描述

<div id="app">
    <button @click='a--'>a减1</button>
    <p>{{ message }}</p>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            a:10,
            message:''
        }
    })
    var unwatch = vm.$watch('a',function(val,oldVal){
        if(val === 1){
            unwatch(); //取消观察
        }
        this.message = "a的旧值是："+oldVal+",a的新值是："+val
    })
</script>

在这里插入图片描述
当旧值减到2的时候，a实际上还在减，但是因为取消观察了，所以视图上不再变化了。

二、模板渲染

1、条件渲染

条件渲染：分为两种方式，一种是v-if，另一种是v-show。v-if又分为单路分支、双路分支和多路分支。只有if后面的值为true时才会有DOM元素，为false时不会有DOM元素

(1)v-if方式渲染：在<template>中配合v-if渲染，在使用v-if控制元素的时候，需要将它添加到这个元素上。然而，如果需要切换很多元素时，一个一个添加比较麻烦。这时，可以使用<template></template>将一组元素进行包裹

【注意】最终的渲染结果不会包含<template>元素

<div id="app">
        <template v-if="yes">
            <h2>Vue</h2>
            <p>西安邮电学院</p>
            <p>湖南湘潭大学</p>
        </template>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data:{
                yes: true
            }
        })
    </script>

(2)v-show方式渲染：用法与v-if大致相同

2、列表渲染

列表渲染：用v-for指令根据一组数据的选项列表进行渲染。v-for指令需要采用 item in items 形式的特殊语法，其中 items 是源数据

<div class="app">
        <ul>
            <li v-for="item in items">{{item.text}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el: '.app',
            data: {
                items: [
                    { text: 'Name'},
                    { text: 'Age'},
                    { text: 'Like'}
                ]
            }
        })
    </script>

可以使用v-for迭代对象的属性

<div class="app">
        <ul>
            <li v-for="item in obj">{{item}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el: '.app',
            data: {
                obj: {
                    firstname: '欧阳',
                    lastname: '静静',
                    age:18
                }
            }
        })
    </script>