您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

web前端开发:vue内部指令(超详细)

时间:2019-12-25 11:40:16  来源:  作者:

本章要给大家带来的内容是相关Vue中的组件以及一系列常用属性,适用人群囊括了除已有开发经验人员以外的小白新手,从how、why、what三个角度来让大家理解并使用该技术。

 

web前端开发:vue内部指令(超详细)

 

前端框架与库的区别?

jquery 库 -> DOM(操作DOM) + 请求

art-template 库 -> 模板引擎

框架 = 全方位功能齐全

简易的DOM体验 + 发请求 + 模板引擎 + 路由功能

KFC的世界里,库就是一个小套餐, 框架就是全家桶

代码上的不同

一般使用库的代码,是调用某个函数,我们自己把控库的代码

一般使用框架,其框架在帮我们运行我们编写好的代码

框架: 初始化自身的一些行为

执行你所编写的代码

施放一些资源

vue起步

1:引包

2:启动 new Vue({el:目的地,template:模板内容});

options

目的地 el

内容 template

数据 data

vue的文件介绍

目录介绍

 

web前端开发:vue内部指令(超详细)

 

 

插值表达式

{{ 表达式 }}

对象 (不要连续3个{{ {name:‘jack’} }})

字符串 {{ ‘xxx’ }}

判断后的布尔值 {{ true }}

三元表达式 {{ true?‘是正确’:‘错误’ }}

可以用于页面中简单粗暴的调试

注意: 必须在data这个函数中返回的对象中声明

什么是指令

在vue中提供了一些对于页面 + 数据的更为方便的输出,这些操作就叫做指令, 以v-xxx表示

