【Vue】常见的七大属性（描述+案例）

news2024/12/31 4:26:43

一、前言

最近，因为项目需要自己就去学习了一下Vue的相关知识，自己花了几天，结合官方文档和相应的视频学习了一下Vue,了解了Vue大概的一些属性，方法，特点等。接下来博主会将自己学习的相关内容通过博客的形式进行记录，方便后期的回顾，也希望对大家有所帮助。

二、Vue常见的七大属性

所谓有七大属性，则这七个属性在我们的Vue对象中是并列的存在，可以被调用、嵌套。

1、el

理解：el是Vue中很重要的一个元素，是一个挂载点，当我们创建vue的根实例时，我们可以通过el属性来告诉vue哪个DOM元素应该被实例接管。

代码：

<body>
<!--view层 模板-->
<div id="app">

</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
    });
</script>
</body>

如上面代码所示，我们创建一个Vue对象，将其与id='app'的div标签进行绑定，从而实现了el的功能。ps:在代码运行的时候不要忘记导入vue.js

2、data

理解：用来保存我们设置的数据或者请求的数据。该类型可以是Object的，但是当我们在组件（component）里的定义的data必须是方法类型的。

代码1：

<body>
<!--view层 模板-->
<div id="app">
<h1>{{age}}</h1>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            name:"李飞",
            list:["Java","vue","c++"],
            age:18
        }
    });
</script>
</body>

代码2：

data函数类型的代码

    var vm=new Vue({
        el:"#vue",
        data(){//这是一个data函数
            return{
                info:{
                    name:null,
                    address:{
                        street:null,
                        city:null,
                        country:null
                    },
                    url:null,
                    list:[]
                }
            }
        }
    });

3、method

理解：这个属性用来编写我们需要调用的方法，是在js里面编写的代码。

代码：代码中包含了methode的语法形式以及里面的函数书写的语法形式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <button v-on:click="sayHi">click Me</button>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        //数组用[]，对象用{}
        data:{
            message:"Hello,JAVA"
        },
        methods:{//必须定义在Vue的Method对象中,v-on:事件
            sayHi:function (event) {//不要忘了event
                alert(this.message);
            }
    }
    });
</script>
</body>
</html>

效果：

ps:里面还包含了一些绑定的点击事件，后面还会出相应的博客进行讲解。

4、template

理解：这是模板的意思，我们可以通过temple来自定义页面，替换一些页面的元素。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--  组件中模板的应用  -->
    <tmp></tmp>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    //定义一个vue组件
    Vue.component("tmp",{//第一个参数是名字，后面是组件的内容
        template:'<li>123</li>'
    });

    var vm=new Vue({
        el:"#app",
    });
</script>
</body>
</html>

如图所示我写了一个简单的组件里面套用了我们的template,当我们使用这个组件的时候，就可以同时显示template中的内容，而template的样式可以更具我们的需求发生变化的。

效果：

5、render

理解：是一个渲染器，可以创建虚拟的DOM。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<!--view层 模板-->
<div id="app">
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        render:h=>h('p','hello,java')//设置格式为p标签，内容为“hello,java”
    });
</script>
</body>
</html>

如代码所示，我们的div标签中没有内容的输出，我们可以通过render设置我们输出的内容以及标签对其进行渲染。这样一来我们就可以通过动态的设计我们的标签，来渲染一些炫酷的页面。

效果：

6、computed

理解：这是Vue中的计算属性,可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新。computed设置的初衷是能够解决复杂的计算，而不是直接在模板字符串里进行运算。

代码：这里将method里面的方法与computed的方式的使用相互对比给出，便于大家分辨。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--  注意调用时的区别  -->
   <p>currentContent1():{{currentContent1()}}</p>
    <p>currentContent2:{{currentContent2}}</p>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        methods:{
            currentContent1:function () {
                return "methods的方法";//返回一个时间戳
            }
        },
        computed:{//计算属性 methods与computer中的方法名最好不重名，重名后调用methods里的方法
            currentContent2:function () {
                return "这是computed里面的方法";//返回一个时间戳
            }
        }
    });
</script>
</body>
</html>

效果：

7、watch

理解：watch其实是一个监听器，用来监视我们某个值，当某个值满足什么条件时，我们就应该做什么操作、处理。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<!--view层 模板-->
<div id="app">
    <div>
        <div>count: {{count}}</div>
        <button @click="handleUpdate()">更新count</button>
    </div>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data(){
            return{
                count:0,
            }
        },
        watch:{
            count:function (newVal,oldVal) {
                console.log(newVal,oldVal);
            }
        },
        methods:{
            handleUpdate(){
                this.count=Math.random();
            }
        }
    });
</script>
</body>
</html>

如图所示，我们通过点击事件来监听count的变化情况，当count发生变化的时候，它的新值与旧值就会被打印在控制台。

效果：