- 知识准备
- 环境搭建
- hello world
- 开发脚手架介绍
知识准备
- nodejs:
nodejs是一个基于Chrome V8内核的JavaScript运行环境。
在系统环境上直接运行JavaScript代码，不用依托于浏览器。
- 模块化
根据高内聚，低耦合的设计原则，用独立、相互作用的模块，来处理复杂，大型的系统
这个...就不多说了
- npm
npm（全称Node Package Manager，即node包管理器）是Node.js默认的、以JavaScript编写的软件包管理系统。
.NET的nuget，Ruby的Gem，PHP的Composer，珍珠的spm
常见的npm操作
# 根据package.json安装全部包
npm install
# 安装指定包并改写package.json
npm install lodash --save
# 卸载一个包
npm uninstall lodash
- es6的常见语法
语法不是强制的，但稍微了解，有助于阅读官方的demo和别人的代码
let和const分别用于声明作用域变量和常量
let a = 'some string'
const b = Math.PI
箭头函数
var a = [1, 2, 3].map(o => o)
// 等价于
var a = [1, 2, 3].map(function(o) {return o})
解构赋值
var a = {b: 1, c: 2}
var {b, c} = a
console.log(b, c) // -> 1 2
对象简洁表示
var b = 1
var c = 2
var a = {b, c}
// 等价于
var a = {b: b, c: c}
模块调用
// 引入moment模块
import moment from 'moment'
// 创建一个函数返回当前月份
var month = function () {
return moment().format('MM')
}
// 将这个函数作为默认项导出
export default month
更多操作请详读ECMAScript 6 入门
环境搭建
这边先不说了，网上的教程很多 ~
需要的小伙伴，可以提出来，我后面补上。
vue 简单介绍
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的
渐进式框架。
具体教程认真看几遍官方文档就好了
介绍几个基础指令，感受下数据驱动视图的理念
与以往jquery的操作有什么不同
- 数据绑定
- 循环
- 条件
- 事件
- 双向绑定
先来个hello world
v-bind绑定数据，可简写为:，{{}}用于模板声明
<div id="app" v-bind:title="title">
{{ message }}
</div>
const app = new Vue({
el: '#app',
data: function () {
return {
message: 'hello world',
title: 'this is a title'
}
}
})
列表数据处理
v-for用于循环渲染
<div id="app">
<ul>
<li v-for="station in stations">
<span>测站：{{station.name}}</span>
<span>水位：{{station.rz}} m</span>
</li>
</ul>
</div>
const app = new Vue({
el: '#app',
data: function () {
return {
stations: [
{name: '八一', rz: 15.123, flood: 18},
{name: '溪源', rz: 10.142, flood: 12}
]
}
}
})
加个点击事件修改数据
v-on用于绑定事件，可简写为@
<div id="app">
<ul>
<li v-for="station in stations">
<span>测站：{{station.name}}</span>
<span>水位：{{station.rz}} m</span>
<button v-on:click="station.rz += 1">涨</button>
</li>
</ul>
</div>
加个超汛限判断条件
v-if用于标签渲染的逻辑判断
<div id="app">
<ul>
<li v-for="station in stations">
<span>测站：{{station.name}}</span>
<span>水位：{{station.rz}} m</span>
<span v-if="station.rz > station.flood">滴滴滴</span>
<button v-on:click="station.rz += 1">涨</button>
</li>
</ul>
</div>
总共有几个测站超警？加个计算属性统计下
computed用于挂载计算结果
<div id="app">
...省略部分
<p>共有 {{total}} 个测站超过汛限水位</p>
</div>
const app = new Vue({
...,
computed: {
total: function () {
return this.stations.filter(station => station.rz > station.flood).length
}
}
})
我们把刚才的事件方法稍微改造下
methods用于挂载方法
<div id="app">
<ul>
<li v-for="station in stations">
...
<button @click="goup(station)">涨</button>
...
</li>
</ul>
</div>
const app = new Vue({
...,
methods: {
goup: function (station) {
station.rz += 1
}
}
})
看看如何数据双向绑定
v-model用于双向绑定数据
<div id="app">
...省略
<p>共有 {{total}} 个测站超过{{overline}}</p>
<input type="text" v-model="overline">
</div>
const app = new Vue({
el: '#app',
data: function () {
return {
overline: '汛限水位',
...
}
},
...
})
vue实例的生命周期，用力点击
用vue-cli初始化项目
官方提供多套模板选择，同时支持定制
# 用一个官方的简单脚手架做例子
vue init webpack-simple demo
# init 为命令
# webpack-simple 为脚手架名称
# demo 为项目文件夹名称
# 安装完毕后执行即可看到结果
cd demo
npm install
npm run dev
# 在src/App.vue中能看到源码
脚手架运行机制简单介绍(可选了解)
-
先了解
npm命令行的机制# 运行package.json scripts中对应的命令 npm run dev -
再看看对应命令做了什么事情
# 先执行跨平台环境配置，再执行webpack-dev-server cross-env NODE_ENV=development webpack-dev-server --open --hot -
在
webpack.config.js中看webpack相关配置，了解loader相关内容 -
所以，
.vue文件，本质上是被'vue-loader'转换成了js模块，文档 -
webpack默认根据配置，打包各种文件，动态生成build.js文件，然后我们访问'index.html'，即看到结果
网友评论