博客
关于我
vue简介、基本指令
阅读量:357 次
发布时间:2019-03-04

本文共 6322 字,大约阅读时间需要 21 分钟。

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

核心

  • 数据驱动
  • 组件化应用

案例

    
Document
价格:
数量:
总和:{ {price*num}}

1-2 引用方式

三种引用方式:1.2.直接下载vue.js3.npm i vue --save 或者 npm i vue -S(保存) 如果上面指令没有出现依赖包,需要初始化操作:npm init,其目的:产生package.json文件
  • 使用vue方式

    • 1.引入vue.js2.产生作用域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案例:

    
Document

{ {name}}

{ {price}}万

{ {isShow}}

{ {fruit}}
{ {company.name}}
{ {'品牌名称'+name}}
{ {price.toFixed(2)}}
{ {price > 100 ? 100 : price}}
{ {fn()}}
{ {fn1()}}

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
  • {
    {}}
    
Document
{ {name}}
{ {price}}

{ {color}}

{ {str}}
  • v-html
    
Document

  • v-text
    
Document

2-2.表单元素(input textarea)

  • v-model双向数据绑定指令

  • 设计模式

    • 设计模式:MVC,M(model)模型   V(view)视图 C(controller)控制器            vue采用的是:MVVM  M(model)模型  V(view)视图 VM(ViewModel)视图模型            模型通过ViewModel控制着视图,视图同时也可以通过ViewModel修改模型,此时ViewModel起到了中间桥梁的作用.
    
Document
{ {name}}

2-3.媒体元素(img)

  • v-bind

    • 1.v-bind指令:一般绑定的是属性2.书写形式: v-bind:属性名="data中的属性名"3. v-bind:简写形式:   :属性名="data中的属性名"
    
Document

2-4. 条件判断

  • v-if指令控制的是元素的显示和隐藏
    
Document
春花秋月何时了
往事知多少
小楼昨夜又东风
2021牛转乾坤
2021牛气冲天

  • v-show控制着元素的显示和隐藏
    
Document
没有理所当然的成功,也没有毫无理由的平庸,2021我们的爆发时代
南来北往

  • v-ifv-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:对象的下标
    
Document
  • { {index}}==={ {item}}

  • { {index}}==={ {item}}

  • { {index}}==={ {item}}

2-6.v-once

  • v-once
v-once:指当前元素和它的所有子集首次在页面显示完成之后,不会再进行修改
    
Document

{ {num}}

面试题

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也能监听到视图的变化,然后通知数据做改动,这实际上就实现了数据的双向绑定。

转载地址:http://mtse.baihongyu.com/

你可能感兴趣的文章
MySql中mvcc学习记录
查看>>
mysql中null和空字符串的区别与问题!
查看>>
MySQL中ON DUPLICATE KEY UPDATE的介绍与使用、批量更新、存在即更新不存在则插入
查看>>
MYSQL中TINYINT的取值范围
查看>>
MySQL中UPDATE语句的神奇技巧,让你操作数据库如虎添翼!
查看>>
Mysql中varchar类型数字排序不对踩坑记录
查看>>
MySQL中一条SQL语句到底是如何执行的呢?
查看>>
MySQL中你必须知道的10件事,1.5万字!
查看>>
MySQL中使用IN()查询到底走不走索引?
查看>>
Mysql中使用存储过程插入decimal和时间数据递增的模拟数据
查看>>
MySql中关于geometry类型的数据_空的时候如何插入处理_需用null_空字符串插入会报错_Cannot get geometry object from dat---MySql工作笔记003
查看>>
mysql中出现Incorrect DECIMAL value: '0' for column '' at row -1错误解决方案
查看>>
mysql中出现Unit mysql.service could not be found 的解决方法
查看>>
mysql中出现update-alternatives: 错误: 候选项路径 /etc/mysql/mysql.cnf 不存在 dpkg: 处理软件包 mysql-server-8.0的解决方法(全)
查看>>
Mysql中各类锁的机制图文详细解析(全)
查看>>