慕课网Vue.js入门基础学习笔记——vuejs及相关工具介绍

1、vuejs框架简介

1)准备知识

①　前端开发基础html、css、js。

②　前端模块化基础。

③　对ES6有初步的了解。

 

2)vuejs是一种轻量级的MVVM框架，同时吸收了React和Angular的优点，强调了React组件化的概念，可以轻松的实现数据和展现的分离，也吸收了Angular灵活的指令和页面操作的方法。

 

3)双向绑定

①　在页面上进行的输入会绑定到js代码里的变量。

②　Js代码里的变动也会体现在另外一个调用该变量的页面

 

2、Vuejs开发环境的搭建

1)推荐使用官方提供的命令行工具：

快速下载一套基于vuejs的开发模板，不仅包含了vuejs的框架，还包含了vuejs打包工具、测试工具、开发调试的服务器等，可以不必关心具体的打包和部署的细节，把关注点放在vuejs本身对项目功能的实现上。

 

2)命令行工具的安装及使用

npm：node的一个包管理工具。

Windows系统还需要手动安装git。

技巧：nmp在国内网络环境会很慢，推荐使用淘宝的一个npm镜像（nmp.taobao.org），先使用命令sudi npm install -g cnpm --registry=https://registry.nmp.taobao.org安装cnpm安装到系统，以后使用npm的地方就使用cnpm来进行替换。

步骤：

①　使用命令sudo cnpm install -g vue-cli全局安装vue-cli（-g指的是全局安装，将安装到系统的node目录下，不加-g会安装到当前目录）。

②　初始化一个项目，使用vue init webpack my-project创建一个基于”webpack”的新项目。第一个参数webpack是项目类型，表示使用webpack这套模板来进行压缩和打包，第二个参数my-project是项目名称。

③　使用命令cd my-project进入my-project目录，目录下的src目录是后续开发的目录。Src目录下有App.vue文件和assets文件夹及components文件夹。但是，下载下来的项目并不能直接跑起来，需要下载其依赖。

④　使用命令sudo npm install或sudo cnpm install（较快）可以直接安装所有依赖，因为my-project目录下有一个package.json文件。安装好后my-project目录下会多出一个node_modeules目录。

⑤　使用命令npm run dev运行项目，这时服务器就被启动，它监听的端口是localhost:8080，运用浏览器访问localhost:8080即可看到vuejs的模板页面。随后只需要在src目录下进行具体的项目开发即可。说明一点，vuejs有一个热更新，对App.vue进行修改后，保存，页面会自动进行相应的更新，不需手动刷新。

 
3、从*.vue到页面
用webpack将*.vue打包成.Hml、.css和.js，其中.js其实就是一个新的Vue对象，数据（model）层都在Vue对象里，展现层都在.html里。
Vue.js的一个组件包括：<template></template>包装的html、<style></style>包装的css和<script></script>包装的js。
一个最简单的实例：
<div id="app">
{{message}}
</div>

new Vue({
el: "#app",
data:{
message: "Hello Vue.js"
}
})

 
4、Vue.js组件的重要选项
1)Vue.js组件的重要选项
①　data：所有数据都放在data这个对象中，data中可以进行双向绑定，通过this可以访问数据。
②　methods：所有方法都放在message这个对象中。
③　watch：监听data中的数据变化，数据变化则执行相应的方法。

new Vue({
data: {
a: 1,
b: []
},
methods: {
doSomething: function() {
this.a++;
}
},
watch: {
'a': function(val, oldVal) {
console.log(val, oldVal)
}
}
})

2)模板指令——html和vue对象的粘合剂

模板指令写在html里。
①　数据渲染：v-text、v-html、{{}}
a. 三者不等价，v-text是格式处理了html，v-html保存html结构。
b. 其值都对应到Vue对象数据源里的数据。
<p>{{a}}</p>
<p v-text="a"></p>
<p v-html="a"></p>

new Vue({
data: {
a: 1,
b: []
}
})

②　控制模块隐藏：v-if、v-show
控制元素的显示和隐藏，区别在于v-if直接不渲染这个DOM元素，v-show则是通过css的display:none来进行隐藏，在代码里是能看到这个DOM元素的。
<p v-if="isShow"></p>
<p v-show="isShow"></p>

new Vue({
data: {
isShow: true
}
})

③　渲染循环列表：v-for
渲染Vue对象数据源里的数组列表。
<ul>
<li v-for="item in items">
<p v-text="item.label"></p>
</li>
</ul>

new Vue({
data: {
items: [
{
label: "apple"
},
{
label: "banana"
}
]
}
})

④　事件绑定：v-on

简写模式：@
<button v-on:click="doThis"></button>
<button @click="doThis"></button>

new Vue({
methods: {
doThis: function(someThing) {
}
}
})

⑤　属性绑定：v-bind

对元素的属性的操作。
最常用的是class，v-bind:class可以简写为:class，当然v-bind:src也可以简写为:src。
对于class，假如里面是对象，key指的是class的名字，其值是对这个class是否展现的一个判断；假如里面是数组，则数组元素在data里面是一个字符串，是要直接展示出来的。显然，对象里的变量是布尔值，是对这个class是否展现的一个判断，数组元素则是字符串。
<img v-bind:src=”imageSrc”>
<div :class="{red: isRed}"></div>
<div :class="[classA, classB]"></div>
<div :class="[{classA, {classB: isB, classC: isC}]"></div>

3)小结
①　new一个vue对象时候可以设置它的属性，其中最重要的包括三个，分别是data，methods，watch。其中data代表vue对象的数据，methods代表vue对象的方法，watch设置了对象监听的方法。
②　Vue对象里的设置通过html指令进行关联。
③　重要的指令包括：v-text渲染数据、v-if控制显示、v-on绑定事件、v-for循环渲染等。

5、vuejs学习基础框架代码
Index.html是所有项目的入口，会默认调用main.js。
<app>标签：在vue里面是一个组件，页面上会替换成别的东西，这是组件的载入。App组件写在main.js中。