开始之前，引入一段Vue官方的文字：
官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识。如果你刚开始学习前端开发，将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来吧！之前有其它框架的使用经验会有帮助，但这不是必需的。
怎么理解这段话呢？我个人除了几年前做毕业设计的时候玩过HTML和PHP以外，再没有多余的前端基础，而且那毕设的东西简陋不堪，完全不能构成体系，所以算是一个零基础的小白。但是由于自身是个程序员，所以我初步制定的学习路线大概是：
- Vue基础
- HTML+CSS
- Vue组件
等以上3个阶段渡过之后，希望能直接接触公司项目代码，然后不断从实战中学习。最后，希望这个路线是可行的。
这个学习的过程准备在简书做粗略记录，简单的罗列一下知识点和个人的踩过的坑。
当然，一切的学习要基于文档，在初学阶段文档可以解决你遇到的大多数问题。
1 vue是什么
2 使用
2.1 CDN
这种方式推荐在第一个阶段使用，引入<script>脚本就可以直接使用：
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者：
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
2.2 Vue CLI
这是一个官方提供的脚手架，配合命令行工具可以创建完整的项目工程，不建议初学者直接使用。官方推荐在熟悉 Vue 本身之后再使用 CLI。
3 开始
开始学习Vue.js最简单的方式就是在浏览器中直接使用：JSFinddle。
但是我的学习方式是以HTML、CSS 和 JavaScript的方式将文件分开，这样方便第二阶段的学习，文件结构如下：
第一个vue程序：
index.html文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="[https://cdn.jsdelivr.net/npm/vue/dist/vue.js](https://cdn.jsdelivr.net/npm/vue/dist/vue.js)"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="app.js"></script>
</body>
</html>
app.js文件：
var vm = new Vue({
el : "#app",
data : {
message : "Hello Vue!"
}
})
运行结果
解释：
在上述HTML代码中，在<header>中引入cdn的<script>脚本使其具备运作Vue.js的能力，然后在<body>中把我们自己创建的app.js文件引入。在app.js文件中创建一个Vue对象，并声明一个名为message的属性，在HTML文件中通过{{message}}绑定，发现页面展示出了message属性所对应的字符串。这就是一个最简单的Vue程序。
4 数据和方法
在Vue对象中，首先有一个el字段，用于绑定唯一的<div>标签对应的id。
其次是声明数据和方法，如下：
var vm = new Vue({
el: "#app",
data: {
name: "Ricky"
age: "28"
},
method: {
greet: function() {
return 'Good Morning';
}
}
})
方法中调用对象数据： this.name, this.age。
5 属性绑定 v-bind
在<a>标签中，通过v-bind:href把跳转链接与data中的属性绑定:
data: {
url: "http://www.baidu.com"
}
<a v-bind:href="url"> 百度 </a>
将data中的属性，绑定给<input>标签：
data: {
job: "iOS coder"
}
<input type="text" v-bind:value="job">
6 原始html v-html
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML标签，你需要使用 v-html 指令：
data: {
rawHtml: "<span style='color: red'>Red Color</span>"
},
<span v-html="rawHtml"></span>
7 事件 单机/双击/鼠标/键盘 v-on
单机 click
<button v-on:click=“add()”> 加 </button>
双击 dblclick
<button v-on:dblclick=“add()”> 加 </button>
鼠标移动 mousemove
methods: {
updatemouse: function(event) {
// console.log(event);
this.x = event.offsetX;
this.y = event.offsetY;
}
}
<div id="canvas" v-on:mousemove="updatemouse">
{{x}}, {{y}}
</div>
8 事件修饰符
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。
- .stop
- .prevent
- .capture
- .self
- .once
- .passive
9 双向数据绑定
input/select/textarea
9.1 ref的key
logName: function() {
this.name = this.$refs.key.value
}
<input ref="key" type="text" v-on:keyup="logName">
<span> {{name}} </span>
9.2 v-model指令
data : {
message: ""
}
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
10 计算属性
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
Original message: "Hello"
Computed reversed message: "olleH"
方法和计算属性的区别：
不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>New message: "{{ methodMessage() }}"</p>
<p>New message: "{{ computedMessage }}"</p>
</div>
js:
methods: {
methodMessage: function() {
return this.message.split('').reverse().join('')
}
},
computed: {
computedMessage: function() {
return this.message.split('').reverse().join('')
}
},
相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
在耗时操作、优化性能时，可以选择计算属性
11 绑定css样式
形式1：绑定样式可以与class属性并存
形式2：绑定样式可以定义在标签外
<div v-bind:class="classObject"></div>
data: {
classObject: {
active: true,
'text-danger': false
}
}
形式3：绑定时返回一个计算属性，常用
<div v-bind:class="classObject"></div>
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
12 v-if v-else v-show
v-if:
<p v-if = "error"> 404 </p>
v-if 与 v-else:
v-else 必须跟在 v-if 或 v-else-if 后面。否则不会被识别
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
多个元素：
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
v-else-if:
充当 v-if 的 else-if 块，需要紧跟在 v-if 或者 v-else-if 后
<p v-if = "error">
404
</p>
<p v-else-if = "success">
200
</p>
v-show:
<h1 v-show="ok">Hello!</h1>
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
注意，v-show 不支持 <template> 元素，也不支持 v-else。
13 v-for 循环
可以遍历数组，也可以遍历对象
遍历数组:
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
也可以使用 of 替代 in，如下：
<div v-for="item of items"></div>
遍历对象:
new Vue({
el: '#v-for-object',
data: {
object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
})
一个参数：
<li v-for="value in object">
{{ value }}
</li>
两个参数：
<div v-for="(value, key) in object">
{{ key }}: {{ value }}
</div>
三个参数：
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>
小结：
第一个阶段的Vue基础学习非常重要，我这里只是做了一些简单的记录，这些基础的用法在初学阶段需要随时查阅，每个小知识点都需要自己再花时间去深入了解。
如果有需要，这个把这个列表中的知识点转到自己的笔记中，方便查阅。
下个阶段需要学习一些HTML+CSS的基础知识，掌握一些常用标签和CSS技术，下个阶段结束以后便可以开始尝试构建简单的静态页面了。
前两个阶段的学习，我大概花费5-7天的时间，完成之后不妨把自己公司的产品挑几个页面自己实现一下。
网友评论