Vue2实践揭秘读书笔记(1)——Vue概要

最新推荐文章于 2021-08-30 18:22:24 发布

原创最新推荐文章于 2021-08-30 18:22:24 发布 · 407 阅读

0 ·

CC 4.0 BY-SA版权

框架专栏收录该内容

6 篇文章

订阅专栏

本文介绍Vue.js的快速入门方法，通过vue-cli搭建开发环境，解析Vue.js的单页组件、数据绑定、属性绑定及过滤器等功能，帮助开发者快速掌握Vue.js的核心特性。

Vue.js与Angular2和React相比，Vue.js一开始就为我们铺平入门的道路，脚手架vue-cli。
因为它的存在，省去了手工配置开发环境、运行环境和测试环境的步骤，开发者可以直接步入Vue.js开发的殿堂。

在开始之前，先安装npm，然后输入vue-cli安装到全局环境
npm i vue-cli -g
然后，开始建立工程
vue init webpack-simple vue-todos
然后进入vue-todos目录，安装脚手架项目的基本支持包：
npm i
安装完支持包后键入以下指令就可以运行一个由脚手架构建的基本Vue.js程序
npm run dev

vue-cli的代码结构

——README.md
——index.html					# 默认启动页面
——package.json 					# npm 包配置文件
——src
	——App.vue				# 启动组件
	——assets
		——logo.png
	——main.js				# Vue 实例启动入口
——webpack.config.js				# webpack 配置文件

main.js文件

import Vue from 'vue'
import App from './App.vue'

new Vue({
	el: '#app',
	render: h => h(App)
})

Vue2新增的特色Render方法，与React渲染机制一样。为了得到更好的运行速度，Vue2也采用了Virtual DOM。一种比浏览器原生的DOM具有更好性能的虚拟组件模型。

通过import将一个Vue.js的组件文件引入，并创建一个Vue对象的实例，在Vue实例中用Render方法来绘制这个Vue组件（App）就完成了初始化。

将Vue实例绑定到一个页面上，真实存在的元素App Vue程序就引导成功了。

打开index.html文件就能看到Vue实例与页面的对应关系：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
</head>
<body>
	<!-- Vue 的实例所对应的页面元素 -->
	<div id="app"></div>
	<!-- 由Webpack 编译后的运行文件 -->
	<script src="/dist/build.js"></script>
</body>
</html>

一个Vue实例必须与一个页面元素绑定。Vue实例一般用作Vue的全局配置来使用，例如向实例安装路由、资源插件，配置应用于全局的自定义过滤器、自定义指令等。

App.vue文件被称为单页式组件。.vue文件可以同时承载“视图模板”、“样式定义”和组件代码，使得组件的文件组织更加清晰与统一。

单页组件由三个部分组成

<template>		视图模板
<style>			组件样式表
<script>		组件定义

template属性是V，也就是视图，title属性是M，也就是模型。

从Vue2开始，组件模板必须有且只有一个顶层元素，如果在组件模块内设置多个顶层元素将会引发异常编译。

Vue的视图模板是基于DOM实现的。我们在模板上定义一个网页标题，并通过数据绑定语法将App组件上定义的数据模型绑定到模板上。

在组件脚本定义中使用data定义用于内部访问的数据模型。
使用函数返回是为了可以具有更高的灵活性，例如对内部数据进行一些初始化的处理，官方推荐的用法是采用返回Object对象的函数。

export default {
	data () {
		return {
			title: "vue-todos"
		}
	}
}

数据绑定
我们可以将Vue实例定义看作一个类的定义，data相当于这个类的内部字段属性的定义区域。在Vue实例内的其他地方可以直接用this引用data内定义的任何属性，比如this.title就是引用了data.title。

v-for指令
可以用于枚举一个数组并将对象渲染成一个列表。如果要输出序号，可以用隐藏的index值来进行输出。（:id=“index”）index的值输出到DOM的id属性上，不加’:’，会被认为正在为id属性赋予一个字符串。

Vue的代码中不推荐直接操作DOM。

样式绑定
由于纯CSS的代码量很大，而且需要不断地重复，less更高效。
webpack支持less编译的包的方法：
npm i less style-loader css-loader less-loader -D
安装完成后在webpack.config.js的modules设置内加入以下的配置：

module: {
	rules: [
		{
			test: /\.less/,
			loader: 'style!css!less'
		}
	]
}

在/assets/中添加一个todos.less文件，并在App.vue的组件定义内引入less样式表：

import './assets/todos.less'

export default {
	// ...省略
}

使用import将样式表直接导入到代码的效果是：webpack的less-loader会生成一些代码，在页面运行的时候将编译后的less代码生成到<style>标签内并自动插入到页面的<head>中，有一点要注意，这种做法是全局的，在后面介绍路由部分时会有多个组件页面加载到同一个页上，如果使用import导入样式的话，样式就会长期驻留页面直至Vue的根（root）实例被销毁。这样做得缺点是很容易导致样式冲突。如果希望样式表仅应用于当前组件，可以使用<style scoped>，然后使用CSS的@import导入样式表：

<style scoped>
@import '/.assets/todos.less'
</style>

属性绑定
Vue的属性绑定语法是attribute=“expression”，attribute就是元素接收的属性值（既可以是原生的也可以是自定义的），expression则是在Vue组件内由data或props内定义的对象属性，又或是一个合法的表达式。

如果在元素属性中不加上’:’，Vue认为是向这个属性赋上字符串值而不是Vue组件上定义的属性引用。

样式绑定必然是绑定到判断对象上的:class="{'checked': true}"，不能直接写CSS类名，即使要绑定一个固定的CSS类也都要这样写，即:class="{'btn',true}"，除非不使用样式绑定。

无论绑定的是样式类还是样式属性，:class和:style表达式内一定是一个JSON对象。

:class的JSON对象的值一定是布尔型的，true表示加上样式，false表示移除样式类。
:style的JSON对象则像是一个样式配置项，key声明属性名，value则是样式属性的具体值。

过滤器
安装一个很出名的时间格式化专用的包——moment.js
npm i moment -S
Vue中用“过滤器”进行模板格式化，实质上是一个只带单一输入参数的函数，在Vue2中已经将原有的内置过滤器移除。在Vue组件中加入自定义过滤器非常简单，只要在filters属性内加入方法定义就可以在模块上使用了。

引入moment

import moment from 'moment'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')

加入过滤器

export default {
	filters: {
		date(val) {
			return moment(val).calendar()
		}
	}
}

模板上应用

<time>{{todo.created | date}}</time>

在所有过滤器中是没有this引用的，一个undefined值。