第一阶段 Vue基础语法-第一集：Vue.js入门基础-CSDN博客

目标：

1，初步了解Vue.js框架

2，介绍vue.js开发环境的搭建和脚手架工具的使用

3，Vue.js具体指令和项目实践（Todolist）

首先我们要理解框架和库的区别

库：库是更多是一个封装好的特定的集合，提供给开发者使用，而且是特定于某一方面的集合（方法和函数），库没有控制权，控制权在使用者手中，在库中查询需要的功能在自己的应用中使用，我们可以从封装的角度理解库；

框架：框架顾名思义就是一套架构，会基于自身的特点向用户提供一套相当于叫完整的解决方案，而且控制权的在框架本身，使用者要找框架所规定的某种规范进行开发。

简单来说：
库是将代码集合成的一个产品，供程序员调用。
框架则是为解决一个(一类)问题而开发的产品

第一章：Vue.js及相关工具介绍

Vue的特点：轻量(渐进式框架)，模块组件化，数据绑定。

多提的一句是Vue特别强调它是一个渐进式的框架，所以这个渐进式是必须要理解的。我们这里引用一段知乎上的解释：

在我看来，渐进式代表的含义是：主张最少。
每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。
比如说，Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西：
- 必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）

所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。

比如React，它也有一定程度的主张，它的主张主要是函数式编程的理念，比如说，你需要知道什么是副作用，什么是纯函数，如何隔离副作用。它的侵入性看似没有Angular那么强，主要因为它是软性侵入。

Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念，也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。
渐进式的含义，我的理解是：没有多做职责之外的事。

直白一点就是，轻量的Vue只包括它最核心的文件，其他的工具你可以按照自己的想法渐进式的加入到自己的项目中。

//第一个Vue实例
<div id="app"> 
{{message}}
<input v-model="message"> 
</div>
----------------------------
var demo = new Vue({
    el:'#app',
    data:{
        message: 'Hello Vue.js'
    }
});
复制代码

Vue的中的组件与模块我们也要区分开来：

模块：侧重于功能或数据的封装，具体来说就像是功能的实现比如说格式化时间。

组件：包含了<template><style><script>而它的<script>可以由多种模块组成，具体来说header，footer这些高复用的页面都要做成组件。

环境安装

我们使用vue-cli命令行工具来构建初始化的Vue项目。

1，安装之前，还需要一些与之配套的环境

Node/Git/webpack/vue-cli/npm或者用淘宝的cnpm

npm为node自带的包管理，无需再次下载，但如果使用cnpm就需要去安装一次

//以上都下载完毕后，打开cmd命令窗口，输入
npm install -g vue-cli
//-g 为全局安装，不加-g会安装到当前目录，下一次使用还要下载，加了安装到node目录下
//当安装完了cli后，vue就变成了一个命令
npm install -g webpack
复制代码

2，我们开始利用 vue-cli构建一个项目

vue init webpack 项目名称（my-first-vue-project）
//接下来就会出现一下的选项
project name: 项目名称
project description 描述
Author 作者
Use EsLint to lint your code? ES的语法检查工具，不推荐使用
Setup unit tests with karma tmocha？ 单元测试，不推荐使用
Setup e2e tests with Nightwotch? 端到端的测试，比如登陆，不推荐使用
复制代码

3，项目的初始化就完成了，我们开始下载依赖

npm install/cnpm install后会产生一个node_modules的文件夹。具体说明看下方

Vue工程化项目中有一个文件夹叫node_modules里面全是该项目的需要的各种依赖包，但为了减少项目体积在上传到git仓库时Vue会限制这个文件夹的上传，但是为了保证项目的依赖，webpack把这些配置都保存在package.json中，我们从git下载到本地后在项目文件夹下，执行npm install/cnpm install会原样的把所有依赖还原，所以下载依赖是必不可少的一个步骤，通常来说cnpm会比npm快很多。

还有一些其他文件的上传限制

多说一句，我刚开始从git下载的Vue项目很长一段时间都找不到运行不了的原因(ノへ￣、)

运行项目

npm run dev/localhost:8080

在项目文件下cmd命令符中执行npm run dev产生一个端口8080在浏览器中输入localhost:8080打开项目

一个项目就执行完成了。。。。ヽ(✿ﾟ▽ﾟ)ノ

注：其实很多命令在项目的文件中就有体现，细心点不难发现就算是dev也存在package.json中

 "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  },
复制代码

模板搭建完毕，在src目录下开发

注：vue-cli还有个酷炫的功能那就是热更新，我们localhost：8080后在代码上做出改动，自动显示到页面上。

项目完成后的打包

当项目完成后就可以打包成本地的项目了，且所有的压缩，打包，路由webpack都会帮你处理好的，npm run build会生成一个dist目录里面就是打包好的本地项目了(* ￣3)(ε￣ *)

我们对上面的*vue到页面的流程做一个总结:o(*≧▽≦)ツ┏━┓

好丑》》(°ー°〃)

接下来我们讲一下Vue中的一些重要选项

<div id="app">{{ message }}</div>

new Vue({
    el:'#app',
    data:{
        message:'Hello Vue'
    }   
 })复制代码

vue首先是一个实例对象

data也是一个对象，并且对象必须是纯粹的对象 (含有零个或多个的 key/value 对)

data:{
    a: 1,
    b:[]
}复制代码

methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

var vm = new Vue({
    data: {
        a: 1
   },
    methods:{
    plus: function(){
        this.a++;
    }
}
});
vm.plus() //调用方法
vm.a // 2
复制代码

watch（监听器）一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

watch:{
    'a':function(val,oldval){
        console.log(val,oldval)
    }
}
//这个a就是上面data中的a，当它发生改变时，watch就做出变化复制代码

模板指令-HTML和Vue对象的粘合剂

数据渲染：v-text {{ 插值表达式 }} v-html

v-text与v-html区别是一个解析html标签渲染，一个是纯文本渲染

这里不建议使用v-html去解析html标签防止xxs攻击（关于xxs自己百度）挺有意思的

控制模板隐藏 v-if v-show

这里的v-if与v-show最大的区别是v-show不会从DOM树上删除这个节点只是隐藏，v-if是懒加载，就是只有达到了它的运行条件它才会执行，它会直接删除该节点，或加载该节点

渲染循环列表： v-for

<ul>
    <li v-for="item in items">
    <p v-text="item.label"></p>
</ul>

data:{
    items:[
        {label:'apple'},
        {label:'banana'}        
      ]
}复制代码

基本上每一个框架都会有关于循环列表的渲染方式

事件绑定 v-on/@

<button @click="doThis"></button>
---------------------------------
methods:{
    doThis: function(){
        //do something
    }
 }复制代码

属性绑定 v-bind/：

还是多用于class与style绑定

<img :src="imgeSrc">

<div :class="{red: isRed}"></div>
<div :class="[classA,classB]"></div>
<div :class="[ classA,{classB:isb,calssC:isc} ]"</div>复制代码

这其中的数组中的是字符串，而对象中的是布尔值

小结：Vue实例中最重要的三个分别是：data，methods，watch其中Vue对象的数据methods是方法，watch是对象监听，vue中的设置通过指令来生效。