1.需要下载vue.js文件 在<script src="vue.js"></script>中配置文件路径
2.修改idea中设置 settings--->Languages&Frameworks--->JavaScript (ECMAScript6) 修改为5以上
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>hello-vue</title>
</head>
<body>
<div id="app">
呦西 div<br>
{{name}}
<p>
{{sex}}
</p>
<button v-on:click="clickMe">点我弹出来的是vue里面的内容</button><br>
<!--插值表达式 可以支持数学和逻辑运算-->
{{1+1}} <br>
{{new Date()}} <br>
{{1==1?'true':'false'}} <br>
v-html:<span v-html="hello"></span>
<br>
v-text:<span v-text="hello"></span>
</div>
<script src="vue.js"></script>
<!--js vue 数据模型层 -->
<script>
var vue = new Vue({
el:"#app", // el 绑定页面标签 模板或者元素
// 数据模型声明
data:{
name:'vue里面可以控制div内容',
age:12,
sex:'male',
hello:'<h1>vue里面可以控制div内容</h1>'
},
<!-- 方法是methods-->
methods:{
clickMe:function (){
alert("呦西呦西")
}
}
})
</script>
</body>
</html>Vue
1. vue.js介绍
Vue.js是一套用于构建用户界面的渐进式javascript框架。
Vue.js 官方网站
渐进式框架：说明vue.js的轻量，是指一个前端项目可以使用vue.js一两个特性也可以整个项目都用vue.js。
1.1. Vue.js与ECMAScript
Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。 什么是ECMAScript?（一套脚本语言的规范），Javascript是基于这个规范的实现语言之一。 ECMAScript（简称ES）是一种规范，规定了浏览器脚本语言的标准,我们平常所说的Js/Javascript是ECMAScript的实现，早期主要应用的ES3，当前主流浏览器都支持ES5、ES6等等，ES8已于2017年发布。
所以在使用vue之前，先将IDEA中JavaScript语法的版本指定为ECMAScript5以上。
1.2. vue.js功能介绍
-
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
比如：使用vue.js的插值表达式放在Dom的任意地方，插值表达式的值将被渲染在Dom中。
通过插值表达式：<div>{{name}}</div>就可以将数据显示在页面上
-
条件与循环
dom中可以使用vue.js提供的v-if、v-for等标签，方便对数据进行判断、循环。
-
双向数据绑定
Vue 提供v-model指令，它可以轻松实现Dom元素和数据对象之间双向绑定，即修改Dom元素中的值自动修改绑定的数据对象，修改数据对象的值自动修改Dom元素中的值。
-
处理用户输入（事件监听）
为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法
-
vue 优点
1.3 MVVM模式
vue.js是一个MVVM的框架，理解MVVM有利于学习vue.js。
MVVM拆分解释为：将视图 UI 和业务逻辑分开
- Model:负责数据模型和业务模型 (开发人员要进行相关的代码开发) - View:负责页面展示数据 （view负责页面数据的渲染） - View Model: 模型和视图之间的双向操作（无需开发人员进行代码开发） - MVVM要解决的问题是将业务逻辑代码与视图代码进行完全分离，使各自的职责更加清晰，后期代码维护更加简单。
说明：
在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过操作DOM将Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。
而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的：
-
只要我们Model发生了改变，View上自然就会表现出来。
-
当用户修改了View，Model中的数据也会跟着改变。
把开发人员从繁琐的DOM操作中解放出来，把关注点放在如何操作Model上
1.4 Vue安装
vue安装的形式可以有多种的， 可以直接引入对应的Js脚本，也可以使用脚手架安装。
2. VUE入门
1:打开vue--示例代码--入门案例。
2:导入vue.js
3:在script中 创建vue对象
4:在对象设置
el:""，//绑定视图
data:{ //设置数据
name:"jack"
}
5:在对应的视图位置 使用插值表达式完成 绑定数据的获取
{{name}}
编写vue入门代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello-vue</title>
</head>
<body>
<div id="app">
标签获取数据模型绑定数据<br>
{{name}}
<p>
{{sex}}
</p>
</div>
<script src="../js/vue.js"></script>
<!--js vue 数据模型层 -->
<script>
// 获取 vue 对象 json
var vue = new Vue({
el:"#app", // el 绑定页面标签
// 数据模型声明
data:{
name:'你好',
age:12,
sex:'male'
}
})
</script>
</body>
</html>
Vue() 对象 里面两个参数 ： el和 data
el : 页面标签元素挂载
data: 展示的数据 格式： {} js对象形式
-
测试，浏览器访问页面
vue入门程序编写完成！ 大家可以看到 只需要修改数据模型， 页面将自动更新最新的数据！ 省去中间的js代码！
小结： 为什么我们要使用vue?
- 使用vue可以更快捷的开发，将模型数据和页面展示分离，开发人员无需关心数据如何更新的问题
- 使用vue开发步骤简单，
1. 先声明数据模型对象
2. 在页面标签位置，展示对应的数据即可
- 初学者重点要掌握：
1. 语法如何声明数据模型对象
2. 页面展示数据{{}}等特定语法
4. Vue 对象中常用的属性（重点）
4.1 创建Vue实例
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：
var vue = new Vue({
// 选项
el:"#挂载原始ID",
data:{
属性:值,
属性:值
},
methods:{
方法名:function(){},
方法名:function(){}
}
})
在构造函数中传入一个对象，并且在对象中声明各种Vue需要的数据和方法，
我们要重点先掌握三个属性如下：
-
el 挂载页面标签
-
data 数据模型对象
-
methods 声明函数 绑定 页面监听事件 click blur ...keyup...
4.2.模板或元素 el
每个Vue实例都需要关联一段Html模板，Vue会基于此模板进行视图渲染。
我们可以通过el属性来指定。
例如一段html模板：
<div id="app"> </div>
然后创建Vue实例，关联这个div
var vue = new Vue({
el:"#app"
})
这样，Vue就可以基于id为app的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。
4.3.数据 data
当Vue实例被创建时，它会尝试获取在data中定义的所有属性，用于视图的渲染，并且监视data中的属性变化，当data发生改变，所有相关的视图都将重新渲染，这就是“响应式“系统。
html：
<div id="app">
{{name}}
</div>
js:
var vm = new Vue({
el:"#app",
data:{
name:"刘德华" // data 区域 就是我们常说的数据模型对象！
}
})
-
name的变化会影响到div标签内的值
4.4.方法 methods
Vue实例中除了可以定义data属性，也可以定义方法，并且在Vue的作用范围内使用。
一般方法都会和对应的事件绑定：
语法格式： v-on:click="函数名称"
效果：点击事件触发对应的函数
-
示例代码：
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="app">
你好：{{name}}
<button v-on:click="clickMe">点击我</button>
</div>
<script src="../js/vue.js"></script>
<!--js vue 数据模型层 -->
<script>
var vue = new Vue({
el:"#app",
data:{name:'lisi'},
methods:{
clickMe:function () {
alert("弹弹弹。。。弹走鱼尾纹")
}
}
})
</script>
</body>
</html>
5. VUE指令-进阶学习
5.1 单向绑定
5.1.1 插值表达式
一般用来获取vue数据模型中定义的数据
语法 {{表达式}}
说明：
-
该表达式支持JS语法，可以调用js内置函数（必须有返回值）如：new Date()
-
表达式必须有返回结果，例如 1 + 1。没有结果的表达式不允许使用，如：var a = 1 + 1。
-
可以直接获取Vue实例中定义的数据或函数
-
插值表达式 不可以使用在标签内的属性值上 一定注意！
示例代码：
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="app" >
<!--插值表达式 可以支持数学和逻辑运算-->
{{1+1}}
{{1==1?'true':'false'}}
<br>
<!--插值表达式可以支持js内置函数-->
{{new Date()}}
<br>
<!--获取数据模型中数据-->
{{name}}
</div>
<script src="../js/vue.js"></script>
<!--js vue 数据模型层 -->
<script>
var vue = new Vue({
el:"#app",
data:{name:'程序员'}
})
</script>
</body>
</html>
测试效果：
小结： 插值表达式一般用来获取数据模型中对应的数据，要求书写在标签体中 ，不可以出现在标签的属性中！
举例： 在上面的题目中： div 标签 添加一个属性 aa=''{{name}}"
我们运行程序发现报错！
关于标签属性值获取：后续我们讲解v-bind 来解决此问题！
5.1.2 v-text和v-html
标签显示文本数据， 我们也可以使用v-text和v-html指令来替代{{}}
语法：
v-text="数据模型定义的数据" v-html="数据模型定义的数据"
说明：
-
v-text： 将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
-
v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染
示例代码：
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="app" >
v-html:<span v-html="hello"></span>
<br>
v-text:<span v-text="hello"></span>
</div>
<script src="../js/vue.js"></script>
<!--js vue 数据模型层 -->
<script>
var vue = new Vue({
el:"#app",
data:{hello:'<h1>大家好,我是刘德华</h1>'}
})
</script>
</body>
</html>
小结： v-text 或者 v-html 一般都使用在页面标签，用于显示标签文本或html片段！
5.1.3 v-bind:属性名或：属性名
v-bind 用于将vue的值绑定给对应dom的属性值
主要用于对标签的元素属性赋值
语法： v-bind:元素属性名="数据模型定义的初始数据" // 简化语法 :元素属性名="数据模型定义的初试数据"
-
示例代码：
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="app" >
固定跳转
<a href="http://www.baidu.com">百度</a><br>
动态跳转
<a v-bind:href="forwardUrl">{{forwardTitle}}</a><br>
<br>
原始语法如下：
<div v-bind:hidden="hiddenValue">v-bind test</div><br>
简化写法
<div :hidden="hiddenValue">v-bind test</div>
</div>
<script src="../js/vue.js"></script>
<!--js vue 数据模型层 -->
<script>
var vue = new Vue({
el:"#app",
data: {
hiddenValue:false, // 页面元素不影藏 ， 如果是true表示隐藏页面元素
forwardUrl:"http://www.baidu.com",
forwardTitle:"呦西"
}
})
</script>
</body>
</html>
5.2 双向绑定（v-model）
v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。
接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。
语法：v-model="vue中data的属性"
目前v-model的可使用元素有： 作用范围
-
input
-
select
-
textarea
-
checkbox
-
radio
-
components（Vue中的自定义组件）
基本上除了最后一项，其它都是表单的输入项。
-
示例代码：
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="app" >
<input v-model="name"/>
<div>
你输入了{{name}}
</div>
<hr>
<input type="radio" name="sex" value="male" v-model="sex"> 男性
<input type="radio" name="sex" value="female" v-model="sex"> 女性
<div>
你选择了{{sex}}
</div>
<hr>
<div>
<select name="xueli" v-model="xueli">
<option value="chuzhong">初中</option>
<option value="gaozhong">高中</option>
<option value="daxue">大学</option>
<option value="boshi">博士</option>
</select>
</div>
<div>
你选择了{{xueli}}
</div>
<hr>
<input type="checkbox" v-model="ischecked" />是否选中<br/>
单选框：{{ischecked}}
<hr>
<input type="checkbox" v-model="language" value="Java" />Java<br/>
<input type="checkbox" v-model="language" value="PHP" />PHP<br/>
<input type="checkbox" v-model="language" value="GO" />GO<br/>
<div>
多选框：{{language}}
</div>
</div>
<script src="../js/vue.js"></script>
<!--js vue 数据模型层 -->
<script>
var vue = new Vue({
el:"#app",
data:{
name:"xiaoli",
sex:"male",
xueli:"boshi",
language: [],// 对于多选框 我们用数组array来接受多个选项值！
ischecked: true // 对于一个选项框： boolean 来定义
}
})
</script>
</body>
</html>
小结：
-
页面展示的数据，来源于我们的数据模型 data定义
-
多个
CheckBox对应一个model时，model的类型是一个数组，单个checkbox值是boolean类型 -
radio对应的值是input的value值
-
input和textarea默认对应的model是字符串 -
select单选对应字符串，多选对应也是数组
5.3 事件绑定(v-on或@)
v-on指令用于给页面元素绑定事件
语法：格式 v-on:事件名="js片段或函数名" 缩写: @事件名="js片段或函数名" 例如：v-on:click='add' 可以简写为 @click='add'
-
示例代码：
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="app" >
<!--事件中，简单js片段可以直接写-->
<button @click="increment">增加</button>
<!--事件中复制逻辑可以调用函数-->
<button @click="decrement">减少</button>
<h1>{{num}}</h1>
</div>
<script src="../js/vue.js"></script>
<!--js vue 数据模型层 -->
<script>
var vue = new Vue({
el:"#app",
data:{
num:0
},
methods:{
decrement:function () {
this.num--;
},
increment:function () {
this.num++;
}
}
})
</script>
</body>
</html>
5.4.v-for
遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。
5.4.1.遍历数组
语法：v-for="item in items"
-
items：要遍历的数组，需要在vue的data中定义好。
-
item：迭代得到的数组元素的别名
-
示例代码
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>v-for</title>
</head>
<body>
<div id="app">
<!--遍历数组 -->
<table width="100%" border="1px">
v-for位置：在需要遍历的元素父元素中书写
<tr v-for="user in users">
<td >{{user.name}}</td>
<td v-text="user.gender"></td>
<td v-text="user.age"></td>
</tr>
</table>
</div>
<script src="../js/vue.js"></script>
<!--js vue 数据模型层 -->
<script>
var app = new Vue({
el: "#app",
data:{
// 定义数组对象 遍历的数据源
users:[
{name:'柳岩', gender:'女', age: 20},
{name:'有哥', gender:'男', age: 30},
{name:'范冰冰', gender:'女', age: 24},
{name:'刘亦菲', gender:'女', age: 18},
{name:'古力娜扎', gender:'女', age: 25}
]
}
});
</script>
</body>
</html>
5.4.2.数组角标
在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：
语法 v-for="(item,index) in items"
-
items：要迭代的数组
-
item：迭代得到的数组元素别名
-
index：迭代到的当前元素索引，从0开始。
-
示例代码
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="app" >
<table width="100%" border="1px">
<tr v-for="(user,index) in users">
<!--<td >{{index+1}}</td> 或者下面写法 -->
<td v-text="index+1"></td>
<td v-text="user.name"></td>
<td v-text="user.age"></td>
<td v-text="user.gender"></td>
</tr>
</table>
</div>
<script src="../js/vue.js"></script>
<!--js vue 数据模型层 -->
<script>
var vue = new Vue({
el:"#app",
data:{
// 定义数组对象 遍历的数据源
users:[
{name:'柳岩', gender:'女', age: 20},
{name:'有哥', gender:'男', age: 30},
{name:'范冰冰', gender:'女', age: 24},
{name:'刘亦菲', gender:'女', age: 18},
{name:'古力娜扎', gender:'女', age: 25}
]
}
})
</script>
</body>
</html>
5.5.v-if
5.5.1.v-if &v-else 使用
v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。
语法：
v-if="布尔表达式" v-else
示例代码
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="app" >
<button @click="flag=!flag">点我试试</button>
<p v-if="flag">你好 黑马程序员</p>
<p v-else="flag">你好 传智播客</p>
</div>
<script src="../js/vue.js"></script>
<!--js vue 数据模型层 -->
<script>
var vue = new Vue({
el:"#app",
data:{
flag:false
}
})
</script>
</body>
</html>
效果：
点击我试试 会看到 p 标签变化，根据条件 显示一个p标签对象
5.5.2.v-else-if嵌套(了解)
v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：
示例代码
<div id="app" >
<div v-if="type=='A'">
A
</div>
<div v-else-if="type=='B'">
B
</div>
<div v-else-if="type=='C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
type:"D"
}
})
</script>
类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
6. Vue生命周期
- 每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等等。 - Vue为生命周期中的每个状态都设置了监听函数。 - 每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。 - vue的生命周期中具体做了什么事情我们通常不需要关心，我们只要关注生命周期的8个监听函数。
6.1 生命周期流程图：
上图描述了详细的Vue对象的整个生命周期，这里我们提取出里面重点的地方，简化为下面这个流程图：
6.2 监听函数
vue的整个生命周期中，提供了8个监听函数，以便我们可以在某个生命周期段根据需要做相应的操作：
-
beforeCreate：在vue实例创建前调用
-
created：在vue实例创建后调用,这个监听函数是最常用的，这个时候会初始化data数据，通常去后端取数据；
-
beforeMount：在挂载开始之前被调用 。 什么是挂载？可以将vue对象和视图模板进行关联的过程看作是挂载
-
mounted：挂载到实例上去之后调用
-
beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前
-
updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
-
beforeDestroy：实例销毁之前调用。在这一步，vue实例仍然完全可用。
-
destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
-
示例代码
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
<script src="../js/vue.js"></script>
<!--js vue 数据模型层 -->
<script type="text/javascript">
var vue = new Vue({
el: '#app',
data: {
message: "we are 伐木累!"
},
beforeCreate: function () {
console.group('beforeCreate 创建前状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el); //undefined
console.log("%c%s", "color:red", "data : " + this.$data); //undefined
console.log("%c%s", "color:red", "message: " + this.message)
},
created: function () {
console.group('created 创建完毕状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el); //undefined
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
},
beforeMount: function () {
console.group('beforeMount 挂载前状态===============》el');
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
},
mounted: function () {
console.group('mounted 挂载结束状态===============》');
console.log(this.$el); //已被挂载，就是当前指向的el元素
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.log('beforeUpdate 即将更新渲染=');
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log(this.$data);
console.log("%c%s", "color:red", "message: " + this.message);
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log(this.$data);
console.log("%c%s", "color:red", "message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message)
}
})
</script>
</body>
</html>
-
运行效果
小结： 了解生命周期，掌握常用的 created方法！ 可以理解 页面标签数据初始化之前执行的方法！
通常在此方法中，我们发起后台数据请求，在渲染页面标签数据之前，先获取后台数据，进行data 数据的模型赋值！
6.3 this对象的说明
我们可以看下在vue内部的this变量是谁，我们在created的时候，打印this
var vue = new Vue({
el:"#app",
data:{
hello: '' // hello初始化为空
},
created(){
thishello = "hello, world！ 我出生了！";
console.log(this);
}
})
控制台的输出：
总结：
this就是当前的Vue实例，在Vue对象内部，必须使用this才能访问到Vue中定义的data内属性、方法等
目录
3532
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
