CodingSecondaryVue
Source
Edit
History

Vue基础

Vue

前端框架 免除原始JS中的DOM操作

MVVM(Model-View-ViewModel) 双向绑定

视图+脚本

视图：

1
2
3
<div id="app">
    {{message}}， {{name}}
</div>

{{name}} 变量，替换数据

脚本：

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
    var vm = new Vue({
        el : '#app',
        data: {
            message: "Hello Vue!",
            name: "666!"
        }
    });
    
    vm.message = 100;
    vm.$data.name = 'yuyu';
</script>

el 选择器 #选择id

data 传递参数（数据），定义一个对象或指定一个已有的对象。data内容更改时，前端数据随着更改

vm.message= 使用data的参数

vm.$data.name 使用Vue实例的属性

$watch 观察变量变化过程

观察data属性的值

开发调试用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var data = {message:1,name:'hello'}
var vm= new Vue({
    el : '#app',
    data: data
});


vm.message = 100

vm.$watch('name', function(newVal,oldVal){
    console.log(newVal,oldVal)
})

vm.$data.name = 'zhangsan';

$watch('观察变量名（data属性名）', 回调函数)

回调函数： newVal变化后的值， oldVal变化前的值

生命周期钩子

Vue实例被创建时需要经历一系列初始化过程，我们可以用生命周期钩子进行初始化操作

  • beforeCreate: 整个页面创建之前调用
  • created: 实例创建完成后调用
  • beforeMount: 挂载之前
  • mounted: 挂载成功之后，相当于页面中的元素被vm.$el替换
  • beforeUpdate: 数据变化之前
  • updated: 数据变化之后
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
var vm = new Vue({
    el: '#app',
    data: {
        message: "hi Vue",
    },
    beforeCreate: function() {
        console.log("beforeCreate")
    },
    created: function() {
        console.log("created")
    },
    beforeMount: function() {
        console.log("beforeMount")
    },
    mounted: function() {
        console.log("mounted")
    },
    beforeUpdate: function() {
        console.log("beforeUpdate")
    },
    updated: function() {
        console.log("updated")
    }
});
setTimeout(function() {
    vm.message = "changed..."
}, 3000);

使用JS表达式

1
2
3
<p>{{num+1}}</p>
<p>{{ok? 'YES':'NO'}}</p>
<p>{{msg.split("").reverse().join("")}}</p>

指令

v-once指令

v-html属性，并将其赋值为一个变量，则可以在该标签内部插入HTML元素

v-bind:标签属性=”变量名”:用变量名的值赋值给标签属性