从Vue文档开始

Vue.js: 采用模板语法来声明式通过数据响应式渲染DOM

实验场[非vue-cli]

1
2
3
4
5
6
7

.
+--- asset
+--- index.html
+--- static
|   +--- css
|   +--- js
|   |   +--- vue.js

vue 声明式渲染

  • {{}} [模板指令]
 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

<!DOCTYPE html>
<html>

<head>
    <title>My first Vue app</title>
    <!-- vue.js 引入 -->
    <script src="./static/js/vue.js"></script>
</head>

<body>
    <!-- 视图 -->
    <div id="app">
        {{ message }} {{ name }}
    </div>
    <!-- 脚本 -->
    <script>
        var vm = new Vue({
            el: '#app', // DOM节点入口
            data: {     // 模板和DOM的数据驱动定义
                message: 'Hello',
                name: 'vue!'
            }
        })
        vm.name = 'react';  // 声明式，通过改变name进而改变DOM的文本
    </script>
</body>

</html>

?-> 什么是声明式

  • v-bind:attribute [绑定指令]
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<div id="app">
    <span v-bind:title="message">
        动态绑定的提示信息
    </span>
</div>
   
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: '页面加载于 ' + new Date().toLocaleString()
        }
    })
    vm.message = 'news';
</script>
  • v-if [条件指令]
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<div id="app">
    <!-- v-if 说明数据可以绑定到DOM结构 -->
    <p v-if="seen">雷公、电母, 快快显身!</p>
</div>
   
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            seen: true
        }
    })
</script>

?-> 过渡效果

  • v-for [循环指令]
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<div id="app">
    <li v-for="item in items">
        {{ item.text }}
    </li>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            items: [
                {text: '悟空'},
                {text: '八戒'},
                {text: '沙僧'},
            ]
        }
    })
</script>
  • v-on [事件绑定指令]
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转消息</button>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue'
        },
        methods: {
            reverseMessage: function() {
                this.message = this.message.split('').reverse().join('')
            }
        }
    })
</script>
  • v-model [数据和状态的双向绑定指令]

vue.js <–> v-model <–> DOM

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

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

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue'
        }
    })
</script>

组件应用

组件: 预定义的Vue实例对象。功能独立，用于组合式构建大型应用。

数据是驱动一切变化的原因，但是, DOM数据决定了组件的组合方式， 也揭示了数据存在组件的上窜下泄.

 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

<div id="app">
    <ol>
        <todo-item 
        v-for="item in items"
        v-bind:todo="item"
        v-bind:key="item.id"
        ></todo-item>
    </ol>
</div>
<script>
    // 注册Vue模板
    Vue.component('todo-item', {
        // 定义组件属性--组件特征
        props: ['todo'],
        // 组件自画像
        template: '<li>{{ todo.text }}</li>'
    })
    var vm = new Vue({
        el: '#app',
        data: {
            items: [
                {text: 'vue', id: 1},
                {text: 'react', id: 2},
            ]
        }
    })
</script>

工具