Vue 系列之基础入门

背景叙述

渐进式 JavaScript 框架

易用：已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！
灵活：不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
高效：20kB min+gzip 运行大小超快虚拟 DOM 最省心的优化

上述是 Vue.js 官网网站给出的该前端框架的特点，而对于我这个一开始就是做 WPF 开发的 C# 程序员来说，则看上了它的 MVVM，所以，打算认真学习一下。由于 Vue 是一个前端框架，所以在开发的过程中必然会涉及到 Html、js、css。

安装

用 script 引用

选择合适版本的 vue.js 将其下载至本地，在相应页面中的 head 元素中添加下述语句：

<script src="./vue.js"></script>

使用 CDN 方式引用

在页面中的 head 标签中添加下述语句：

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

NPM 方式（构建大型项目时推荐:CLI）

要想使用 NMP 方式，首先需要确保本机已经安装了 NodeJS （下载地址）工具，可通过执行 npm -v 查看是否以安装，安装好之后可参考下述命令进行 vue 的安装

# 安装 cnpm 并 修改 npm 的镜像服务器

npm install -g cnpm --registry=https://registry.npm.taobao.org

# 全局安装 vue

cnpm install -g vue-cli

# 或者全局安装 Vue CLI 3

npm install -g @vue/cli

# 如果无法正常安装请尝试清理缓存

npm cache clean --force

# 验证是否安装成功

vue -V

# 创建 vue 项目

vue init webpack project-name

# 或者通过 Vue CLI 3 创建项目

vue create project-name

# install dependencies

npm install

# serve with hot reload at localhost:8080

npm run dev

# build for production with minification

npm run build

# build for production and view the bundle analyzer report

npm run build --report

# run unit tests

npm run unit

# run e2e tests

npm run e2e

# run all tests

npm test

后续补充，暂时先知道这么用就行。

一个简单的例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script src="./vue.js"></script>

    <title>Vue</title>

</head>

<body>

    <h1 id="app">{{msg}}</h1>

    <script>

        new Vue({

            el: "#app",

            data: {

                msg: "Hello world"

            }

        })

    </script>

</body>

</html>

挂载点、模板、实例

挂载点

是指 vue 实例中 el 属性对应的 Dom 节点， vue 只会处理挂载点下的 Dom 元素。类似 WPF 中 View 层 Element source。

模板

在挂载点内部的内容统一称之为模板。有两种使用方式

方式 1

<body>

    <div id="app">

        <h1>你好： {{msg}}</h1>

    </div>

    <script>

        new Vue({

            el: "#app",

            data: {

                msg: "Hello world"

            }

        })

    </script>

</body>

方式 2

<body>

    <div id="app">

    </div>

    <script>

        new Vue({

            el: "#app",

            template:"<h1>你好： {{msg}}</h1>",

            data: {

                msg: "Hello world"

            }

        })

    </script>

</body>

方式 2 中 template 需要包含 Dom 元素，否则无法显示。

实例

对应一个 Vue 实例

三者关系

实例用于创建数据上下文，模板定义了数据上下文显示的样式，挂载点 指定了数据上下文显示的位置。

数据、事件、方法

数据

位于 vue 实例中的 data 节点。有下述几种方式来表示：

方式 1

<body>

    <div id="app">

        <h1>{{number}}</h1>

        <h1 v-text="number"></h1>

        <h1 v-html="number"></h1>

    </div>

    <script>

        new Vue({

            el: "#app",

            data: {

                number: 123

            }

        })

    </script>

</body>

方式 2

<body>

    <div id="app">

        <h1>{{string}}</h1>

        <h1 v-text="number"></h1>

        <h1 v-html="content"></h1>

    </div>

    <script>

        new Vue({

            el: "#app",

            data: {

                string: "hello world",

                number: 123,

                content: "<h1>Hello</h1>"

            }

        })

    </script>

</body>

v-text 会将内容进行转义，v-html 会将内容进行转义；动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值 v-html，绝不要对用户提供的内容使用插值。

事件与方法绑定

<body>

    <div id="app">

        <div v-on:click="handleClick">{{content}}</div>

    </div>

    <script>

        new Vue({

            el: "#app",

            data: {

                content: "Hello"

            },

            methods: {

                handleClick: function () {

                    this.content = "world"

                }

            }

        })

    </script>

</body>

简写方式

