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值。