1.简单了解前端的发展过程

最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务端到客户端单向流通。开发人员也只关心页面的样式和内容即可。
1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言.
2005年开始，ajax逐渐被前端开发人员所重视，因为不用刷新页面就可以更新页面的数据和渲染效果
2009年，Ryan Dahl在谷歌的Chrome V8引擎基础上，打造了基于事件循环的异步IO框架：Node.js

node.js的伟大之处不在于让JS迈向了后端开发，而是构建了一个庞大的生态系统。 2010年，NPM作为node.js的包管理系统首次发布，开发人员可以遵循Common.js规范来编写 Node.js模块，然后发布到NPM上供其他开发人员使用。目前已经是世界最大的前端包模块管理系统。

在node的基础上出现了很多的前端框架AngularJS、Vue、React等
2014年Vue开始发布，作者尤雨溪

什么是MVVM模式

M：即Model，模型，包括数据和一些基本操作
V：即View，视图，页面渲染结果
VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉）

在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View 中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。

而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的

2.认识Vue

vue官网：https://cn.vuejs.org/

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

前端框架三巨头：Vue.js、React.js、AngularJS，vue.js以其轻量易用著称

3.Node和NPM

node.js官网：https://nodejs.org/

前面说过，NPM是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架，包括 Jquery、AngularJS、VueJs都有。为了后面学习方便，我们先安装node及NPM工具。

Node.js的安装很简单，就是一直下一步就可以了（中间可以自己选择安装目录，安装目录建议纯英文目录）
Node自带了NPM了，在控制台输入 npm -v 查看

npm默认的仓库地址是在国外网站，速度较慢，建议大家设置到淘宝镜像。

# 设置淘宝镜像源
npm config set registry http://registry.npm.taobao.org/
# 检查是否更换成功
npm config get registry

安装完成还要重启下电脑

4.快速搭建环境

4.1.创建空的工程

4.2.npm下载安装vue

输入： npm init -y 进行初始化项目

安装Vue，输入命令： npm install vue@2 --save

然后就会在Hello-Vue目录发现一个node_modules目录，并且在下面有一个vue目录

4.3.第一个vue的实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入vue.js -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- {{}}:接收动态获取name属性的值 -->
        <h1>{{name}},二傻子</h1>
    </div>
</body>
<script>
    //创建vue实例 {}:表示对象
    var app = new Vue({
        el: "#app", //通过id选择标签
        data: { //数据对象，可以设置很多属性，可以在标签中使用，渲染到视图中
        	name:"小三" //构建一个name属性
        }
    });
</script>
</html>

首先通过 new Vue()来创建Vue实例
然后构造函数接收一个对象，对象中有一些属性：
- el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个div，表示vue的作用域
- data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中
  - name：这里我们指定了一个name属性
页面中的 h1 元素中，我们通过{{name}}的方式，来渲染刚刚定义的name属性。

4.4.双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="num">
    <h1>{{name}},二傻子,{{num}}个人喜欢</h1>
</div>
</body>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            name:"小三",
            num:5
        }
    });
</script>
</html>

我们在data添加了新的属性： num
在页面中有一个 input 元素，通过 v-model 与 num 进行绑定。
同时通过 {{num}} 在页面输出
input与num绑定，input的value值变化，影响到了data中的num值
页面 {{num}} 与数据num绑定，因此num值变化，引起了页面效果变化。
没有任何dom操作，这就是双向绑定的魅力

4.5.事件处理双向绑定

我们在页面添加一个按钮

<button v-on:click="num++">点我</button>

这里用 v-on 指令绑定点击事件，而不是普通的 onclick ，然后直接操作num
普通click是无法直接操作num的。

5.Vue实例

5.1.创建Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的

var vm = new Vue({
	// 选项
})

el 指代元素选择器
data 设置当前vue实例所使用的数据，data的值可以是一个对象
methods 定义相关方法

5.2.模板或元素

每个Vue实例都需要关联一段Html模板，Vue会基于此模板进行视图渲染
我们可以通过el属性来指定

<div id="app">

</div>

然后创建Vue实例，关联这个div

var vm = new Vue({
	el:"#app"
})

这样，Vue就可以基于id为 app 的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。

5.3.数据

当Vue实例被创建时，它会尝试获取在data中定义的所有属性，用于视图的渲染，并且监视data中的属性变化，当data发生改变，所有相关的视图都将重新渲染，这就是“响应式“系统。

html

<div id="app">
	<input type="text" v-model="num"/>
</div>

var vm = new Vue({
    el:"#app",
    data:{
    	num:5
    }
})

num的变化会影响到
input 的值 input中输入的值，也会导致vm中的num发生改变

