【Vue】Vue常用属性、三种模板总结

最新推荐文章于 2024-08-15 20:30:00 发布

南栀~zmt

最新推荐文章于 2024-08-15 20:30:00 发布

阅读量1.3k

点赞数

分类专栏： JavaScript库 # Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_46658751/article/details/122822039

版权

JavaScript库同时被 2 个专栏收录

30 篇文章 3 订阅

订阅专栏

Vue

14 篇文章 1 订阅

订阅专栏

本文详细介绍了Vue.js中el属性用于挂载元素、data定义初始数据及其绑定、methods定义可执行的方法、computed计算属性的缓存机制及watch侦听器的作用。实例演示了如何在HTML模板中应用这些特性。

摘要由CSDN通过智能技术生成

Vue.js是通过newVue({…})来声明一个实例的。
实例中包含了当前页面的HTML结构、数据、事件。
在实例中可以传入一个选项对象，包含数据、模板、挂载元素、方法、生命周期钩子函数等选项。

注：本篇文章的例子在此基础上进行更新添加。

<!-- 非组件化的开发方式 需要引入vue的js文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/Vue_js/vue.js"></script>
</head>
<body>
    <div id="root"></div>
    
    <script>
        const vm = new Vue({
            el: '#root',
        })
    </script>
</body>
</html>

常用属性

`el`

el属性的使用方式：

创建Vue(new Vue)实例时，配置el属性

<div id="root"></div>

<script>
    const vm = new Vue({
        el: '#root',
    })
</script>

先创建Vue实例，随后通过vue实例.$mount('挂载的元素')指定el的值。

<div id="root">
    {{message}}
</div>

<script>
    const vm = new Vue({
        data:{
            message: '你好'
        }
    })

    vm.$mount('#root');
    
</script>

`data`

在Vue实例中初始化的data中的所有数据会自动进行监听绑定。
可使用{{}}绑定data中的数据

<div id="root">
    {{message}}
    <input type="text" v-model="message">
</div>

<script>
    const vm = new Vue({
        el: '#root',
        data:{
            message: '你好'
        }
    })
</script>

在后续代码中只需要通过vm.message = ‘***’，即可进行message值的更新，进而更新视图，方便实用。
注：data中的数据都是浅拷贝。修改原来的对象也会改变data，从而触发更新事件。
注：组件化开发时data的书写方式与此处不同，需要注意。

`methods`

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

翻转字符串案例：

<div id="root">
    <p>原始字符串：{{message}}</p>
    <p>反向字符串：{{reverseMessage()}}</p>
</div>

<script>
    const vm = new Vue({
        el: '#root',
        data:{
            message: '你好'
        },
        methods: {
            reverseMessage: function() {
                return this.message.split('').reverse().join('');
            }
        }
    })
</script>

`computed`计算属性

在进行数据绑定时，有时候需要对数据进行一定处理才能展示到HTML页面上。
Vue提供了非常好的表达式绑定方法，但只能应对低强度的需求。

计算属性：指的是通过一系列运算之后，最终得到一个属性值。这个动态计算出来的属性值可以被模板结构或 methods 方法使用。

计算属性在声明的时候被定义为方法，但是计算属性的本质是一个属性。

Vue提供的计算属性(computed)允许开发者编写一些方法，协助进行数据绑定的操作，此方法可以与data中属性一样使用。
注意使用的时候{{}}中不要加()。

计算属性的优势： 与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

methods和computed之间的区别：

computed是在值发生改变的时候才会触发效果
methods只要刷新执行了就会触发

计算属性处理生日案例：

<div id="root">
    <!--computed中的函数可以直接当成data中的属性使用,注意没有括号!!!  -->
    <p>生日是： {{getBirthday}}</p>
</div>

<script>
    const vm = new Vue({
        el: '#root',
        data:{
            birthday: 1014228510514,
        },
        computed: {
            getBirthday: function() {
                var m = new Date(this.birthday);
                return m.getFullYear()+'年'+(m.getMonth()+1)+'月'+m.getDate()+'日';
            }
        }
    })
</script>

计算属性缓存：

计算属性是基于它们的依赖进行缓存的，计算属性只有在它的相关依赖发生改变时才会重新求值。
特点： 是属性变化才执行getter函数，否则执行缓存默认的true指令打开缓存。
作用： 如果频繁使用计算属性，而计算属性方法中有大量的耗时操作(例如在getter中循环一个大的数组)，会带来一些性能问题。计算属性可以用来解决该问题。

