Vue
关注
分享
扫一扫
vue学习记录
叨叨凡
这个作者很懒，什么都没留下…
展开
-
【Vue】props配置
props配置项 功能：让组件接收外部传来的数据 （1）传递数据： <Demo name="xxx" /> （2）接收数据： 第一种方式（只接收）： props:['name'] 第二种方式（限制类型）： props:{ name:String } 第三种（限制类型、限制必要性、指定默认值）： props:{ name:{ type:String, //类型 required:true, //必要性 default:'xxx' //默认值 } } 备注：原创 2022-03-20 14:41:08 · 1077 阅读 · 0 评论 -
【Vue】脚手架默认配置
个性化定制脚手架，修改Vue CLI的默认配置 vue脚手架默认隐藏了重要文件，可以使用在cmd使用vue inspect > output.js 令重要配置文件输出一份。 不可修改部分： public结构不可修改 src结构不可修改 main.js名称不可修改 修改入口文件main.js的默认设置： 1.查阅Vue CLI官方文档中的配置文件 2.如果想要个性化定制脚手架，需要在package.json同级文件夹下创建一个vue.config.js文件。 3.找到配置文件左侧目录栏中的pages，复原创 2022-03-20 00:27:12 · 1175 阅读 · 0 评论 -
【Vue】render函数
render函数 现象： 在main.js中的Vue实例里，需要使用render函数将组件渲染到html容器中 原因： import Vue from 'vue' //这里引入的不一定是完整版的vue，可能缺少模板解析器 为了让浏览器能够编译缺少模板解析器的组件，使用render函数加载模板并返回给浏览器 //全写 render(createElement){ return createElement(App) } //简写 render: h => h(App) 案例： import V原创 2022-03-19 23:50:03 · 366 阅读 · 0 评论 -
【Vue】VueComponent及其内置关系
VueComponent 案例： <html> <head> <meta charset='UTF-8'> <title>VueComponent</title> <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script> </head> <body> <div id='root'&原创 2022-03-19 19:41:30 · 148 阅读 · 0 评论 -
【Vue】非单文件组件
组件化编程 组件的定义： 实现应用中局部功能代码和资源的集合 非单文件组件： 一个文件中包含有n个组件。 使用组件的三大步骤： 1.定义组件（创建组件） 2.注册组件 2.使用组件（写组件标签） 如何定义一个组件： 使用Vue.extend(options)创建，其中options和new Vue(options)时传入的哪个options几乎一样，但也有点区别: 1.不要写el --最终所有组件都经过一个vm的管理，由vm中的el决定哪个容器。 2.data必须写成函数 --避免组件被复用时，数据存在引用原创 2022-03-19 15:51:26 · 958 阅读 · 0 评论 -
【Vue】生命周期
生命周期 又名： 生命周期回调函数、生命周期函数、生命周期钩子 是什么： Vue在关键时刻帮我们调用的一些特殊名称的函数 备注： 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的* 生命周期函数中的this指向的是vm 或 组件实例对象 beforeCreated: 1.初始化了生命中期及事件，但数据代理还未开始。 2.此时无法通过vm访问到data中的数据、methods中的方法。 created: 1.初始化：数据监测、数据代理。 2.此时可以通过vm访问到data中的数据、metho原创 2022-03-19 14:24:12 · 271 阅读 · 0 评论 -
【Vue】自定义指令
自定义指令 Vue模板语法有2大类： 1.插值语法： 功能：用于解析标签体内容 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。 2.指令语法： 功能：用于解析标签（包括：标签属性、标签体内容、绑定时间…）。 举例：v-bind:href=“xxx”或简写为:href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性。 备注：Vue中有很多的指令，且形式都是：v-xxx。 定义： 1.局部指令： new Vue({directives:{指令名:配置原创 2022-03-19 09:42:44 · 174 阅读 · 0 评论 -
【Vue】内置指令
内置指令 梳理： v-bind : 单向绑定解析表达式，可简写为:xxx v-model : 双向数据绑定 v-for : 遍历数组/对象/字符串 v-on : 绑定事件监听，可简写为@ v-if : 条件渲染（动态控制节点是否存在） v-else:条件渲染（动态控制节点是否存在） v-show : 条件渲染（动态控制节点是否展示） v-text : 1.作用：向其所在的节点中渲染文本内容。 2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。 v-html : 1.作用：向指定节点原创 2022-03-18 16:39:17 · 439 阅读 · 0 评论 -
【Vue】过滤器的使用
过滤器 定义： 对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理） 语法： 1.注册过滤器：Vue.filter(name,callback) 或 new Vue(filters:{}) 2.使用过滤器：{{xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名” 备注： 1.过滤器也可以按收额外参数、多个过滤器也可以串联 2.并没有改变原本的数据，是产生新的对应的数据 案例： <html> <head> <meta charset=原创 2022-03-18 14:11:31 · 141 阅读 · 0 评论