5.4.方法

Vue实例中除了可以定义data属性，也可以定义方法，并且在Vue实例的作用范围内使用。

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入vue.js -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-model:将input的value属性和num变量进行绑定 -->
        <input type="text" v-model="num">
        <!-- v-on:click:绑定点击事件 -->
        <button v-on:click="add">点我</button>
        <h1>{{name}},二傻子,{{num}}个人喜欢</h1>
    </div>
</body>
<script>
    var app = new Vue({
        el: "#app",
            data: {
            name:"小三",
            num:5
        },
        methods: { //构建vue使用自定义函数
            /*add:function (){ //定函数 函数名:function 标准写法
            //this；vue实例
            this.num++;
            }*/
            add(){ //简写形式
            	this.num++;
            }
        }
    });
</script>
</html>

5.5.生命周期钩子函数

生命周期：比如出生 -> 上学 -> 工作 -> 结婚 -> 生孩子 -> 挂墙上，这些操
作其实就是一个人的生命周期。对于vue来说，所谓生命周期其实就是vue实例从创建到销毁
的过程。

所谓的生命周期函数，其实就是生命周期方法，比如servlet中的init方法，这个方法是
servlet生命周期中的一个方法，其特点就是就我们直接写好，不用调用，是在项目启动构
建servlet的时候，tomcat服务器自动调用的。

1.生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板
等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同
的生命周期时，对应的函数就会被自动触发调用。

2.钩子函数

beforeCreated：我们在用Vue时都要进行实例化，因此，该函数就是在Vue实例化时调用，也可以将他理解为初始化函数比较方便一点，在Vue1.0时，这个函数的名字就是init。 created：在创建Vue实例之后进行调用。
created：在创建Vue实例之后进行调用。
beforeMount：页面加载完成，没有渲染。如：此时页面还是{{name}}
mounted：我们可以将他理解为原生js中的window.onload=function({.,.}),或许大家也在用 jquery，所以也可以理解为jquery中的$(document).ready(function(){….})，他的功能就是：在dom文档渲染完毕之后将要执行的函数，该函数在Vue1.0版本中名字为compiled。此时页面中的{{name}}已被渲染成小三
beforeDestroy：该函数将在销毁实例前进行调用。
destroyed：改函数将在销毁实例时进行调用。
beforeUpdate：组件更新之前。
updated：组件更新之后。

1.在Vue中定义一个created函数，created代表在vue实例创建后

// 创建vue实例
var app = new Vue({
    el: "#app", // el即element，该vue实例要渲染的页面元素
    data: { // 渲染页面需要的数据
        name: "小三",
        num: 5
    },
    methods: {
        add: function(){
    		this.num--;
    	}
    },
    created: function () {
    	this.num = 100;
    }
});

2.this

我们可以看下在vue内部的this变量是谁，我们在created的时候，打印this

methods: {
    add: function(){
        this.num++;
        console.log(this);
    }
},A

其实就是创建的vue实例。

6.指令

指令 (Directives) 是带有 `v-` 前缀的特殊属性。指令特性的预期值是：单个JavaScript表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。

6.1.插值表达式

6.1.1.花括号

{{表达式}}

该表达式支持JS语法，可以调用js内置函数（必须有返回值）
表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;
可以直接获取Vue实例中定义的数据或函数

6.1.2.v-text和v-html

使用v-text和v-html指令来替代{{}}

v-text：将数据输出到标签元素内部，如果输出的数据有HTML代码，会作为普通文本输出。
v-html：将数据输出到标签元素内部，如果输出的数据有HTML代码，会被渲染。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入vue.js -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        v-text:<span v-text="hello"></span><br>
        v-html:<span v-html="hello"></span>
    </div>
</body>
<script>
    var app = new Vue({
        el:"#app",
        data:{
        	hello:"<h1 style='color: red'>{{}}替代测试</h1>"
        }
    });
</script>
</html>

6.2.v-model

刚才的v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。

1.既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素标签有

input
select
textarea
checkbox
radio
components（Vue中的自定义组件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue01</title>
    <!-- 1.引入vue.js文件 -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 2.设置div作为vue的作用域（作用范围） -->
    <div id="app">
        <!-- v-model ： 将input标签的value属性的值和language绑定
        如果input标签的类型为checkbox,绑定的language是数组,每个
        checkbox的值，其实是数组的一个元素
        -->
        <input type="checkbox" v-model="language" value="java">java<br>
        <input type="checkbox" v-model="language" value="C++">C++<br>
        <input type="checkbox" v-model="language" value="HTML">HTML<br>
        你选了：{{language.join(",")}}
        <!-- v-model如果是在单个checkbox中使用，默认是boolean -->
        <input type="checkbox" v-model="aa">是否是{{aa}}
    </div>