类似于html页面中的属性 ```

比如在angular中 以ng-xxx开头的就叫做指令

在vue中 以v-xxx开头的就叫做指令

指令中封装了一些DOM行为, 结合属性作为一个暗号, 暗号有对应的值,根据不同的值,框架会进行相关DOM操作的绑定

vue中常用的v-指令演示

v-text 元素的InnerText属性,必须是双标签

v-html 元素的innerHTML

v-if 判断是否插入这个元素

v-else-if

v-else

v-show 隐藏元素 如果确定要隐藏, 会给元素的style加上display:none

 v-text 只能用在双标签中 v-text 其实就是给元素的innerText赋值 v-html 其实就是给元素的innerHTML赋值 v-if 如果值为false,会留下一个<!---->作为标记,万一未来v-if的值是true了,就在这里插入元素 如果有if和else就不需要单独留坑了 如果全用上  v-if 相邻v-else-if 相邻 v-else 否则 v-else-if可以不用 v-if和v-else-if都有等于对应的值,而v-else直接写 v-if家族都是对元素进行插入和移除的操作 v-show是显示与否的问题 注意: 指令其实就是利用属性作为标识符,简化DOM操作,  看:v-model="xxx"  v-model 代表要做什么  xxx代表针对的js内存对象  写在那个元素上,就对哪个元素操作

v-bind使用

给元素的属性赋值

可以给已经存在的属性赋值 input value

也可以给自定义属性赋值 mydata

语法 在元素上 v-bind:属性名="常量||变量名"

简写形式 :属性名="变量名"

<div v-bind:原属性名="变量"></div><div :属性名="变量">    </div>

v-on的使用

处理自定义原生事件的,给按钮添加click并让使用变量的样式改变

普通使用 v-on:事件名="表达式||函数名"

简写方式 @事件名="表达式"

 

web前端开发:vue内部指令(超详细)

 

 

阶段总结

如何启动vue : 1:引包 2:留坑 3:启动(new Vue)

options: el/template/data函数

更便捷的操作DOM及数据 v-xxx指令

v-text/v-html/v-if/v-show/v-bind/v-on

v-bind绑定属性值

v-on绑定事件

v-model

双向数据流(绑定)

页面改变影响内存(js)

内存(js)改变影响页面

v-bind 和 v-model 的区别?

input v-model="name"

双向数据绑定 页面对于input的value改变,能影响内存中name变量

内存js改变name的值,会影响页面重新渲染最新值

input :value="name"

单向数据绑定 内存改变影响页面改变

v-model: 其的改变影响其他 v-bind: 其的改变不影响其他

v-bind就是对属性的简单赋值,当内存中值改变,还是会触发重新渲染

v-for的使用

基本语法 v-for="item in arr"

对象的操作 v-for="item in obj"

如果是数组没有id

v-for="(item,index) in arr" :class="index"

各中v-for的属性顺序(了解)

数组 item,index

对象 value,key,index

漂亮的列表

class 是可变的

.red { background-color:red;}.big { font-size:50px;}
<div :class="{'red':true,'big':true}">又大又红</div>

效果是字体大背景色是红色的div

关于对象内的this

vue已经把以前this是window或者事件对象的问题搞定了

methods和data本身是在同一个对象中的,所以在该对象中可以通过this.随意取

this.xxx 取data中的值, this.xxxMethod调methods中的函数

渲染组件-父使用子组件

1: 创建子组件(对象)

var Header = { template:'模板' , data是一个函数,methods:功能,components:子组件们 }

2: 在父组件中声明,根属性components:{ 组件名:组件对象 }

3: 在父组件要用的地方使用 <组件名></组件名>

在不同框架中,有的不支持大写字母,用的时候

组件名 MyHeader

使用 my-header

总结: 有父,生子,声明,使用

父子组件传值(父传子)

1:父用子的时候通过属性传递

2:子要声明props:[‘属性名’] 来接收

3:收到就是自己的了,随便你用

在template中 直接用

在js中 this.属性名 用

总结:父传,子声明,就是子的了

小补充: 常量传递直接用,变量传递加冒号

总结父传子

父用子 先有子,声明子,使用子

父传子 父传子(属性),子声明(收),子直接用(就是自己的一样)

注册全局组件

应用场景: 多出使用的公共性功能组件,就可以注册成全局组件,减少冗余代码

全局API Vue.component('组件名',组件对象);

附加功能:过滤器&监视改动

filter

将数据进行添油加醋的操作

过滤器分为两种

1:组件内的过滤器(组件内有效)

2:全局过滤器(所有组件共享)

先注册,后使用

组件内 filters:{ 过滤器名:过滤器fn } 最终fn内通过return产出最终的数据

使用方式是 {{ 原有数据 | 过滤器名 }}

需求

页面input框输入字符串, 另一边显示其反转的内容

过滤器fn:

声明function(data,argv1,argv2...){}

使用{{ 数据 | 过滤器名(参数1,参数2) }}

watch 监视单个

cumputed 监视多个

key

使用子组件循环输出一堆数据

不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出。

建议v-for就写,提升性能,避免vue运算,key就是记录元素与dom间的位置关系

<son v-for="(item,index) in persons" :key="index" ></son>

slot

slot就是子组件里给DOM留下的坑

<子组件>DOM</子组件>

slot动态的DOM、props是动态的数据

组件生命周期

需要频繁的创建和销毁组件

比如页面中部分内容显示与隐藏,但是用的是v-if

组件缓存

内置组件中

被其包裹的组件,在v-if=false的时候,不会销毁,而是停用

v-if=“true” 不会创建,而是激活

避免频繁创建组件对象的性能损耗

成对比较

created 和 beforeCreate

A 可以操作数据 B 数据没有初始化

mounted 和 beforeMount

A 可以操作DOM B 还未生成DOM

updated 和 beforeUpdate

A 可以获取最终数据 B 可以二次修改

频繁销毁创建的组件使用内置组件包裹

activated(){  //激活的 keep-alive v-if="true"console.log('activated')},deactivated(){  //停用的 keep-alive v-if="false"console.log('deactivated')},beforeDestroy(){ //销毁前 v-if="false"console.log('beforeDestroy')},destroyed(){//销毁后 v-if="false"console.log('destroyed')},

获取DOM元素

救命稻草, document.querySelector

1: 在template中标识元素 ref=“xxxx”

2: 在要获取的时候, this.$refs.xxxx 获取元素

创建组件,装载DOM,用户点击按钮

ref在DOM上获取的是原生DOM对象

ref在组件上获取的是组件对象

$el 是拿其DOM

这个对象就相当于我们平时玩的this,也可以直接调用函数

最后喜欢的同学点个关注、收藏、转发哦!



Tags:vue   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  Tags: vue  点击:(2)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Tags: vue  点击:(14)  评论:(0)  加入收藏
开头最近要研究有什么新奇的产品和项目,发现一个网站很有意思,可以纯前端一键随机生成头像,刚好他们的代码是开源,并且基于vue3,我想开源拿出来给大家分享。效果: 开始项目本身基...【详细内容】
2021-12-03  Tags: vue  点击:(15)  评论:(0)  加入收藏
问题后端已经配置好了跨域,前端本地搭建vue-cli测试环境的时候如何解决跨域?(前提进行了基本的axios封装)分析这个时候后端API是一个明确的外网环境(使用外网IP或固定域名访问),...【详细内容】
2021-11-03  Tags: vue  点击:(55)  评论:(0)  加入收藏
一、Vue框架的开发流程介绍 当我们从github上下载一个前端模板框架到本地后,框架中经常会自带有一些跳转显示类的功能,我们可以通过查看这些功能是如何实现的,进而一步步改造为...【详细内容】
2021-11-03  Tags: vue  点击:(34)  评论:(0)  加入收藏
一、Vue介绍1、什么是Vue 可以独立完成前后端分离式web项目的JavaScript框架2、学习Vue的原因三大主流框架之一:Angular React Vue先进的前端设计模式:MVVM可以完全脱离服务器...【详细内容】
2021-10-22  Tags: vue  点击:(51)  评论:(0)  加入收藏
什么是vuevue是尤雨溪在2014年发布的一个渐进式的js框架,它有着双向绑定的特性,同时它的虚拟dom技术让性能得到大大提升。最重要的就是它是渐进式的应用,你可以在你的项目中逐...【详细内容】
2021-09-22  Tags: vue  点击:(78)  评论:(0)  加入收藏
前端框架:vue.js效果图: 图书管理显示,查询,删除 页面css样式:<style>* {margin: 0;padding: 0;}#app {width: 900px;padding: 20px;margin: 50px auto;box-shadow: 0 0 10px #82...【详细内容】
2021-09-17  Tags: vue  点击:(91)  评论:(0)  加入收藏
本文分享自华为云社区《【云驻共创】vue3相比 vue2 的十项优点》,作者: 海拥 。Vue3新版本的理念成型于 2018 年末,当时的 Vue 2 已经有两岁半了。比起通用软件的生命周期来这...【详细内容】
2021-09-16  Tags: vue  点击:(73)  评论:(0)  加入收藏
1.vue create demo2.vue ui3.搜索 vue-cli-plugin-electron-builder,勾选,安装4.npm run electron:serve5.npm run electron:build6.build complete!构建完成!构建完成后,看一...【详细内容】
2021-09-09  Tags: vue  点击:(64)  评论:(0)  加入收藏
▌简易百科推荐
本文分为三个等级自顶向下地分析了glibc中内存分配与回收的过程。本文不过度关注细节,因此只是分别从arena层次、bin层次、chunk层次进行图解,而不涉及有关指针的具体操作。前...【详细内容】
2021-12-28  linux技术栈    Tags:glibc   点击:(3)  评论:(0)  加入收藏
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  项目与数据管理    Tags:Vue   点击:(2)  评论:(0)  加入收藏
程序是如何被执行的&emsp;&emsp;程序是如何被执行的?许多开发者可能也没法回答这个问题,大多数人更注重的是如何编写程序,却不会太注意编写好的程序是如何被运行,这并不是一个好...【详细内容】
2021-12-23  IT学习日记    Tags:程序   点击:(9)  评论:(0)  加入收藏
阅读收获✔️1. 了解单点登录实现原理✔️2. 掌握快速使用xxl-sso接入单点登录功能一、早期的多系统登录解决方案 单系统登录解决方案的核心是cookie,cookie携带会话id在浏览器...【详细内容】
2021-12-23  程序yuan    Tags:单点登录(   点击:(8)  评论:(0)  加入收藏
下载Eclipse RCP IDE如果你电脑上还没有安装Eclipse,那么请到这里下载对应版本的软件进行安装。具体的安装步骤就不在这赘述了。创建第一个标准Eclipse RCP应用(总共分为六步)1...【详细内容】
2021-12-22  阿福ChrisYuan    Tags:RCP应用   点击:(7)  评论:(0)  加入收藏
今天想简单聊一聊 Token 的 Value Capture,就是币的价值问题。首先说明啊,这个话题包含的内容非常之光,Token 的经济学设计也可以包含诸多问题,所以几乎不可能把这个问题说的清...【详细内容】
2021-12-21  唐少华TSH    Tags:Token   点击:(10)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Mason程    Tags:VUE   点击:(14)  评论:(0)  加入收藏
什么是性能调优?(what) 为什么需要性能调优?(why) 什么时候需要性能调优?(when) 什么地方需要性能调优?(where) 什么时候来进行性能调优?(who) 怎么样进行性能调优?(How) 硬件配...【详细内容】
2021-12-16  软件测试小p    Tags:性能调优   点击:(20)  评论:(0)  加入收藏
Tasker 是一款适用于 Android 设备的高级自动化应用,它可以通过脚本让重复性的操作自动运行,提高效率。 不知道从哪里听说的抖音 app 会导致 OLED 屏幕烧屏。于是就现学现卖,自...【详细内容】
2021-12-15  ITBang    Tags:抖音防烧屏   点击:(25)  评论:(0)  加入收藏
11 月 23 日,Rust Moderation Team(审核团队)在 GitHub 上发布了辞职公告,即刻生效。根据公告,审核团队集体辞职是为了抗议 Rust 核心团队(Core team)在执行社区行为准则和标准上...【详细内容】
2021-12-15  InfoQ    Tags:Rust   点击:(25)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条