计算属性的getter和setter：

每一个计算属性都包含一个getter() 和一个setter() ，大多数情况用计算属性的默认用法，只是利用了getter 来读取。
- get函数的执行时间：在初始读取时执行一次、当依赖数据发生改变时再次调用。
在需要时，也可以提供一个setter 函数，当手动修改计算属性的值就像修改一个普通数据那样时，就会触发setter函数，执行一些自定义的操作。
set函数响应修改，set中要引起计算时依赖数据的改变。

使用计算属性缓存和getter() setter()完成的案例：

<div id="root">
    <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">改变计算属性的值之后的显示 调用get和set</button>
</div>

<script>
    const vm = new Vue({
        el: '#root',
        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(0,2);
                    this.apple = newVal.substr(2,2);
                    this.banana = newVal.substr(4,2);
                    this.number = newVal.substr(6,2);
                }
            }
        },
        methods: {
            btn() {
                this.result = '12345678'
            }
        }
    })
</script>

在这里插入图片描述

`watch`侦听器

侦听器(watch)：当数据发生变化时，及时作出响应处理。
watch属性用来观察和响应Vue实例上的数据变动。
watch属性是一个对象，它有两个属性：一个是键，一个是值。

键是需要观察的表达式。
值是对应的回调函数，回调函数得到的参数为新值和旧值。值也可以是方法名，或者包含选项的对象。

Vue实例将会在实例化时调用$watch()，遍历watch对象的每一个属性。

注：不要使用箭头函数来定义watch中的回调函数

使用方法

在Vue对象上挂载watch属性，监听data中的数据。

<div id="root">
    <button @click="a--">a-1</button>
    <p>{{message}}</p>
</div>

<script>
    const vm = new Vue({
        el: '#root',
        data:{
            a:10,
            message:'',
        },
        watch: {
            a: function(newValue,oldValue) {
                this.message = 'a的旧值为：'+oldValue+',新值为：'+newValue;
            }
        },  
    })
</script>

在这里插入图片描述

vue对象实例的$watch()方法,该方法的返回值是一个取消观察函数，用来停止触发回调

<div id="root">
    <button @click="a--">a-1</button>
    <p>{{message}}</p>
</div>

<script>
    const vm = new Vue({
        el: '#root',
        data:{
            a:10,
            message:'检测a--',
        },
    })
    // 当a的值更新到1时，触发unwatch函数来取消观察。
    // 单击按钮时，不再触发watch的回调函数。
    var unwatch = vm.$watch('a',function(newValue,oldValue) {
        if(newValue === 1) {
            unwatch();
        }
        this.message = '检测a--a的旧值为：'+oldValue+',新值为：'+newValue;
    })
</script>

两个重要的原则：

所有被Vue管理的函数，最好写成 普通函数，这样this的指向才是 vm 或组件实例对象
所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成 箭头函数，这样this的指向才是 vm或组件实例对象

除以上五种属性之外，还有template属性和render属性，均在下文用到。

三种模板

html模板

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

<div id="root">
    <p>你的名字是：{{list.name}}</p>
</div>

<script>
    const vm = new Vue({
        el: '#root',
        data:{
            list: {
                name: '南栀',
                age: 20
            }
        },
    })
</script>

字符串模板

字符串模板的优先级会比html模板高，如果html和字符串模板中都有内容，会用字符串模板里的内容替换html模板。

先定义字符串模板，然后在vue 的选项对象里面利用template绑定。

注意：定义的字符串模板中根节点只能有一个。还有字符串用 ` 引起来是可以换行的。

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

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

<div id="root"></div>

<script type="x-template" id="app">
    <div>
        <p>名字是： {{list.name}}</p>
    </div>
</script>

<script>
    const vm = new Vue({
        el: '#root',
        data:{
            list: {
                name: '南栀',
                age: 20
            },
        },
        template: '#app'
    })
</script>

render函数模板

语法格式：

render(createElement){ 
	createElement(标签名,[数据对象],子元素)//子元素为数组或对象
}

数据对象的属性：

class:{ }：绑定class
style:{ }：绑定样式
attrs:{ }：添加行间属性
domProps:{ }：DOM元素属性
on:{ }：绑定事件

<style>
    .bg{background:yellowgreen;}
</style>

<div id="root">
    <p>你的名字是{{list.name}}</p>
</div>
<script>
    var list = {
        name:"donna",
        age:20
    }
    var vm = new Vue({
        el:"#root",
        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>