Vue
关注
分享
扫一扫
文章平均质量分 51
长风破浪会有时，直挂云帆济沧海
ParadoxLin
种一棵树最好的时间是十年前，其次是现在。
展开
-
Vue21_vue-router知识点
B站教程——vue-router一、router注册与使用在main.js中注册router（脚手架选择了router默认会引入）在router文件夹下的index.js中引入页面组件+配置映射关系3. 在APP.vue中使用，<router-link> </router-link> 默认可实现超链接效果（可通过tag属性渲染为其他），<router-view/>单标签将路由页面展示出来补充：<router-link></r原创 2021-04-12 13:20:20 · 294 阅读 · 0 评论 -
Vue20_v-for的key值有什么用
1. 定义官方说法：换种说法在用v-for更新已渲染的元素列表的时候，会使用就地复用的策略；这就是说列表数据修改的时候，他会根据key值去判断某个值是否修改，如果修改了就重新渲染，不然就复用之前的元素。总结一下，就是通过key值来提升渲染的效率。2.使用我们需要可以想办法让数组中不会变化的数据的key值也不变，所以不能通过index来设置key值，应该设置一个唯一的id来标识数据的唯一性。原文链接：Vue: v-for的键值key...原创 2021-03-29 23:22:02 · 91 阅读 · 0 评论 -
Vue19_slot插槽
组件的插槽是为了让我们封装的组件更加具有扩展性。让使用者可以决定组件内部的一些内容到底展示什么原创 2021-03-18 17:47:41 · 110 阅读 · 0 评论 -
Vue18_父传子&子传父
1. 父传子：通过props；2. 子传父：通过自定义事件原创 2021-02-26 22:17:12 · 384 阅读 · 0 评论 -
Vue17_组件的data
1. 组件的data属性必须是一个函数；2. 而且这个函数必须返回一个对象，对象内部保存着数据；3. 组件中的data必须是函数而不是对象是为了防止组件多次使用时因共享同一个数据而导致“ 一改全改 ”，使用函数在return时会返回一个新的对象，使得各个组件的数据独立原创 2021-02-25 22:31:25 · 146 阅读 · 0 评论 -
Vue16_初识父子组件
原创 2021-02-25 19:56:24 · 126 阅读 · 0 评论 -
Vue15_input中的值绑定
B站教程-input中的值绑定<body> <div id="app"> <label v-for="item in originList" :for="item" > <input type="checkbox" :value="item" :id="item" v-model="selectList"> {{ item }} </label> <h2>{{ selectList }}原创 2021-02-24 23:08:52 · 1047 阅读 · 0 评论 -
Vue14_v-model在checkbox中的应用
1. 单个勾选框:v-model即为布尔值，此时input的value并不影响v-model的值；2. 多个复选框:当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。当选中某一个时，就会将input的value添加到数组中。原创 2021-02-23 22:22:35 · 180 阅读 · 0 评论 -
Vue13_v-model在radio中的应用
1. v-model在radio单选框中绑定data中数据，会将radio单选框中的value值双向绑定给该数据，也就是选中哪个选项会将该选项的值赋值给data中的数据；2. 值得一提的是，有了v-model双向绑定，radio单选框不加name属性也能实现互斥操作原创 2021-02-23 21:50:02 · 577 阅读 · 0 评论 -
Vue12_使用for...in和for...of在循环遍历时的区别
1. for…in遍历出的结果是key2. for…of遍历出的结果是value；3. v-for...in===v-for...of原创 2021-02-23 20:57:40 · 2167 阅读 · 0 评论 -
Vue11_input复用问题
当我们需要切换时清空输入框，可以给input添加不同的key值；当我们不想在切换时清空输入框，可以不添加或添加相同的key值转载 2021-02-21 21:51:26 · 257 阅读 · 0 评论 -
Vue10_计算属性computed
计算属性关键词: computed；定义起来是一个函数，但使用起来是属性；转载 2021-02-20 14:18:41 · 194 阅读 · 0 评论 -
Vue09_v-model修饰符.lazy/.number/.trim
1 .lazy在默认情况下， v-model 在 input 事件中实时同步输入框的值与数据：<input v-model="msg" >可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：（失去焦点后再同步）<input v-model.lazy="msg" >2 .number如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：.原创 2021-02-19 10:56:49 · 250 阅读 · 0 评论 -
Vue08_组件化02-父子组件传值
一、子组件props属性子组件具有父组件的属性，如数据属性data，但data必须是函数，否则会造成“一改全改”props属性：prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”：效果：二、动态 Prop用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：1. 实例：效果：2. 实例使用.原创 2021-02-14 20:08:11 · 213 阅读 · 1 评论 -
Vue07_组件化01-初识Vue.component
一、component 最简单用法1. 格式完整代码：<div id="app"> <!--在创建的Vue根实例中，把这个组件作为自定义元素来使用组件--> <counter></counter></div><script> Vue.component("counter", { data: function () { return { count: 0 }.原创 2021-02-13 23:02:09 · 253 阅读 · 1 评论 -
Vue06_Vue过滤器filter
Vue中过滤器常用于一些常见的文本格式化原创 2021-02-11 13:06:32 · 161 阅读 · 0 评论 -
Vue05_v-model进一步学习（双向数据绑定在checkbox中的运用）
1.优先级 v-model > value > placeholder，当v-model与value都为空字符串时，placeholder才生效；2.v-model对应的数据为input的value属性，在checkbox中则不同转载 2021-02-13 00:42:01 · 937 阅读 · 0 评论 -
Vue04_Vue基本指令3/3——列表循环、表单元素绑定（v-for/v-on补充/v-model）
一、v-for：根据数据生成列表结构，v-for常与数组结合使用，语法：（item，index）in 数据；二、v-on：1. 事件的绑定可以写成函数调用的方式，传入自定义参数；2. 事件的后面跟上" **.修饰符** "可以对事件进行限制三、v-model：便捷的获取和设置表单元素的值（双向数据绑定），绑定的数据会和表单元素相关联，获取用户输入原创 2021-02-11 12:58:40 · 493 阅读 · 0 评论 -
Vue03_Vue基本指令2/3——显示切换、属性绑定（v-show/v-if/v-bind）
一、v-show根据表达式的真假，切换元素的显示和隐藏；二、v-if根据表达式真假，切换元素的显示与隐藏（直接操纵DOM元素）；三、v-bind为元素绑定属性，v-bind: 属性名，简写 : 属性名原创 2021-02-11 12:46:56 · 1581 阅读 · 0 评论 -
Vue02_Vue基本指令1/3——内容、事件绑定（v-text/v-html/v-on）
一、 v-text：用于输出文本简写形式：{{ }}即插值表达式是v-text的简写形式；二、v-html：用于输出html代码；三、v-on：为元素绑定事件原创 2021-02-11 12:26:33 · 194 阅读 · 0 评论 -
Vue01_认识VUE——Hello VUE！
1. 知识点：el：挂载点后面为CSS选择器类选择器 .appid选择器 #app标签选择器 divdata：数据对象可以写复杂的数据，遵循js语法即可，如：原创 2021-02-11 01:31:17 · 156 阅读 · 0 评论