</body>
<script>
    //3.创建vue实例
    var app = new Vue(
        {
            el: "#app",
            data:{
                language:[],
                aa:true
            }
        }
    );
</script>
</html>

多个 CheckBox 对应一个model模型数据时，model模型数据的类型是一个数组，单个 checkbox，model模型数据默认是boolean类型。
radio对应的值是input的value值。 text 和 textarea 默认对应的model是字符串。
select 单选对应字符串，多选对应也是数组。

6.3.v-on

1.基本用法

v-on指令用于给页面元素绑定事件。

v-on:事件名="js片段或函数名"

另外，事件绑定可以简写，例如v-on:click='add'可以简写为@click='add'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入vue.js -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <button v-on:click="add">加</button>
        <button @click="jian">减</button>
        <h1>{{name}},二傻子,{{num}}个人喜欢</h1>
    </div>
</body>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            name: "小三",
            num: 0
        },
        methods:{
            add:function () {
                this.num++;
            },
            jian:function () {
            	this.num--;
            }
        },
    });
</script>
</html>

2.按键修饰符

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入vue.js -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
    	<!-- 只有在 `keyCode` 是 13 时调用 `show()` -->
    	<input v-on:keyup.13="show">
    </div>
</body>
<script>
    var app = new Vue({
        el:"#app",
        methods:{
            show:function(){
            	alert("哈哈哈哈");
        	}
        },
    });
</script>
</html>

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

<!-- 同上 当按下enter键是，调用vm.submit()提交-->
<input v-on:keyup.enter="submit">

<!-- 缩写语法 -->
<input @keyup.enter="show">

全部的按键别名：

1 .enter

2 .tab

3 .delete (捕获“删除”和“退格”键)

4 .esc

5 .space

6 .up

7 .down

8 .left

9 .right

6.4.v-for

标签内使用，遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。语法是固定的。

1.数组的遍历

v-for="item in items"

items：要遍历的数组，需要在vue的data中定义好模型数据
item：迭代得到的数组元素的载体

<body>
<div id="app">
    <li v-for="user in users">
    	{{user.name}}--{{user.gender}}--{{user.age}}
    </li>
</div>
</body>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            users:[
                {name:'柳岩', gender:'女', age: 21},
                {name:'苍老师', gender:'女', age: 18},
                {name:'范冰冰', gender:'女', age: 24},
                {name:'刘亦菲', gender:'女', age: 18},
                {name:'古力娜扎', gender:'女', age: 25}
            ]
        }
    });
</script>

2.数组角标

在遍历的过程中，如果我们需要知道数组元素角标，可以指定第二个参数：

v-for="(item,index) in items"

items：要迭代的数组
item：迭代得到的数组元素别名
index：迭代到的当前元素索引，从0开始。

<h2 v-for="(user,index) in users">
	{{index}}--{{user.name}}--{{user.gender}}--{{user.age}}
</h2>

3.遍历对象

v-for除了可以迭代数组，也可以迭代对象。语法基本类似

v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"

1个参数时，得到的是对象的属性值
2个参数时，第一个是属性值，第二个是属性名
3个参数时，第三个是索引，从0开始

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 1.引入vue.js -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 2.设置vue的作用域范围 -->
    <div id="app">
        
        <!-- 遍历对象，获取对象中属性值 -->
        <h2 v-for="value in user">
        	{{value}}
        </h2>
        <br>
        
        <!-- 遍历对象，获取对象中属性的名称和值 -->
        <h3 v-for="(value,key) in user">
        	{{key}}:{{value}}
        </h3>
        <br>
        
        <!-- 遍历对象，获取对象中属性的名称和值，并获取对应索引 -->
        <h3 v-for="(value,key,index) in user">
        	{{index}}:{{key}}:{{value}}
        </h3>
        
      </div>
</body>
<script>
    //3.构建vue实例
    var app = new Vue({
        el: "#app",
        data: {
        	user: {name: "胡睿",gender:"男",age:18}
        }
    });
</script>
</html>

6.5.v-if和v-show

1.v-if的基本使用

v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染

v-if="布尔表达式"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 1.引入vue.js -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 2.设置vue的作用域范围 -->
    <div id="app">
    
        <button @click="show = !show">点击</button>
        
        <!-- v-if：根据boolean值设置是否渲染标签元素（隐藏显示） -->
        <h1 v-if="show">
        	展示了
        </h1>
    </div>
</body>
    
