1.vue简介
目的:快速开发,简单
官网地址:https://cn.vuejs.org/
1-1.vue介绍
作者:尤雨溪
优点
-
易用
- 只要会HTML.css.JavaScript就可以直接使用
-
灵活
- 不断繁荣的生态系统(vue Router,vuex,服务端渲染)
- 通过script连接一个vue.js库直接开发即可
- 通过安装vue框架实现快速项目开发
-
高效
-
20kB min+gzip 运行大小
-
超快虚拟 DOM
-
浏览器解析一个网页的步骤: 1.解析HTML,生成HTML树, 2.解析 css,生成css树, 3.HTML和css结合, 4.形成坐标点 5.渲染页面 一旦要修改元素,需要执行以上5个步骤,如果需要修改10个元素,那么需要执行以上10次5个步骤. 结果:浏览器的性能降低 虚拟dom(virtual dom) 虚拟dom其实就是一个js对象(Object) 如果有元素需要修改,通过虚拟DOM进行修改,将虚拟dom和真实dom进行对比,将产生差异的部分,进行统一修改即可. 例如:如果需要修改10个元素,通过虚拟DOM进行修改,将虚拟dom和真实dom进行对比,将产生差异的部分,进行统一修改(只主要执行一次以上5个步骤) 差异: js解析js要比浏览器解析js快的多,
-
-
最省心的优化
-
css的属性tranform(对元素进行2D或者3D的转换),在使用时针对不同的;浏览器需要加前缀:-webkit -moz -o -ms 如果使用了vue之后,以上前缀统一没有了.
-
-
-
渐进式JavaScript框架
渐进式JavaScript框架(主张少)
自底向上逐层应用扫描二维码关注公众号，回复： 12646197 查看本文章
装修新房 按照自己的设计风格装修即可(主张少)
二手房 装修好了,直接入住,但是如果你想安装自己的设计风格装修,需要先拆在重新装修.(强主张) -
-
单页面应用(SPA)
-
SPA(single page application)
-
原生页面:http://www.ujiuye.com/index.html
单页面:https://es6.ruanyifeng.com/#docs/set-map
原生页面:实现页面之间跳转,就是真实的页面跳转(N个.html)
单页面:实现页面跳转,通过路由实现.
优点:
1.用于体验更优,用户跳转页面时,基本通过ajax请求数据
2.做前后端分离.后端提供http协议接口,前端通过ajax请求数据.
缺点:
1.不利于SEO优化.因为使用单页面应用之后,所有的资源文件(eg:css,js,img)统一放在一个文件中,一旦文件非常大时,页面加载速度会变得非常慢.
2.首屏加载速度慢.
```
缺点
- 不利于SEO优化
- 首屏加载速度慢,
- 不支持IE678
核心
- 数据驱动
- 组件化应用
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.引入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
价格:<input v-model="price">
</div>
<div>
数量:<input v-model="num">
</div>
<div>
总和:{
{price*num}}
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
price:100,
num:1
}
})
</script>
</body>
</html>
1-2 引用方式
三种引用方式:
1.<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2.直接下载vue.js
3.npm i vue --save 或者 npm i vue -S(保存)
如果上面指令没有出现依赖包,需要初始化操作:npm init,其目的:产生package.json文件
-
使用vue方式
-
1.引入vue.js 2.产生作用域 3.实例化vue
-
-
vue实例中的相关注意事项
-
/** * 1.实例化vue时,需要传递一个参数:json * 2.参数json中的选项时固定:el,data,methods, * 3.data中的数据显示在页面中,一般通过{ {data属性名}}显示 * 4.一个vue实例只能作用在一个根元素节点上. * 5.所有的css样式选择器都可以作用在vue实例上,但是通常使用id选择器. * 6.不能将vue挂载(mount)到html或者body, * 7.双大括号{ {}}中可以操作js的一些简单运算. */
-
vue案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.引入vue.js -->
<script src="./vue.js"></script>
</head>
<body>
<!-- 2.作用域 -->
<div id="app">
<h2>{
{name}}</h2>
<p>{
{price}}万</p>
<p>{
{isShow}}</p>
<!-- <p>undefined:{
{str}}</p>
<p>null:{
{str1}}</p> -->
<div>{
{fruit}}</div>
<div>{
{company.name}}</div>
<div>{
{'品牌名称'+name}}</div>
<div>{
{price.toFixed(2)}}</div>
<div>{
{price > 100 ? 100 : price}}</div>
<div>{
{fn()}}</div>
<div>{
{fn1()}}</div>
</div>
<hr>
<!-- <div class="app">
<h2>{
{name}}</h2>
</div> -->
<script>
// 3.实例化vue
/**
* 1.实例化vue时,需要传递一个参数:json
* 2.参数json中的选项时固定:el,data,methods,
* 3.data中的数据显示在页面中,一般通过{
{data属性名}}显示
* 4.一个vue实例只能作用在一个根元素节点上.
* 5.所有的css样式选择器都可以作用在vue实例上,但是通常使用id选择器.
* 6.不能将vue挂载(mount)到html或者body,
* 7.双大括号{
{}}中可以操作js的一些简单运算.
*/
new Vue({
el:'#app',//element(元素),当前vue实例作用在某个元素上
data:{
//属性(变量)
name:'宝马X6',
price:60.00,
isShow:true,
// str:undefined,
// str1:null,
fruit:['草莓','西瓜','菠萝'],
company:{
name:'优就业',
url:'http://www.ujiuye.com',
people:40000
}
},
methods:{
// 方法
// 第一种定义
fn:function(){
alert('弹出来')
},
// 第二种定义
fn1(){
alert('弹回去')
}
}
})
</script>
</body>
</html>
2.基本指令
2-1.非表单元素(div span p)
| 优点 | 缺点 | 作用 | |
|---|---|---|---|
| { {}} | 方便书写 | 1.不能解析data中属性值中的标签2.出现闪屏问题 | 插值表达式 |
| v-html | 解析data属性值的标签 | 富文本 | |
| v-text | 不会出现闪屏问题 | 不能解析data中属性值中的标签 | 展示内容 |
解决闪屏问题:
通过指令v-cloak实现:v-cloak绑定在作用于vue实例的标签上,当vue.js没有加载完成时,设置[v-cloak]的样式为:diplay:none,当vue.js加载完成后,将[v-cloak]作用的元素样式改为:display:block
{ {}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.引入 -->
<!-- <script src="./vue.js"></script> -->
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<!-- 2.作用域 -->
<div id="app" v-cloak>
<!--
1.{
{}}不能解析data中属性值中的标签
2.当vue.js没有加载出来时,页面中显示{
{}}一类的数据,不利于用户体验
3.解决闪屏问题:
-->
<div>{
{name}}</div>
<span>{
{price}}</span>
<p>{
{color}}</p>
<div>{
{str}}</div>
</div>
<script>
// 3.实例化vue
new Vue({
el:'#app',
data:{
//属性
name:'凯迪拉克',
price:30.00,
color:'pink',
str:'<mark>坐在凯迪拉克里烫火锅</mark>'
}
})
</script>
</body>
</html>
v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.引入 -->
<!-- <script src="./vue.js"></script> -->
</head>
<body>
<!-- 2.作用域 -->
<div id="app">
<!--
1.v-html写在标签中,当做属性展示
2.v-html的值是data的属性名
3.标签中的内容不再浏览器体现.
4.v-html可以解析data中属性值中的标签
5.当vue.js没有加载出来时,页面中不展示任何数据
-->
<div v-html="name"></div>
<span v-html="price"></span>
<p v-html="color"></p>
<div v-html="str"></div>
</div>
<script>
// 3.实例化vue
new Vue({
el:'#app',
data:{
//属性
name:'凯迪拉克',
price:30.00,
color:'pink',
str:'<mark>坐在凯迪拉克里烫火锅</mark>'
}
})
</script>
</body>
</html>
v-text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.引入 -->
<!-- <script src="./vue.js"></script> -->
</head>
<body>
<!-- 2.作用域 -->
<div id="app">
<!--
1.v-text写在标签中,当做属性展示
2.v-text的值是data的属性名
3.标签中的内容不再浏览器体现.
4.v-text不能解析data中属性值中的标签
5.当vue.js没有加载出来时,页面中不展示任何数据
-->
<div v-text="name"></div>
<span v-text="price"></span>
<p v-text="color"></p>
<div v-text="str"></div>
</div>
<script>
// 3.实例化vue
new Vue({
el:'#app',
data:{
//属性
name:'凯迪拉克',
price:30.00,
color:'pink',
str:'<mark>坐在凯迪拉克里烫火锅</mark>'
}
})
</script>
</body>
</html>
2-2.表单元素(input textarea)
-
v-model双向数据绑定指令 -
设计模式
-
设计模式:MVC,M(model)模型 V(view)视图 C(controller)控制器 vue采用的是:MVVM M(model)模型 V(view)视图 VM(ViewModel)视图模型 模型通过ViewModel控制着视图,视图同时也可以通过ViewModel修改模型,此时ViewModel起到了中间桥梁的作用.
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.引入-->
<script src="./vue.js"></script>
</head>
<body>
<!-- 2.作用域 -->
<div id="app">
<!--
1.v-model的值是data的属性名
2.input框的值是data的属性名对应的值,value属性在这里不起任何作用
-->
<!-- 双向数据绑定 -->
<!--
设计模式:MVC,M(model)模型 V(view)视图 C(controller)控制器
vue采用的是:MVVM M(model)模型 V(view)视图 VM(ViewModel)视图模型
模型通过ViewModel控制着视图,视图同时也可以通过ViewModel修改模型,此时ViewModel起到了中间桥梁的作用.
-->
<input type="text" v-model="name" value="haha">
<div>{
{name}}</div>
</div>
<script>
// 实例化vue
new Vue({
el:'#app',
data:{
name:'Vue'
}
})
</script>
</body>
</html>
2-3.媒体元素(img)
-
v-bind-
1.v-bind指令:一般绑定的是属性 2.书写形式: v-bind:属性名="data中的属性名" 3. v-bind:简写形式: :属性名="data中的属性名"
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.引入-->
<script src="./vue.js"></script>
</head>
<body>
<!-- 2.作用域 -->
<div id="app">
<!-- 静态数据展示 -->
<img src="http://www.ujiuye.com/statics/images/newzhu_images/logo.png" alt="">
<hr>
<!-- 动态数据展示 -->
<!--
1.v-bind指令:一般绑定的是属性
2.书写形式: v-bind:属性名="data中的属性名"
-->
<img v-bind:src="url" alt="">
<hr>
<a v-bind:href="company.url">
<img v-bind:src="company.logo" alt="" v-bind:title="company.name">
</a>
<hr>
<!-- v-bind:简写形式: :属性名="data中的属性名" -->
<a :href="company.url">
<img :src="company.logo" alt="" :title="company.name">
</a>
</div>
<script>
// 3.实例化vue
new Vue({
el:'#app',
data:{
url:'http://www.ujiuye.com/statics/images/newzhu_images/logo.png',
company:{
name:'优就业',
logo:'http://www.ujiuye.com/statics/images/newzhu_images/logo.png',
url:'http://www.ujiuye.com'
}
}
})
</script>
</body>
</html>
2-4. 条件判断
v-if指令控制的是元素的显示和隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.引入-->
<script src="./vue.js"></script>
<style>
.box{
width: 100px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<!-- 2.作用域 -->
<div id="app">
<!--
1.v-if:如果表达式为真,即显示元素.如果表达式为假,即元素消失
2.v-if指令控制的是元素的显示和隐藏
-->
<div v-if="true">春花秋月何时了</div>
<div v-if="false">往事知多少</div>
<div v-if="1">小楼昨夜又东风</div>
<div v-if="0">2021牛转乾坤</div>
<div v-if="1!==1">2021牛气冲天</div>
<hr>
<button @click="show()">显示</button>
<button @click="hide()">隐藏</button>
<div class="box" v-if="isShow"></div>
</div>
<script>
// 3.实例化vue
new Vue({
el:'#app',
data:{
isShow:true,
},
methods:{
show(){
this.isShow = true;
},
hide(){
this.isShow = false;
}
}
})
</script>
</body>
</html>
v-show控制着元素的显示和隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.引入-->
<script src="./vue.js"></script>
<style>
.box{
width: 100px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<!-- 2.作用域 -->
<div id="app">
<!--
1.v-show控制着元素的显示和隐藏
-->
<div v-show="true">没有理所当然的成功,也没有毫无理由的平庸,2021我们的爆发时代</div>
<div v-show="false">南来北往</div>
<hr>
<button @click="show()">显示</button>
<button @click="hide()">隐藏</button>
<div class="box" v-show="isShow"></div>
</div>
<script>
// 3.实例化vue
new Vue({
el:'#app',
data:{
isShow:false
},
methods:{
show(){
this.isShow = true;
},
hide(){
this.isShow = false;
}
}
})
</script>
</body>
</html>
v-if和v-show的区别
相同点:都是控制着元素的显示和隐藏
不同点:当表达式的值为false,v-if采用的惰性模式,v-show通过样式中的属性display:none来控制
在实际应用中:
1.v-if:一般使用在页面一旦加载完成,几乎不再修改,可以使用
2.v-show:使用在元素切换频率比较高的情况下(eg:选项卡切换)
2-5. v-for指令
v-for做数组的遍历
1.遍历数组
2.遍历数值
3.遍历字符串
4.遍历对象
-
用法
-
数组: v-for="(item,index) in 数组名称" v-for="(item,index) of 数组名称" item:指数组的每一项 index:指数组下标 对象: v-for="(item,key,index) in 对象名称" item:指对象中的每一项值 key:对象的键 index:对象的下标
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.引入-->
<script src="./vue.js"></script>
</head>
<body>
<!-- 2.作用域 -->
<div id="app">
<!-- 遍历数组 -->
<ul>
<li v-for="(item,index) in arr">{
{index}}==={
{item}}</li>
</ul>
<hr>
<!-- 遍历数值 -->
<ul>
<li v-for="(item,index) in 10">{
{index}}==={
{item}}</li>
</ul>
<!-- 遍历字符串 -->
<hr>
<ul>
<li v-for="(item,index) of 'hello'">{
{index}}==={
{item}}</li>
</ul>
</div>
<script>
// 3.实例化vue
new Vue({
el:'#app',
data:{
arr:['宝马','奥迪','奔驰','宾利']
},
})
</script>
</body>
</html>
2-6.v-once
v-once
v-once:指当前元素和它的所有子集首次在页面显示完成之后,不会再进行修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.引入-->
<script src="./vue.js"></script>
</head>
<body>
<!-- 2.作用域 -->
<div id="app">
<!-- v-once:指当前元素和它的所有子级首次在页面显示完成之后,不会再进行修改, -->
<div v-once>
<p>{
{num}}</p>
</div>
<button @click="add()">++</button>
</div>
<script>
// 3.实例化vue
new Vue({
el:'#app',
data:{
num:30
},
methods:{
add(){
this.num++;
console.log(this.num);
}
}
})
</script>
</body>
</html>
面试题
1.为什么要选vue？与其它框架对比的优势和劣势？
vue:
优点
1.双向数据绑定 | 2.组件化开发 | 3.采用virtual DOM | 4.轻量高效 | 5.动画系统
Virtual DOM则是虚拟DOM的英文，简单来说，他就是一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM。最后在计算完毕才真正将DOM操作提交，将DOM操作变化反映到DOM树上。
缺点
1.不支持IE8及以下版本 | 2.生态不太成熟,例如编辑器中的语法提示不太完善 | 3.社区无法与angular和react相比
angular:
相同点:
1.都支持指令,内置指令和自定义指令 | 2.都支持过滤器,内置过滤器和自定义过滤器 | 3.都支持双向数据绑定, | 4.都不支持低端浏览器
不同点:
1.Angular的学习成本较高,二vue.js本提供的api就比较简单.直观.
2.从性能上来说: AngularJS依赖对数据做脏检查.Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。
react:
相同点:
1.react采用特殊的jsx语法,vue进行组件化编写,采用.vue特殊文件格式,两者都需用编译后使用.
2.中心思想相同:都是组件化开发,组件实例之间可进行嵌套
3.都提供了合理的钩子函数,可让开发者定制化的处理需求
4.都没有内置ajax,Route等核心包,而是以插件的方式加载.
不同点:
1.React采用的Virtual DOM会对渲染出来的结果做脏检查
2.Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作DOM。react没有
2.mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？
MVVM是Model-View-ViewModel的简写。
Model:模型
View:视图
ViewModel:视图模型,连接view和model的桥梁
MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。