<body>

    <div id="app">

        <div @click="handleClick">{{content}}</div>

    </div>

    <script>

        new Vue({

            el: "#app",

            data: {

                content: "Hello"

            },

            methods: {

                handleClick: function () {

                    this.content = "world"

                }

            }

        })

    </script>

</body>

属性绑定和双向数据绑定

单向绑定：

<body>

    <div id="root">

        <div v-bind:title="title">hello world</div>

        <!-- 简写方式 -->

        <div :title="title">hello world</div>

    </div>

    <script>

        new Vue({

            el: "#root",

            data: {

                title: "this is hello world"

            }

        })

    </script>

</body>

双向绑定

<body>

    <div id="root">

        <input v-model="content">

        <div>{{content}}</div>

    </div>

    <script>

        new Vue({

            el: "#root",

            data: {

                content: "this a content"

            }

        })

    </script>

</body>

通过使用 v-once 指令，能执行一次性地插值，当数据改变时，插值处的内容不会更新；

计算属性和侦听器

计算属性：computed

<body>

    <div id="root">

        姓：<input type="text" v-model="firstName"> 名：

        <input type="text" v-model="lastName">

        <div>{{fullName}}</div>

    </div>

    <script>

        new Vue({

            el: '#root',

            data: {

                firstName: "",

                lastName: ""

            },

            computed: {

                fullName: function () {

                    return this.firstName + ' ' + this.lastName

                }

            }

        })

    </script>

</body>

计算属性是基于它们的依赖进行缓存的。只有依赖对象属性值发生变化时才会重写计算，否则使用上次缓存的数据进行计算。类似 C# 中对对象属性操作；

侦听器：watch

<body>

    <div id="root">

        姓：<input type="text" v-model="firstName"> 名：

        <input type="text" v-model="lastName">

        <div>{{fullName}}</div>

        <div v-text="count"></div>

    </div>

    <script>

        new Vue({

            el: '#root',

            data: {

                firstName: "",

                lastName: "",

                count: 0

            },

            computed: {

                //计算属性

                fullName: function () {

                    return this.firstName + ' ' + this.lastName

                }

            },

            watch: {

                //侦听属性

                firstName: function () {

                    this.count++

                },

                //侦听属性

                lastName: function () {

                    this.count++

                }，

                //侦听属性

                fullName:function(){

                    this.count++

                }

            }

        })

    </script>

</body>

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

// ...

computed: {

  fullName: {

    // getter

    get: function () {

      return this.firstName + ' ' + this.lastName

    },

    // setter

    set: function (newValue) {

      var names = newValue.split(' ')

      this.firstName = names[0]

      this.lastName = names[names.length - 1]

    }

  }

}

// ...

对属性变化事件进行监听，支持对监听属性和数据属性进行监听。类似 C# 中对对象静态属性操作；除了 watch 选项之外，您还可以使用命令式的 vm.$watch API。

指令相关

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

v-if 与 v-show

<body>

    <div id="root">

        <div v-if="show">hello world</div>

        <div v-show="show">hello world</div>

        <button @click="handleClick">toggle</button>

    </div>

    <script>

        new Vue({

            el: "#root",

            data: {

                show: true

            },

            methods: {

                handleClick: function () {

                    this.show = !this.show

                }

            }

        })

    </script>

</body>

v-if 是直接对 Dom 对象进行操作，当该指令为 false 时，会直接删除该 Dom 对象，v-show 则是通过 style 样式来对 Dom 对象进行设置；

v-for

<body>

    <div id="root">

        <ul>

            <li v-for="item in items" :key="item">{{item}}</li>

        </ul>

        <ul>

            <li v-for="(item, index) in items" :key="index">{{item}}</li>

        </ul>

    </div>

    <script>

        new Vue({

            el: "#root",

            data: {

                items: [1, 2, 3]

            }

        })

    </script>

</body>

使用 key 能提高页面渲染，需要保证每次遍历时 key 值不能出现重复；

参数与事件的绑定

v-bind 指令可以用于响应式地更新 HTML 特性：

# 参数绑定

<a v-bind:href="url">...</a>

# 事件绑定

<a v-on:click="doSomething">...</a>

href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定；
doSomething 是事件，与对应的 vue 实例相关函数进行绑定

修饰符

修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit">...</form>

缩写

v-bind

<!-- 完整语法 -->

<a v-bind:href="url">...</a>

<!-- 缩写 -->

<a :href="url">...</a>

v-on

<!-- 完整语法 -->

<a v-on:click="doSomething">...</a>

<!-- 缩写 -->

<a @click="doSomething">...</a>