AI专业者开发社区 1 号成员
  •  0 回帖  •  10 浏览  •  4 个月前
 

（二）Vue常用7个属性

学习 vue 我们必须之到它的 7 个属性，8 个 方法，以及 7 个指令。787 原则
  • el 属性
    • 用来指示 vue 编译器从什么地方开始解析 vue 的语法，可以说是一个占位符。
  • data 属性
    • 用来组织从 view 中抽象出来的属性，可以说将视图的数据抽象出来存放在 data 中。
  • template 属性
    • 用来设置模板，会替换页面元素，包括占位符。
  • methods 属性
    • 放置页面中的业务逻辑，js 方法一般都放置在 methods 中
  • render 属性
    • 创建真正的 Virtual Dom
  • computed 属性
    • 用来计算
  • watch 属性
    • watch:function(new,old){}
    • 监听 data 中数据的变化
    • 两个参数，一个返回新值，一个返回旧值，
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div id="app">
    {{msg}}
      <div>这是模板的第一种使用方法1</div>
</div>
  
<template id="bot">这是模板的第三种使用方法，不常用3</template>
<script>
<div id="bot">模板的第四种创建方法4</div>
</script>
<script>
    var vm1 = new Vue({
        data: {
            msg: "data属性"
        },
        methods: {
            Personal:function () {
                console.log("methods方法存放方法")
            }
        },
        template: `<div>模板的第二种使用方法2</div>`,
        //template："#bot",
        render: (createElement) => {
            return createElement("h1",{"class":"类名"，"style":"color: red"},"这一个render属性创建的虚拟dom")
        },
    })
</script>

　　

 
methods 和 computed 其中都可以写算法，有什么区别呢？
    
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="javascript/vue.min.js"></script>
</head> <body>
<div id="app">
    <p>{{message}}</p> //直接在模板中绑定表达式
    <p>{{message.split('').reverse().join('')}}</p> //运用计算属性
    <p>{{reverseMessage}}</p> //运用methods方式
    <p>{{methodMessage()}}</p>
</div>
<script>
    var vm=new Vue({
         el:"#app",
         data:{
             message:"hello"
         },
        computed:{
            reverseMessage:function(){
                 return this.message.split('').reverse().join('');
            }
        },
         methods:{
             methodMessage:function () {
                 return this.message.split('').reverse().join('');
             }
         }
    })
</script>
</body>
</html>
 
我在此将三种方式进行了比较。返回的结果是一样的，但在写法上 computed 计算属性的方式在用属性时不用加 (), 而 methods 方式在使用时要像方法一样去用，必须加 ().
两种方式在缓存上也大有不同，利用 computed 计算属性是将 reverseMessage 与 message 绑定，只有当 message 发生变化时才会触发 reverseMessage，而 methods 方式是每次进入页面都要执行该方法，但是在利用实时信息时，比如显示当前进入页面的时间，必须用 methods 方式
以上就是 vue 常用的 7 个属性，当然 vue 的属性可不知这些，开发需要的话可以 在官网查阅剩余属性。狗尾草和大家一起加油，技术改变世界！