VUE
1.前端三要素
-
HTML(结构):超文本标记语言(Hyper Text Markup Language),决定网页的结构和内容
-
CSS(表现):层叠样式表(Cascading Style Sheets),设定网页的表现样式
-
JavaScript(行为):是一种弱类型脚本语言,其源代码不需经过编译,而是由浏览器解释运行,用于控制网页的行为。
结构层(HTML)
表现层(CSS)
CSS 层叠样式表是一门标记语言,并不是编程语言,因此不可以自定义变量,不可以引用等,换句话说就是不具备任何语法支持,此时需要CSS预处理器
什么是CSS预处理器
CSS 预处理器定义了一种新的语言。用一种专门的编程语言,进行 Web 页面样式设计,再通过编译器转化为正常的 CSS 文件,以供项目使用。
常见css预处理器
- SASS:基于 Ruby,通过服务端处理,功能强大。
- LESS:基于 NodeJS,通过客户端处理,使用简单。
行为层(JavaScript)
JavaScript 一门弱类型脚本语言,其源代码在发往客户端运行之前不需经过编译,而是将文本格式的字符代码发送给浏览器由浏览器解释运行。
- ES5(全浏览器支持)
- ES6(常用,当前主流版本:webpack打包成为ES5支持!)
2.JavaScript框架
jQuery库
大家最熟知的 JavaScript 库,优点是简化了 DOM 操作,缺点是 DOM 操作太频繁,影响前端性能;在前端眼里使用它仅仅是为了兼容 IE6、7、8
Angular
Google 收购的前端框架,由一群 Java 程序员开发,其特点是将后台的 MVC 模式搬到了前端并增加了模块化开发的理念,与微软合作,采用 TypeScript 语法开发;对后台程序员友好,对前端程序员不太友好;最大的缺点是版本迭代不合理(如:1代 -> 2代,除了名字,基本就是两个东西;已推出了Angular6)
React
Facebook 出品,一款高性能的 JS 前端框架;特点是提出了新概念 【虚拟 DOM】 用于减少真实 DOM操作,在内存中模拟 DOM 操作,有效的提升了前端渲染效率;缺点是使用复杂,因为需要额外学习一门 【JSX】 语言;
Vue
一款渐进式 JavaScript 框架,所谓渐进式就是逐步实现新特性的意思,如实现模块化开发、路由、状态管理等新特性。其特点是综合了 Angular(模块化) 和 React(虚拟 DOM) 的优点;
Axios
前端通信框架;因为 Vue 的边界很明确,就是为了处理 DOM,所以并不具备通信能力,此时就需要额外使用一个通信框架与服务器交互;当然也可以直接选择使用 jQuery 提供的 AJAX 通信功能;
js构建工具
- WebPack:模块打包器,主要作用是打包、压缩、合并及按序加载
3.UI框架
常用
- Ant-Design:阿里巴巴出品,基于 React 的 UI 框架
- ElementUI、iview、ice:饿了么出品,基于 Vue 的 UI 框架
- Bootstrap:Twitter 推出的一个用于前端开发的开源工具包
- AmazeUI:又叫“妹子 UI”,一款 HTML5 跨屏前端框架
- Layui:轻量级框架
Element-UI
Element 是饿了么前端开源维护的 Vue UI 组件库,组件齐全,基本涵盖后台所需的所有组件,文档讲解详细,例子也很丰富。主要用于开发 PC 端的页面,是一个质量比较高的 Vue UI 组件库。
[官网地址] http://element-cn.eleme.io/#/zh-CN
[Github] https://github.com/ElementUI/element-starter
[vue-element-admin] https://github.com/PanJiaChen/vue-element-admin
主要特点是桌面端支持较多
iView
iview 是一个强大的基于 Vue 的 UI 库,有很多实用的基础组件比 elementui 的组件更丰富,主要服务于PC 界面的中后台产品。使用单文件的 Vue 组件化开发模式 基于 npm + webpack + babel 开发,支持ES2015 高质量、功能丰富 友好的 API ,自由灵活地使用空间。
[官网地址] https://www.iviewui.com/
[Github] https://github.com/TalkingData/iview-weapp
[iview-admin] https://github.com/iview/iview-admin
主要特点是移动端支持较多
4.第一个Vue程序
简介
Vue 是一套用于构建用户界面的渐进式框架,发布于 2014 年 2 月。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库(如:vue-router,vue-resource,vuex)有项目整合。
MVVM模式实现者
- Model:模型层,在这里表示 JavaScript 对象
- View:视图层,在这里表示 DOM(HTML 操作的元素)
- ViewModel:连接视图和数据的中间件,Vue.js 就是 MVVM 中的 ViewModel 层的实现者
在 MVVM 架构中,是不允许 数据 和 视图 直接通信的,只能通过 ViewModel 来通信,而 ViewModel就是定义了一个 Observer 观察者。 - ViewModel 能够观察到数据的变化,并对视图对应的内容进行更新
- ViewModel 能够监听到视图的变化,并能够通知数据发生改变
至此,我们就明白了,Vue.js 就是一个 MVVM 的实现者,他的核心就是实现了 DOM 监听与数据绑定。
第一个Vue程序准备
CDN
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
//包含完整的警告和调试模式
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
//删除了警告,
Hello.Vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>kk说</title>
</head>
<body>
<div id="vue">
{{message}}
</div>
<!--使用vue需要先引入-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm=new Vue({
el:'#vue',//绑定元素的 ID
data:{
message:'Hello,Vue!'//数据对象中有一个名为 message 的属性,并设置了初始值
}
});
</script>
</body>
</html>
说明:
- 只需要在绑定的元素中使用 双花括号 将 Vue 创建的名为 message 属性包裹起来,即可实现数据绑定功能,也就实现了 ViewModel 层所需的效果。
- 在控制台输入
vm.message = 'Hello World'
,然后 回车,你会发现浏览器中显示的内容会直接变成 Hello World!(借助了 Vue 的 数据绑定 功能实现) - 我们已经成功创建了第一个 Vue 应用!看起来这跟渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。我们在控制台操作对象属性,界面可以实时更新
5.基础语法
实现元素赋值,循环,判断,以及事件响应等!
v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>kk说vue</title>
</head>
<body>
<div id="app">
<!--如果要将模型数据绑定在html属性中,则使用 v-bind 指令,此时title中显示的是模型数据-->
<h1 v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息!</h1>
<!-- v-bind 指令的简写形式: 冒号(:) -->
<h1 :title="message">我是标题</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
message:'页面加载于'+new Date().toLocaleString()
}
})
</script>
</body>
</html>
说明:
- 指令带有前缀 v- ,以表示它们是 Vue 提供的特殊特性。
- 除了使用插值表达式{{}}进行数据渲染,也可以使用 v-bind指令,它的简写的形式就是一个冒号(:)
v-if系列
- v-if
- v-else-if
- v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="ap">
<h1 v-if="type==='A'">A</h1>
<h1 v-else-if="type==='B'">B</h1>
<h1 v-else>C</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm=new Vue({
el:'#ap',
data:{
type:'A'
}
})
</script>
</body>
</html>
测试:观察在控制台输入 vm.type = ‘B’、‘C’、‘D’ 的变化!
v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="appp">
<li v-for="item in items">
{{item.message}}
</li>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm=new Vue({
el:'#appp',
data:{
//items 是数组,item是数组元素迭代的别名
items:[
{message:'kk说java'},
{message:'kk说前端'}
]
}
})
</script>
</body>
</html>
测试 :在控制台输入 vm.items.push({message: 'kk说运维'})
,尝试追加一条数据,你会发现浏览器中显示的内容会增加一条 kk说运维
v-on
v-on 监听事件:
事件有Vue的事件、和前端页面本身的一些事件!我们这 click 是vue的事件,可以绑定到Vue中的methods 中的方法事件!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>kk说vue</title>
</head>
<body>
<div id="add">
<!--在这里我们使用了v-on绑定了click事件,并指定了名为sayHi事件-->
<button v-on:click="sayHi">点我</button>
<!--v-on 指令的简写形式 @ -->
<button @click="sayHi">点我</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm=new Vue({
el:'#add',
data:{
message:'hello world!'
},
// 方法必须定义在 Vue 实例的 methods 对象中
methods:{
sayHi:function (event) {
alert(this.message);
//this在当前方法里指向当前的methods
}
}
})
</script>
</body>
</html>
v-model
-
用 v-model 指令在表单 < input>、< textarea> 及 < select> 元元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理.
-
Vue.js 是一个 MVVM 框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了.
-
值得注意的是,我们所说的数据双向绑定,一定是对于 UI 控件来说的,非 UI 控件不会涉及到数据双向绑定。对于我们处理表单,Vue.js 的双向数据绑定用起来就特别舒服了.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="apc">
<!-- v-bind:value只能进行单向的数据渲染 -->
<input type="text" :value="ss.ke2">
<!-- v-model 可以进行双向的数据绑定 -->
<input type="text" v-model="ss.ke2">
<p>您要查询的是:{{ss.ke2}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm=new Vue({
el:'#apc',
data: {
ss:{
ke: 'kuang',
ke2:'kk'
}
}
})
</script>
</body>
</html>
<body>
<div id="app">
<!--单复选框-->
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
<script>
new Vue({
el: '#app',
data: {
checked: true
}
})
</script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>kk说</title>
</head>
<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/dist/vue.js"></script>
</script>
<script>
var vm=new Vue({
el: '#app',
data: {
checkedNames: []
}
})
</script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 单选按钮:-->
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<span>选中的值: {{picked}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
picked:''
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="adc">
<!-- 下拉框-->
<select v-model="selected">
<option disabled >请选择</option>
<option >A</option>
<option >B</option>
<option >C</option>
</select>
<span>选中的值:{{selected}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm=new Vue({
el:'#adc',
data:{
selected:''
}
})
</script>
</body>
</html>
注意:如果 v-model 表达式的初始值未能匹配任何选项,< select> 元素将被渲染为“未选中”状态。
在 iOS 中,这会使用户无法选择第一个选项。因为这样的情况下,iOS 不会触发 change 事件。因此,更推荐像上面这样提供一个值为空的禁用选项
6.组件
什么是组件
组件是可复用的vue
实例,说白了就是一组可以重复使用的模板。通常会用一棵嵌套的组件树的形式组织:
第一个vue组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<!--有点类似于自定义标签-->
<my-component-li></my-component-li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//先注册组件
Vue.component('my-component-li',{
template:'<li>hello li</li>>'
});
//在实例化vue
var vm=new Vue({
el:'#app',
});
</script>
</body>
</html>
说明:
- Vue.component():注册组件
- my-component-li:自定义组件的名字
- template:组件的模板
使用props属性传递参数
像上面那样用组件没有任何意义,所以我们是需要传递参数到组件的,此时就需要使用 props
属性了
注意:默认规则下 props 属性里的值不能为大写:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>kk说</title>
</head>
<body>
<div id="app">
<ul>
<my-component-li v-for="item in items" v-bind:item="item"></my-component-li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 先注册组件
Vue.component('my-component-li', {
props: ['item'],
template: '<li>Hello {{item}}</li>'
});
// 再实例化 Vue
var vm = new Vue({
el: '#app',
data: {
items: ["张三", "李四", "王五"]
}
});
</script>
</body>
说明:
-
v-for="item in items"
:遍历 Vue 实例中定义的名为 items 的数组,并创建同等数量的组件; -
v-bind:item="item"
:将遍历的 item 项绑定到组件中 props 定义的名为 item 属
性上;
7.计算属性
计算属性的重点突出在 属性
两个字上(属性是名词),首先它是个 属性
其次这个属性有 计算
的能力(计算是动词),这里的计算
就是个函数;简单点说,它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性),仅此而已;可以想象为缓存!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 一个是方法 一个是属性-->
<p>调用当前时间的方法:{{CurrentTime1()}}</p>
<p>调用当前时间的方属性:{{CurrentTime2}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vue=new Vue({
el:'#app',
data:{
message:'Hello Vue'
},
methods: {
CurrentTime1:function() {
return Date.now();
}
},
computed: {
//CurrentTime2,这是一个属性!不是方法
CurrentTime2:function () {
this.message;
return Date.now();
}
}
})
</script>
</body>
</html>
注意:methods和computed里的东西不能重名
说明:
- methods:定义方法,调用方法需要带括号
- computed:定义计算属性,调用属性一定不能带括号;this.message 是为了
能够让 currentTime2 观察到数据变化而变化 - 调用方法时,每次都需要进行计算,既然有计算过程则必定产生系统开销,那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来,采用计算属性可以很方便的做到这一点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存,以节约我们的系统开销;
8.插槽
在 Vue 中我们使用 slot
元素,作为承载分发内容的出口,作者称其为 插槽,可以应用在组合组件的场景中;
比如准备制作一个待办事项组件(todo),该组件由待办标题(todo-title)和待办内容(todo-items)组成,但这三个组件又是相互独立的,该如何操作呢?
第一步:定义一个待办事项的组件
<todo></todo>
<script type="text/javascript">
// 定义一个待办事项
Vue.component('todo',{
template:'<div>\
<div>待办事项</div>\
<ul>\
<li>kk学习vue</li>\
</ul>\
</div>'
});
</script>
第二步: 我们需要让待办事项的标题和值实现动态绑定,怎么做呢? 我们可以留出一个插槽!
1、将上面的代码留出一个插槽,即 slot
<todo>
</todo>
<script type="text/javascript">
// 定义一个待办事项
Vue.component('todo',{
template:'<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</div>'
});
</script>
2、定义一个名为 todo-title 的待办标题组件 和 todo-items 的待办内容组件
Vue.component('todo-title',{
props:['title'],
template:'<div>{{title}}</div>'
});
Vue.component('todo-items',{
props:['item','index'],//这里的index,就是数组的下标,使用for循环遍历的时候,可以循环出来!
template:'<li>{{index+1}}.{{item}}</li>'
});
3、实例化 Vue 并初始化数据
var vm=new Vue({
el:'#app',
data:{
todoItems: ['kk1','kk2','kk3']
}
});
4、将这些值,通过插槽插入
<div id="app">
<todo>
<todo-title slot="todo-title" title="kk系列"></todo-title>
<todo-items slot="todo-items" v-for="(item,index) in todoItems"
v-bind:item="item" :index="index"></todo-items>
</todo>
</div>
此时:我们的 todo-title 和 todo-items 组件分别被分发到了 todo 组件的 todo-title 和 todo-items 插槽中
//整体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" title="kk系列"></todo-title>
<todo-items slot="todo-items" v-for="(item,index) in todoItems"
v-bind:item="item" :index="index"></todo-items>
</todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
// 定义一个待办事项
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>'
});
Vue.component('todo-items',{
props:['item','index'],//这里的index,就是数组的下标,使用for循环遍历的时候,可以循环出来!
template:'<li>{{index+1}}.{{item}}</li>'
});
var vm=new Vue({
el:'#app',
data:{
todoItems: ['kk1','kk2','kk3']
}
});
</script>
</body>
</html>
进阶:自定义事件!
以上代码不难发现,数据项在 Vue 的实例中,但删除操作要在组件中完成,那么组件如何才能删除Vue 实例中的数据呢?此时就涉及到参数传递与事件分发了,Vue 为我们提供了自定义事件的功能很好的帮助我们解决了这个问题;使用 this.$emit(‘自定义事件名’, 参数),操作过程如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ODqG4nnt-1612795022872)(C:\Users\HQKJ\AppData\Roaming\Typora\typora-user-images\1612684099951.png)]
1.在vue的实例中,增加了 methods 对象并定义了一个名为 removeTodoItems 的方法
new Vue({
el: '#app',
data: {
todoItems: ['狂神说Java', '狂神说运维', '狂神说前端']
},
methods: {
// 该方法可以被模板中自定义事件触发
removeTodoItems: function (index) {
console.log("删除 " + this.todoItems[index] + " 成功");
// splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目
// 其中 index 为添加/删除项目的位置,1 表示删除的数量
this.todoItems.splice(index, 1);
}
}
})
2.修改 todo-items 待办内容组件的代码,增加一个删除按钮,并且绑定事件
Vue.component('todo-items', {
props: ['item', 'index'],
template: '<li>{{index + 1}}. {{item}} <button
@click="remove_component">删除</button></li>',
methods: {
remove_component: function (index) {
// 这里的 remove 是自定义事件的名称,需要在 HTML 中使用 v-on:remove 的
方式指派
this.$emit('remove', index);
}
}
});
3.修改 todo-items 待办内容组件的 HTML 代码,增加一个自定义事件,比如叫 remove,可以和组件的方法绑定,然后绑定到vue的方法中!
<!--增加了 v-on:remove="removeTodoItems(index)" 自定义事件,该事件会调用 Vue 实例中
定义的名为 removeTodoItems 的方法-->
<todo-items slot="todo-items" v-for="(item, index) in todoItems"
v-bind:item="item" v-bind:index="index"
v-on:remove="removeTodoItems(index)"></todo-items>
9.Axios
前提
Vue遵循SoC 关注度分离原则,Vue是纯粹的视图框架,并不包含,比如Ajax之类的通信功能,为了解决通信问题,我们需要使用Axios 框架做异步通信.
什么是axios
Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架,她的主要作用就是实现 AJAX 异步通信,其功能特点如下:
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
为什么要使用Axios
由于 Vue.js 是一个 视图层框架 并且作者(尤雨溪)严格准守 SoC (关注度分离原则),所以Vue.js 并不包含 AJAX 的通信功能,为了解决通信问题,作者单独开发了一个名为 vue-resource 的插件,不过在进入 2.0 版本以后停止了对该插件的维护并推荐了 Axios 框架。少用jQuery,因为它操作Dom太频繁。
data.html
{
"name": "kk说Java",
"url": "www.baidu.com",
"page": 1,
"address": {
"street": "高密市",
"city": "潍坊市",
"country": "中国"
}
}
axios.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>kk学java</title>
<!--v-cloak解决闪烁问题-->
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<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>
<script src="https://cdn.jsdelivr.net/npm/vue/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() {
return {
info: {
name: null,
address: {
country: null,
city: null,
street: null
},
url: null
}
}
},
mounted() { //钩子函数
axios
.get('data.json')
.then(response => (this.info = response.data));
}
});
</script>
</body>
</html>
Vue生命周期
Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载 DOM、渲染→更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程,就是生命周期。
在 Vue 的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册 JS 方法,可以让我们用自己注册的 JS 方法控制整个大局,在这些事件响应方法中的 this 直接指向的是 Vue 的实例。
10.第一个vue-cli程序
(myvuebasic)
vue-cli启动程序
- cmd中找到合适目录
- 创建一个基于webpack模板的vue应用程序
vue init webpack myvue
这里的myvue是项目名称,可根据自己需求取名称
说明:
Project name:项目名称,默认 回车 即可
Project description:项目描述,默认 回车 即可
Author:项目作者,默认 回车 即可
Install vue-router:是否安装 vue-router,选择 n 不安装(后期需要再手动添加)
Use ESLint to lint your code:是否使用 ESLint 做代码检查,选择 n 不安装(后期需要再手动添加)
Set up unit tests:单元测试相关,选择 n 不安装(后期需要再手动添加)
Setup e2e tests with Nightwatch:单元测试相关,选择 n 不安装(后期需要再手动添加)
Should we run npm install for you after the project has been created:创建完成后直接初始化,选择 n,我们手动执行;运行结果!
- 初始化并运行
cd myvue
npm install
npm run dev
执行完成后,目录多了很多依赖
vue-cli目录结构
src目录
src
目录是项目的源码目录,所有代码都会写在这里
main.js
import Vue from 'vue'
ES6 写法,会被转换成 require(“vue”); (require 是 NodeJS 提供
的模块加载器)
import App from './App'
意思同上,但是指定了查找路径,./ 为当前目录
Vue.config.productionTip = false :
关闭浏览器控制台关于环境的相关提示
new Vue({...})
实例化Vue
el: '#app'
查找 index.html 中 id 为 app 的元素
template: ''
模板,会将 index.html 中
替换为
components: { App }
引入组件,使用的是 import App from ‘./App’ 定义的 App 组
件;
App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<HelloWorld/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
-
template:HTML 代码模板,会替换 < App /> 中的内容
-
import HelloWorld from ‘./components/HelloWorld’:引入 HelloWorld 组件用于替换 template中的 < HelloWorld/>
-
export default{…}:导出 NodeJS 对象,作用是可以通过 import 关键字导入
-
- name: ‘App’:定义组件的名称
- components: { HelloWorld }:定义子组件
-
在hello,Vue中,关于 < style scoped> 的说明:CSS 样式仅在当前组件有效,声明了样式的作用域,是当前的界面私有的!
11.vue-router
(myvue)
前提
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式,在 IE9 中自动降级
- 自定义的滚动条行为
安装
基于myvuebasic
进行测试学习;先查看node_modules中是否存在vue-router
vue-router 是一个插件包,所以我们还是需要用 npm/cnpm 来进行安装的。打开命令行工具,进入你的项目目录,输入下面命令。
npm install vue-router --save-dev
如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能:
import Vue from 'vue' import VueRouter from 'vue-router' // 显示的使用 Vue.use(VueRouter);
测试
- components 目录下存放我们自己编写的组件
- 定义组件 Content.vue 组件
- 安装路由,在src目录下,新建一个文件夹 : router ,专门存放路由,写入 index.js
- 我们在新建一个 Main.vue 组件
- 将Main组件也配置到路由中!
- 在 main.js 中配置路由
- 在 App.vue 中使用路由
- npm run dev
12.路由模式和404
(hello-pack)
路由模式有两种:
- hash:路径带 # 符号,如 http://localhost/#/login
- history:路径不带 # 符号,如 http://localhost/login
修改路由配置,代码如下:
export default new Router({ mode: 'history', routes: [ ] });
处理 404 创建一个名为 NotFound.vue 的视图组件,代码如下:
`
修改路由配置,代码如下:
import NotFound from '../components/NotFound' { path: '*', component: NotFound }
13.Element-ui
(hello-vue引入)(hello-pack实现)
简介
element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库,方便程序员进行页面快速布局和构建
安装
推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。
npm i element-ui -S
CDN
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>