<script>
    //3.构建vue实例
    var app = new Vue({
        el: "#app",
        data: {
        	show: true
        }
    });
</script>
</html>

2.与v-for结合

当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 1.引入vue.js -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 2.设置vue的作用域范围 -->
    <div id="app">
        <li v-for="user in users" v-if="user.gender=='女'">
        	{{user.name}}-----{{user.gender}}-----{{user.age}}
        </li>
    </div>
</body>
<script>
    //3.构建vue实例
    var app = new Vue({
        el: "#app",
        data: {
            users:[
                {name:'柳岩',gender:'女',age:21}, //{}在vue中表示对象
                {name:"苍老师",gender:"女",age:35},
                {name: "刘亦菲",gender:"女",age:32},
                {name: "胡歌",gender:"男",age:32},
                {name: "胡睿",gender:"男",age:18}
            ]
        }
    });
</script>
</html>

3.与v-else-if和v-else结合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue01</title>
    <!-- 1.引入vue.js文件 -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 2.设置div作为vue的作用域（作用范围） -->
    <div id="app">
        <h1 v-if="Math.random()>0.75">
        	大于0.75
        </h1>
        <h1 v-else-if="Math.random()>0.5">
        	大于0.5
        </h1>
        <h1 v-else>
        	小于等于0.5
        </h1>
    </div>
</body>
<script>
    //3.创建vue实例
    var app = new Vue(
        {
        	el: "#app"
        }
    );
</script>
</html>

v-else 元素必须紧跟在带 v-if 或者 v-else-if` 的元素的后面，否则它将不会被识别。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue01</title>
    <!-- 1.引入vue.js文件 -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 2.设置div作为vue的作用域（作用范围） -->
    <div id="app">
        <h1 v-if="Math.random()>0.75">
        	大于0.75
        </h1>
        <h1 v-else-if="Math.random()>0.5">
        	大于0.5
        </h1>
        <hr>
        <h1 v-else>
        	小于等于0.5
        </h1>
    </div>
</body>
<script>
    //3.创建vue实例
    var app = new Vue(
        {
        	el: "#app"
        }
    );
</script>
</html>

4.v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 1.引入vue.js -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 2.设置vue的作用域范围 -->
    <div id="app">
    
        <button @click="show = !show">点击</button>
        
        <!-- v-if：根据boolean值设置是否渲染标签元素（隐藏显示） -->
        <h1 v-if="show">
        	v-if展示了
        </h1>
        
        <!-- v-show：根据boolean值设置是否隐藏显示标签 -->
        <h1 v-show="show">
        	v-show展示了
        </h1>
    </div>
</body>
<script>
    //3.构建vue实例
    var app = new Vue({
        el: "#app",
        data: {
        	show: true
        }
    });
</script>
</html>

v-show实现效果和v-if是一模一样的
v-if的值如果是false，是不渲染标签的（没有标签代码），v-show的值如果是false，是渲染标签的（设置标签的属性样式为隐藏）

6.6.v-bind

属性绑定

html属性不能使用双大括号形式绑定，只能使用v-bind指令。

v-bind主要作用是针对标签的属性进行双向绑定，比如image中src：v-bin:src="xxx";
v-bind可以简写为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入vue.js -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--<h1 title={{title}}></h1>-->
        <!--<h1 v-bind:title="title"></h1>-->
        <h1 :title="title"></h1>
    </div>
</body>
<script>
    var app = new Vue({
        el:"#app",
        data:{
        	title:"aaaaaaaa"
        }
    });
</script>
</html>

1.绑定class样式

在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入vue.js -->
    <script src="node_modules/vue/dist/vue.js"></script>
    
    <style>
        .abc{
        color: red;
    }
</style>
</head>
<body>
    <div id="app">
        <!-- <h1 v-bind:class="aa">你好啊</h1>-->
        <h1 :class="aa">你好啊</h1>
    </div>
    
</body>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            aa:"abc"
        }
    });
</script>
</html>

v-bind:class 可以简写为 :class

2.绑定style样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 1.引入vue.js -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 2.设置vue的作用域范围 -->
    <div id="app">
        <div :style="[baseStyles,overridingStyles,fontColor]">
        	v-bind绑定style操作
        </div>
    </div>
</body>
<script>
    //3.构建vue实例
    var app = new Vue({
        el: "#app",
        data: {
            baseStyles: {'background-color': 'green'},
            overridingStyles: {border: '10px solid black'},
            fontColor: {'color':'blue'}
        }
    });
</script>
</html>

标签：Vue,Vue01,name,vue,app,num,实例
From： https://www.cnblogs.com/jiabaolatiao/p/17524048.html

Vue01