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>
