![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue框架笔记
文章平均质量分 83
B.Bz
毛毛你是个好姑娘
展开
-
Vue基础----过滤器
什么是过滤器?过滤一遍原始值,来组成想要的值渲染到模板上过滤器语法:<div>{{ 变量 | 过滤器名字 }}</div>Vue.filter('过滤器名字',function(变量传参){ // 处理代码 return 返回值;})代码示例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta nam原创 2021-12-14 20:53:01 · 853 阅读 · 0 评论 -
Vue基础----自定义指令
什么是指令?指令 (Directives) 是带有 v- 前缀的特殊属性我们需要自定义一些指令来满足我们的要求注册全局指令:语法: Vue.directive('变量名', {})<body> <div id="app"> <!-- 使用v-变量名来使用这个自定义指令 --> <input type="text" name="" id="" v-focus> </div></body原创 2021-12-14 16:20:10 · 990 阅读 · 0 评论 -
Vue基础----生命周期
什么是生命周期?我们把一个对象从生成到被销毁的过程,称为生命周期。而生命周期函数,就是在某个时刻会自动执行的函数。beforeCreate() 和 created() 创建阶段:生命周期函数这个阶段发生了什么?beforeCreate()这个阶段data中的数据和methods中的方法都还没有初始化 ,Vue实例刚在内存中创建created()这个阶段data中的数据和methods中的方法已经初始化完成,Vue实例已经创建好了,模板还没有编译<!DOC原创 2021-12-13 21:53:08 · 750 阅读 · 0 评论 -
Vue基础----插槽
插槽的基本使用为什么要使用插槽?如果需要使用多个基本一样的组件,但是每一个组件的某一个部分会不一样就要使用插槽来更改内容组件的模板内的<slot></slot>标签就是插槽html上的组件标签内的内容会自动赋值到插槽内<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" con原创 2021-12-13 20:29:46 · 570 阅读 · 0 评论 -
Vue基础----组件通信
什么是组件通信?当一个组件拥有另外一个子组件,子组件如果使用父组件的方法和属性?子组件如何向父组件的方法传递参数?像这种就是组件与组件之间的通信子组件和父组件通信使用属性:props属性接收属性:属性key=“属性值” 自定义key=“属性值” 传参<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewp原创 2021-12-06 14:46:06 · 550 阅读 · 0 评论 -
Vue基础----计算属性和侦听器
计算属性:为什么要使用计算属性?模板上的表达式很便利,但有时候需要用到复杂的运算,写在模板表达式上面会让模板加重且难以维护。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g.原创 2021-12-03 16:23:08 · 295 阅读 · 0 评论 -
Vue基础----组件基础
什么是组件?组件提供了HTML DOM元素的扩展性,可以把一块代码块封装起来,可以方便维护和重复使用组件的分类 :展示型组件负责呈现 UI 为主的类型,我们很单纯地把资料传递进去,然后 DOM 就根据我们传递进去的数据生成出来。这种组件的好处是可以提升 UI 的重复使用。容器型组件负责与数据层的 service 沟通, 包含了与 server 端、数据来源做沟通的逻辑,然后再将数据传递给前面所说的展示型组件。互动型组件负责互动的逻辑,比如 elementUI、bootst.原创 2021-12-03 15:19:16 · 618 阅读 · 0 评论 -
Vue基础----指令系统
属性绑定指令基本用法:动态修改标签的属性值:v-bind:属性名="属性值"简写::属性名="属性值"自定义属性也可以添加<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&.原创 2021-11-30 18:22:40 · 768 阅读 · 0 评论 -
运行Vue项目流程----从“下载“node.js开始
下载node.js下载最新版的node.js windows64位msi安装程序下载完之后运行直接next下一步选择完安装位置,直接一路默认安装测试安装是否成功node -vnpm -v安装vue-clinpm install --global vue-cli安装完之后测试vue -V小tips:更换npm的下载源:npm config set registry 源地址# 淘宝源https://registry.npm.taobao.org# 原镜像ht.原创 2021-06-24 20:23:58 · 142 阅读 · 1 评论 -
Vue框架基础——迈出第一步
下载Vue框架把Vue框架当作一个包使用,下载:https://cn.vuejs.org/v2/guide/installation.html直接导入外网上的Vue框架导入网址:https://cdn.jsdelivr.net/npm/vue/dist/vue.js (开发版)<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>Vue框架的基本使用导入Vue框架给标签添加cla原创 2021-04-02 16:22:18 · 165 阅读 · 1 评论