文章目录
【遇见狂神说】
https://www.bilibili.com/video/BV18E411a7mC?p=1
vue
vue官网:https://cn.vuejs.org/v2/guide/
注意:Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。
开发版本
- 包含完整的警告和调试模式:https://vuejs.org/js/vue.js
- 删除了警告,30.96KB min + gzip: https://vuejs.org/js/vue.min.js
CDN
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">
</script>
第一个vue程序
Vue.js 的核心是实现了 MVVM 模式,她扮演的角色就是 ViewModel 层,那么所谓的第一个应用程序就
是展示她的数据绑定功能,操作流程如下:
1、创建一个 HTML 文件 01-hello.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>江南</title>
</head>
<body>
</body>
</html>
2、引入 Vue.js
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
3、创建一个 Vue 的实例
<script>
var vm = new vue({
el : "#app",
data : {
message : "hello,vue!"
}
});
</script>
说明:
el:’#vue’ :绑定元素的 ID
data:{message:‘Hello Vue!’} :数据对象中有一个名为 message 的属性,并设置了初始值Hello Vue!
4、将数据绑定到页面元素(视图层)
<div id="app">
{{message}}
</div>
说明:只需要在绑定的元素中使用双花括号将 Vue 创建的名为 message 属性包裹起来,即可实现数据
绑定功能,也就实现了ViewModel层所需的效果,是不是和EL表达式非常像?
1. 基础语法
我们对于基础语法,说白了就是实现元素赋值,循环,判断,以及事件响应即可!
1.1、v-bind
我们还可以使用 v-bind 来绑定元素特性!
<body>
<div id="app">
<!--
如果要将模型数据绑定在html属性中
则使用 v-bind 指令,此时title中显示的是模型数据
-->
<h1 v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息!</h1>
<h1 :title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息!</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
var vm = new Vue({
el : "#app",
data : {
message : '我是悬浮信息!'
}
});
</script>
</body>
你看到的 v-bind 特性被称为指令。指令带有前缀 v- ,以表示它们是 Vue 提供的特殊特性。
除了使用插值表达式{{}}进行数据渲染,也可以使用 v-bind指令,它的简写的形式就是一个冒号(:)
1.2、v-if 系列
- v-if
- v-else-if
- v-else
<body>
<div id="app">
<h1 v-if="type==='A'">A</h1>
<h1 v-else-if="type==='B'">B</h1>
<h1 v-else-if="type==='C'">C</h1>
<h1 v-else>D</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
var vm = new Vue({
el : "#app",
data : {
type : 'A'
}
});
</script>
</body>
测试:观察在控制台输入 vm.type = ‘B’、‘C’、‘D’ 的变化 。
1.3、v-for
语法格式:
<div id="app">
<li v-for="item in items">
{{item.message}}
</li>
</div>
注:items 是数组,item是数组元素迭代的别名。和Thymeleaf模板引擎的语法和这个十分的相似!
代码:03-v-for.html
<div id="app">
<li v-for="item in items">
{{item.message}}
</li>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
var vm = new Vue({
el : "#app",
data : {
items : [
{message : "江南1"},
{message : "江南2"},
{message : "江南3"}
]
}
});
</script>
</body>
测试 :在控制台输入 vm.items.push({message: ‘江南4’}) ,尝试追加一条数据,你会发现
浏览器中显示的内容会增加一条 江南4 .
1.4、v-on
v-on 监听事件:
事件有Vue的事件、和前端页面本身的一些事件!我们这 click 是vue的事件,可以绑定到Vue中的methods 中的方法事件! 简写为一个(@)
代码:04-v-on.html
<body>
<div id="app">
<button v-on:click="sayHi">点我</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
var vm = new Vue({
el : "#app",
data : {
message : 'Hello,World'
},
methods : {
sayHi : function (event) {
alert(this.message);
}
}
});
</script>
</body>
点击测试即可
1.5、v-model
Vue.js 是一个 MVVM 框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。
值得注意的是,我们所说的数据双向绑定,一定是对于 UI 控件来说的,非 UI 控件不会涉及到数据双向绑定。对于我们处理表单,Vue.js 的双向数据绑定用起来就特别舒服了。
你可以用 v-model 指令在表单 < input>、< textarea> 及 < select> 元元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
文本框:
<div id="app">
输入的文本:<input type="text" v-model="message"> 显示的文本:{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
var vm = new Vue({
el : "#app",
data : {
message : ''
}
});
</script>
单选按钮
<div id="app">
性别:
<input type="radio" name="sex" value="男" v-model="checked">男
<input type="radio" name="sex" value="女" v-model="checked">女
<p>
选中了哪个:{{checked}}
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
var vm = new Vue({
el : "#app",
data : {
checked : ''
}
});
</script>
多选按钮
<body>
<div id="app">
多复选框:
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<span>选中的值: {{ checkedNames }}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
<script>
new Vue({
el: '#app',
data: {
checkedNames: []
}
})
</script>
</body>
下拉框
<body>
<div id="app">
下拉框:
<select v-model="checked">
<option value="" disabled>--请选择:--</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>
选中了哪个:{{checked}}
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
var vm = new Vue({
el : "#app",
data : {
checked : ''
}
});
</script>
</body>
注意:
如果 v-model 表达式的初始值未能匹配任何选项,< select> 元素将被渲染为“未选中”状态。
在 iOS 中,这会使用户无法选择第一个选项。因为这样的情况下,iOS 不会触发 change 事件。因此,更推荐像上面这样提供一个值为空的禁用选项。
2. 组件
什么是组件
组件是可复用的 Vue 实例,说白了就是一组可以重复使用的模板,跟 JSTL 的自定义标签、Thymeleaf 的 th:fragment 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织:
例如,你可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、博文之类的组件。
第一个 Vue 组件
注意:在实际开发中,我们并不会用以下方式开发组件,以下方法只是为了让大家理解什么是组件。
使用 Vue.component() 方法注册组件:
06-vue-component.html
<body>
<div id="app">
<component></component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
// 先注册组件
Vue.component("component",{
template : '<li>Hello</li>'
});
// 在实例化 Vue
var vm = new Vue({
el: '#app'
});
</script>
</body>
说明:
- Vue.component():注册组件
- component:自定义组件的名字
- template:组件的模板
使用 props 属性传递参数
像上面那样用组件没有任何意义,所以我们是需要传递参数到组件的,此时就需要使用 props 属性了!
注意:默认规则下 props 属性里的值不能为大写:
<body>
<div id="app">
<component v-for="item in items" v-bind:jiang="item"></component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
// 先注册组件
Vue.component("component",{
props : ['jiang'],
template : '<li>{{jiang}}</li>'
});
// 在实例化 Vue
var vm = new Vue({
el: '#app',
data : {
items : ["江南1","江南2","江南3"]
}
});
</script>
</body>
说明:
- v-for=“item in items” :遍历 Vue 实例中定义的名为 items 的数组,并创建同等数量的组件;
- v-bind:item=“item” :将遍历的 item 项绑定到组件中 props 定义的名为 item 属性上;
- = 号左边的 item 为 props 定义的属性名,右边的为 item in items 中遍历的 item 项的值;
3.Axios
什么是Axios
Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架,她的主要作用就是实现 AJAX异步通信,其功能特点如下:
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API [ JS中链式编程 ]
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF(跨站请求伪造)
GitHub:https://github.com/axios/axios
为什么要使用 Axios
由于 Vue.js 是一个 视图层框架 并且作者(尤雨溪)严格准守 SoC (关注度分离原则),所以Vue.js 并不包含 A JAX 的通信功能,为了解决通信问题,作者单独开发了一个名为 vueresource 的插件,不过在进入 2.0 版本以后停止了对该插件的维护并推荐了 Axios 框架。少用jQuery,因为它操作Dom太频繁!
第一个 Axios 应用程序
1、咱们开发的接口大部分都是采用 JSON 格式,可以先在项目里模拟一段 JSON 数据,数据内容如下:
创建一个名为 data.json 的文件并填入上面的内容,放在项目的根目录下。
{
"name": "江小南...",
"url": "https://www.baidu.com",
"page": 1,
"address": {
"street": "洪崖洞",
"city": "重庆市",
"country": "中国"
}
}
2、测试代码
<body>
<div id="vue" v-cloak>
<div>名称:{{info.name}}</div>
<div>地址:{{info.address.country}}-{{info.address.city}}-
{{info.address.street}}</div>
<div>链接:<a v-bind:href="info.url" target="_blank">{{info.url}}</a>
</div>
</div>
<!--引入 JS 文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#vue',
data() { // 这里是data()方法,区别data属性
return {
info: {
name: null,
address: {
country: null,
city: null,
street: null
},
url: null
}
}
},
mounted() { //钩子函数 基于ES6浏览器
axios.get('../data.json').then(response => (this.info = response.data));
}
});
</script>
</body>
4.vue生命周期
官方文档:https://cn.vuejs.org/v2/guide/instance.html#生命周期图示
Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载 DOM、渲染→更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程,就是生命周期。
在 Vue 的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册 JS 方法,可以让我们用自己注册的 JS 方法控制整个大局,在这些事件响应方法中的 this 直接指向的是 Vue 的实例。
5.计算属性
计算属性的重点突出在“属性”两个字上(属性是名词),首先它是个属性,其次这个属性有计算的能力(计算是动词),这里的“计算”就是个函数;简单点说,它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性),仅此而已;可以想象为缓存!
<body>
<div id="app">
<!--注意,一个是方法,一个是属性-->
<p>调用当前时间的方法:{{currentTime1()}}</p>
<p>当前时间的计算属性:{{currentTime2}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
var vm = new Vue({
el : "#app",
data : {
message : 'Hello,World'
},
methods: {
currentTime1 : function () {
return Date.now();
}
},
computed : { // 这是个属性,不是个方法,这里要注意
currentTime2 : function () {
this.message;
return Date.now();
}
}
});
</script>
</body>
注意:methods 和 computed 里的东西不能重名。
说明:
- methods:定义方法,调用方法使用 currentTime1(),需要带括号;
- computed:定义计算属性,调用属性使用 currentTime2,不需要带括号;this.message 是为了能够让 currentTime2 观察到数据变化而变化;
如果在方法中的值发生了变化,则缓存就会刷新!可以在控制台使用vm.message=“123” 改变下数据的值,再次测试观察效果!
结论:
调用方法时,每次都需要进行计算,既然有计算过程则必定产生系统开销,那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来,采用计算属性可以很方便的做到这一点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存,以节约我们的系统开销;
6.插槽
在 Vue 中我们使用 元素,作为承载分发内容的出口,作者称其为"插槽",可以应用在组合组件的场景中;
比如准备制作一个待办事项组件(todo),该组件由待办标题(todo-title)和待办内容(todo-items)组成,但这三个组件又是相互独立的,该如何操作呢?
第一步: 定义一个待办事项的组件
// slot,插槽
Vue.component('todo', {
template: '<div>\
<div>待办事项</div>\
<ul>\
<li>学习狂神说Java</li>\
</ul>\
</div>'
});
第二步: 我们需要让待办事项的标题和值实现动态绑定,怎么做呢? 我们可以留出一个插槽!
1、将上面的代码留出一个插槽,即 slot
Vue.component('todo', {
template: '<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</div>'
});
2、定义一个名为 todo-title 的待办标题组件 和 todo-items 的待办内容组件
Vue.component('todo-title', {
props: ['title'],
template: '<div>{{title}}</div>'
});
//这里的index,就是数组的下标,使用for循环遍历的时候,可以循环出来!
Vue.component('todo-items', {
props: ['item', 'index'],
template: '<li>{{index + 1}}. {{item}}</li>'
});
3、实例化 Vue 并初始化数据
new Vue({
el: '#app',
data: {
todoItems: ['狂神说Java', '狂神说运维', '狂神说前端']
}
})
4、将这些值,通过插槽插入
<div id="app">
<todo>
<todo-title slot="todo-title" title="秦老师系列课程"></todo-title>
<todo-items slot="todo-items" v-for="(item, index) in todoItems"
v-bind:item="item" v-bind:index="index"></todo-items>
</todo>
</div>
说明:我们的 todo-title 和 todo-items 组件分别被分发到了 todo 组件的 todo-title 和 todo-items 插槽中。
完整代码:
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" title="秦老师系列课程"></todo-title>
<todo-items slot="todo-items" v-for="(item, index) in todoItems"
v-bind:item="item" v-bind:index="index"></todo-items>
</todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
// slot,插槽
Vue.component('todo', {
template: '<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</div>'
});
Vue.component('todo-title', {
props: ['title'],
template: '<div>{{title}}</div>'
});
//这里的index,就是数组的下标,使用for循环遍历的时候,可以循环出来!
Vue.component('todo-items', {
props: ['item', 'index'],
template: '<li>{{index + 1}}. {{item}}</li>'
});
new Vue({
el: '#app',
data: {
todoItems: ['狂神说Java', '狂神说运维', '狂神说前端']
}
})
</script>
</body>
7.进阶:自定义事件
通过以上代码不难发现,数据项在 Vue 的实例中,但删除操作要在组件中完成,那么组件如何才能删除Vue 实例中的数据呢?此时就涉及到参数传递与事件分发了,Vue 为我们提供了自定义事件的功能很好的帮助我们解决了这个问题;使用 this.$emit(‘自定义事件名’, 参数),操作过程如下:
1、在vue的实例中,增加了 methods 对象并定义了一个名为removeTodoItems 的方法
new Vue({
el: '#app',
data: {
title : '秦老师系列课程',
todoItems: ['狂神说Java', '狂神说运维', '狂神说前端']
},
methods: {
removeItems : function (index) {
this.todoItems.splice(index,1);
}
}
})
2、修改 todo-items 待办内容组件的代码,增加一个删除按钮,并且绑定事件!
//这里的index,就是数组的下标,使用for循环遍历的时候,可以循环出来!
Vue.component('todo-items', {
props: ['item', 'index'],
template: '<li>{{index + 1}}. {{item}}<button @click="remove">删除</button></li>',
methods : {
remove : function (index) {
// 调用自定义事件分发
this.$emit('remove',index);
}
}
});
3、修改 todo-items 待办内容组件的 HTML 代码,增加一个自定义事件,比如叫 remove,可以和组件的方法绑定,然后绑定到vue的方法中!
<div id="app">
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="(item, index) in todoItems"
:item="item" :index="index" v-on:remove="removeItems(index)" :key="index"></todo-items>
</todo>
</div>
逻辑理解
完整代码:
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="(item, index) in todoItems"
:item="item" :index="index" v-on:remove="removeItems(index)"></todo-items>
</todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
// slot,插槽
Vue.component('todo', {
template: '<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</div>'
});
Vue.component('todo-title', {
props: ['title'],
template: '<div>{{title}}</div>'
});
//这里的index,就是数组的下标,使用for循环遍历的时候,可以循环出来!
Vue.component('todo-items', {
props: ['item', 'index'],
template: '<li>{{index + 1}}. {{item}}<button @click="remove">删除</button></li>',
methods : {
remove : function (index) {
// 调用自定义事件分发
this.$emit('remove',index);
}
}
});
new Vue({
el: '#app',
data: {
title : '秦老师系列课程',
todoItems: ['狂神说Java', '狂神说运维', '狂神说前端']
},
methods: {
removeItems : function (index) {
this.todoItems.splice(index,1); // 注意这种删除的写法
}
}
})
</script>
</body>
删除成功!
8.Vue 入门小结
核心 : 数据驱动 , 组件化
优点 : 借鉴了 AngulaJS 的模块化开发 和 React 的虚拟Dom , 虚拟Dom就是把Dom操作放到内存中执行;
常用的属性 :
- v-if
- v-else-if
- v-else
- v-for
- v-on 绑定事件 , 简写 @
- v-model 数据双向绑定
- v-bind 给组件绑定参数,简写 :
组件化 :
- 组合组件, slot 插槽。
- 组件内部绑定事件需要使用到 this.$emit(“事件名”,参数) ;
- 计算属性的特色,缓存计算数据
遵循SoC 关注度分离原则,Vue是纯粹的视图框架,并不包含,比如Ajax之类的通信功能,为了解决通信问题,我们需要使用Axios 框架做异步通信;