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内属性、方法等
目录