Vue指令(超详细)
准备开始
- 本章要给大家带来的内容是相关Vue中的组件以及一系列常用属性。
- 本章合适人群囊括了除已有开发经验人员以外的小白新手,从how、why、what三个角度来让大家理解并使用该技术…
历史介绍(数据源自2017年github)
- angular 09年,年份较早,一开始大家是拒绝 star:33.4k
- react 2013年, 用户体验好,直接拉到一堆粉丝 star:89k
- vue 2014年, 用户体验好 star:84.6k
前端框架与库的区别?
- jquery 库 -> DOM(操作DOM) + 请求
- art-template 库 -> 模板引擎
- 框架 = 全方位功能齐全
- 简易的DOM体验 + 发请求 + 模板引擎 + 路由功能
- KFC的世界里,库就是一个小套餐, 框架就是全家桶
- 代码上的不同
- 一般使用库的代码,是调用某个函数,我们自己把控库的代码
- 一般使用框架,其框架在帮我们运行我们编写好的代码
- 框架: 初始化自身的一些行为
- 执行你所编写的代码
- 施放一些资源
- 框架: 初始化自身的一些行为
vue起步
1:引包
2:启动 new Vue({el:目的地,template:模板内容});
options
- 目的地 el
- 内容 template
- 数据 data
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:事件名="表达式||函数名"
- 简写方式
@事件名="表达式"
阶段总结
- 如何启动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 可以二次修改
- 频繁销毁创建的组件使用内置组件包裹
- created 和 beforeCreate
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,也可以直接调用函数
写再最后
为了帮助大家让学习变得轻松、高效,给大家免费分享一大批资料,帮助大家在成为全栈工程师,乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈:??1018453829.欢迎大家进群交流讨论,学习交流,共同进步。
有些人对学习充满激情,但是缺少方向,而在浩瀚的知识海洋中看似无边无际,此时最重要的是要知道哪些技术需要重点掌握,避免做无用功,将有限的精力及状态发挥到最大化。
最后祝福所有遇到瓶颈且不知道怎么办的前端程序员们,祝大家在往后的工作与面试中一切顺利。
Vue指令(超详细)相关推荐
- Vue指令超详细演示理解
一:插值表达式 将data中定义的数据显示到模板上. 在vue中{{ }}语法,叫做:插值表达式,大白话就是输出{{ }}中的表达式的值的语法. 把{{ }} 理解为一个占位符(一个坑), {{ ms ...
- 教你用webpack搭一个vue脚手架[超详细讲解和注释!]
1.适用人群 1.对webpack知识有一定了解但不熟悉的同学.2.女同学!!!(233333....) 2.目的 在自己对webpack有进一步了解的同时,也希望能帮到一些刚接触webpack的同学 ...
- vue - 【超详细】网站接入使用支付宝支付功能,点击支付跳转新页面后生成订单及支付二维码,实现支付宝在线付款详细的教程(整个支付的完整配置及支付流程,一键复制源码开箱即用)!
效果图 在vue网站网页项目中,实现跳转新页面生成订单,进行 "支付宝" 支付详细教程,包括详细的配置及示例完整源代码, 你可以直接复制示例的完整源码(保证可用),改个参数就能用了 ...
- 超详细版本vue+capacitor(自定义capacitor插件)编写移动端应用
人生苦短,我们要: 我的环境 Node v16.13.0 npm v8.1.0 mac的话需要安装Xcode windows的话需要Java 8 JDK和Android Studio软件 本文以安卓开 ...
- Vue模仿todo超详细讲解(附源码)
Vue模仿todo超详细讲解(附源码) 一.todo基本DOM结构 二.todo功能需求分析 1.新增任务 2.点击变成完成状态 3.点击删除 4.双击进入编辑以及修改保存 5.底部的状态筛选 6.l ...
- 适合小白的Linux入门学习教程,从安装到实操(涵盖各种常用指令,超详细!)
Linux入门学习 Linux简介 Linux是什么 Linux的特点 Linux和Windows的区别 Linux入门 我们为什么要学习Linux 环境搭建 安装CentOS 购买云服务器 走进Li ...
- VUE——超详细的美食杰项目—菜谱详情
VUE--超详细的美食杰项目-菜谱详情 效果介绍 detail.vue detail-header.vue detail-content.vue comment.vue 效果介绍 实现页面数据渲染,还 ...
- Web项目(Vue)部署到阿里云服务器【超详细】
超详细Vue项目部署篇!!! 小白的部署之路 前段时间白嫖了一年的阿里云服务器,想着手上有个项目,那就部署上去吧.找了很多教程,没有一篇是完整细致的,对于小白的我来说太难了,然后就进行了一天的踩坑之路 ...
- Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程(超详细)
Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程(超详细) 目录 一.安装Node(npm)需要的环境和版本发布信息 (1).Node版本和npm版本关系 (2).支持 ...
- vue实现将自己网站(h5链接)分享到微信中形成小卡片(超详细)
大家好,我是雄雄. 最新更新 2022年12月24日23:58:30 发现了个问题,解决了好久,问题如下: 当我直接将链接发送到微信中的时候,然后打开,发现分享出去还是个链接. 当我将链接分享到QQ时 ...
最新文章
- Spring Cloud第九篇:链路追踪Sleuth
- 机载雷达发展简史:从蝙蝠到机载相控阵
- 你不懂的JS学习笔记(作用域和闭包)
- 关于webStrom-11.1配置less且自动生成.css和自动压缩为.min.css/.min.js
- erlang分布式编程模型
- 闲鱼如何在2个月内实现Android启动速度翻倍的?
- scrollview 与 listView 的显示不全问题
- [Azure][PowerShell][ASM][12]ACL
- SpringBoot配置swagger2(亲测有效,如果没有配置成功,欢迎在下方留言)
- java类型转换 float类型转换_Java类型转换 – float(和long)到int
- 41.D3D数学库 GameProject7
- poj2513 Colored Sticks【欧拉迹+并查集+字典树】
- 常用的富文本编辑器插件
- 【工具】——远程协助(向日葵)
- 计算机安全中心无法启动,电脑无法启动windows安全中心服务怎么办?
- NOJ [1184] Elaine's Queue
- android 吉他模拟器,真实吉他模拟器怎么玩 新手玩法攻略详解
- react开发公众号踩坑日志
- unity Layer CullingMask
- 简单医药项目的疾病分类二级联动
热门文章
- Windows 11 wifi按键消失
- android画廊效果的轮播图,ViewPage实现无限轮播画廊效果
- 【Android 】零基础到飞升 | LinearLayout(线性布局)
- Android入门第37天-在子线程中调用Handler
- mac电脑打不开应用程序如何解决?mac电脑打不开应用程序的解决方法
- 0xC0000008: An invalid handle was specified
- Windows安装Scala:scala安装、idea的scala插件安装、helloworld案例
- ubuntu中把python升级到3.7
- GIF动图在线免费制作 通过PPT辅助基本图形
- jupyter文件转换为py文件