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框架(主张少)
自底向上逐层应用
```
  			装修
```
新房按照自己的设计风格装修即可(主张少)
二手房装修好了,直接入住,但是如果你想安装自己的设计风格装修,需要先拆在重新装修.(强主张)
单页面应用(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.实例化vuenew 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.实例化vuenew 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.实例化vuenew 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>// 实例化vuenew 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.实例化vuenew 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.实例化vuenew 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.实例化vuenew 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.实例化vuenew 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.实例化vuenew 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也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

开眼角好还是割埋线双眼皮前后注意事项有哪些
...
2024/4/27 16:59:36
对vue的理解
一、从历史说起 Web是World Wide Web的简称，中文译为万维网我们可以将它规划成如下的几个时代来进行理解石器时代文明时代工业革命时代百花齐放时代石器时代石器时代指的就是我们的静态网页，可以欣赏一下1997的Apple官网最早的网页是没有数据库…...
2024/4/27 23:05:38
vue简单运用
vue 文章目录vue**前端三要素****前后端分离演变历史****为什么要使用** Vue.jsVue.js **的两大核心要素**试水（入门代码）生命周期语法使用条件判断列表遍历计算属性监听属性双向数据绑定取值路由路由映射跳转页面携带值挑战页面或路由写在开头&#xff…...
2024/4/27 2:05:50
JavaScript实现选项卡
最近在学习JavaScript的过程中，做了一些小Demo，想在博客上记录一下。这是一个选项卡的例子，就是点击不同的按钮，显示不同的内容。思路是先隐藏所有内容，在根据点击的按钮显示出相应的内容。代码如下：<html> <head><title>选项卡</title><styl…...
2024/4/27 20:23:40
杭州哪家医院双眼皮手术好
...
2024/4/28 19:30:21
【ionic 3】怎么使用官网的demo实现页面分栏
要实现的功能： 实现过程很简单，去官网找demo，把相关代码复制到项目中即可。第一步：在官网找到对应页面。官网地址：https://ionicframework.com/docs/ 第二步：打开右上角的Demo Source，把…...
2024/4/29 1:34:27
js选项卡
网站常用效果之选项卡切换效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>js选项卡</title> <meta name=&…...
2024/4/28 13:07:39
基于 DevOps 实践的 .NET Core 给开发者带来了哪些好处？
关键要点\n \n\n无论你目前使用什么样的技术栈，DevOps都是值得一试的。\n\n\n闭源、专有软件和构建过程与DevOps实践不兼容。\n\n\n.NET Core是开源的，是基于DevOps构思和构建的。\n\n\n.NET Core CLI和Roslyn API让整个交付流程变得更加开放&#xff0c…...
2024/4/28 1:17:54
[转]Angular, Backbone, or Ember: Which is Best for your Build?
In order to choose which framework is right for your build, we’ve asked four important questions of each framework. AngularJS 1. What is AngularJS? AngularJS is a client-side JavaScript framework that allows you to organize large, client-heavy applicatio…...
2024/4/27 17:57:24
react hooks_使用React和Spring Boot构建一个简单的CRUD应用
react hooks“我喜欢编写身份验证和授权代码。” 〜从来没有Java开发人员。厌倦了一次又一次地建立相同的登录屏幕？ 尝试使用Okta API进行托管身份验证，授权和多因素身份验证。 React的设计使创建交互式UI变得轻松自如。它的状态管理非常有效&#xff…...
2024/4/27 17:21:40
android glsurfaceview renderer
MyArrow的专栏目录视图摘要视图订阅 Android系统--视图绘制 (View Render) 分类： Android Framework 2013-11-21 16:29 8208人阅读评论(4) 收藏举报目录(?)[] 1. 简介 Android系统--视图绘制主要由以下几部分组成： 1) Canvas(画布) 提供画图所需要…...
2024/4/27 7:38:19
埋线双眼皮全切双眼皮多久恢复自然
...
2024/4/27 4:51:03
洛阳隔埋线双眼皮会不会留疤痕吗
...
2024/4/28 16:23:54
交大九院南京双眼皮费用施尔美v
...
2024/4/27 13:55:05
南京双眼皮哪里做的好医院好
...
2024/4/28 5:15:41
angularJS 正则表达式验证
<!DOCTYPE html><html><head><meta charset"UTF-8"><title>anglar为核心验证</title><script src"js/angular.min.js"></script><style>input{display: block;}ul li{color: red;}</style>&l…...
2024/4/28 7:50:24
angular表达式{{}}先渲染问题
一般是这样解决的用angular的指令 ng-cloak指令。这个指令意思是先把这个指令的代码给隐藏，如果有值再显示。但是效果不理想。一般还得自己加一个class <style>[ng-cloak],.ng-cloak{display:none;} </style>...
2024/4/27 23:24:07
开双眼皮要拆线吗
...
2024/4/29 0:30:29
augular.js 菜鸟学习笔记（二）
AngularJS 控制器 AngularJS 应用程序被控制器控制。 ng-controller 指令定义了应用程序控制器。控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。控制器的 $scope 是控制器所指向的应用程序 HTML 元素。 AngularJS 控制器控制 AngularJS 应…...
2024/4/29 1:35:13
寒假还是暑假割精微双眼皮是啥
...
2024/4/30 7:32:06

vue简介、基本指令