VUE学习笔记
stack君
这个作者很懒,什么都没留下…
展开
-
混入 (mixin)
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。...原创 2022-07-04 15:19:21 · 101 阅读 · 0 评论 -
v-bind绑定class、style、属性和对象
绑定属性使用v-bind:缩写::预期:any (with argument) | Object (without argument)参数:attrOrProp (optional)修饰符:.camel - 将 kebab-case attribute 名转换为 camelCase。用法:动态地绑定一个或多个 attribute,或一个组件 prop 到表达式。2.2.1. 绑定基本属性前面我们讲的Mustache等语法主要是将内容插入到 innerHTML 中。很多时候,元素的属性也原创 2022-03-06 23:03:30 · 868 阅读 · 0 评论 -
Vue学习笔记——插值表达式、v-text和v-html
前言:插值表达式的格式:{{表达式}}该表达式支持js内置语法,可以调用js的内置函数(必须有返回值)。表达式必须要有返回结果,比如:1+1。像var a = 1+1这样的就不行。可以直接使用Vue实例中定义的数据模型或者函数。1.使用js内置函数示例:<html> <div id = "app"> {{999+999}} </div></html>2.使用数据模型的值示例:定义Vue实例的数据模型:const app转载 2022-02-25 09:32:20 · 577 阅读 · 0 评论 -
vue中定时器一般用法,定时器函数传参以及清除定时器
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。原创 2022-02-16 10:06:41 · 4349 阅读 · 0 评论 -
vue过滤器filters的使用
当你在v-for循环渲染一个数组对象的时候,是否遇到过这样的问题:对象里面的字段并不是直接渲染在页面中,而是需要把数据处理过后的内容显示在页面上。方法一:在接口获取到数据的时候,利用数组方法map先处理数据,再直接渲染方法二:利用vue提供的filters钩子,实现数据的过滤处理再渲染处理过后的内容。下面说下方法二怎么实现:1、html代码中,{{}}中实现filters顺序是{{参数 | filters函数 | filters函数 | ...}},| 后面可以多个filters函数,前面fil转载 2021-11-09 17:11:09 · 990 阅读 · 0 评论 -
vue——样式穿透
三大样式穿透在使用很多vue常用的组件库(element, vant, vuetify)时,虽然官方会配好样式但是还是需要更改其他的样式三大样式穿透 >>> , ::v-deep , /deep/在style经常用scoped属性实现组件的私有化,所以才需要样式穿透需要注意: >>> 只作用于css::v-deep 只作用于sass/deep/ 只作用于less,但在vue 3.0会报错,可采用::v-deep示例:1<style原创 2021-11-01 16:41:42 · 364 阅读 · 0 评论 -
计算属性缓存vs方法 计算属性 vs 侦听属性
计算属性缓存 vs 方法你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果:<p>Reversed message: "{{ reversedMessage() }}"</p>// 在组件中methods: { reversedMessage: function () { return this.message.split('').reverse().join('') }}我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果转载 2021-10-20 10:23:23 · 122 阅读 · 0 评论 -
vue——在Vue中使用插槽:slot
在Vue中使用插槽:slot1、在子组件的template里可以直接使用slot标签<slot></slot>,它可以显示父组件向子组件插入的内容。2、slot标签里面可以写一些默认值,当父组件没有插入内容的时候它就会显示默认值,插入内容时就只显示插入的内容。3、当使用多个slot标签时,直接插入多个内容时,每个slot标签内都会包括所有插入的内容。可以通过slot属性给插入的不同内容设置指定的名字,然后给相应的slot标签设置相应的name属性值,就可以让该slot标签显示原创 2021-08-24 23:44:22 · 1583 阅读 · 0 评论 -
vue——非父子组件间的传值:Vuex、发布订阅模式(总线机制)
非父子组件间的传值:Vuex、发布订阅模式(总线机制)Bus/总线机制发布订阅模式/观察者模式:1、Vue.prototype.bus = new Vue();给Vue这个类上挂了一个bus属性,通过这个类创建的实例上都会有bus这个属性,它都指向同一个vue的实例。2、在子组件的template里绑定一个事件(如handle),在子组件的methods里定义这个事件(如handle),通过this.bus.$emit('事件名',参数)【this.bus指的是这个实例上挂载的bus,这个bus又是v原创 2021-08-24 11:19:37 · 283 阅读 · 0 评论 -
vue——给组件绑定原生事件:.native
给组件绑定原生事件:.native1、在组件标签上绑定的事件是自定义事件,在组件模板里绑定的事件才是原生的事件。(自定义事件可以通过在子组件中通过this.$emit去触发,但是这样太麻烦)<div id="root"> <!-- 监听自定义事件 --> <child @click="handleClick"></child> </div> <script> Vue.compone原创 2021-08-24 11:16:27 · 1282 阅读 · 0 评论 -
vue——组件参数校验与非Props特性
组件参数校验与非Props特性1、组件参数校验:父组件向子组件传递的数据,子组件有权对这些数据进行约束。要进行约束的话,props就要是一个对象而不是数组,对象的键就是接收的参数的名字,对象的值是接收的参数需要满足的条件。<div id="root"> <child :content="'hello world'"></child></div><script>Vue.component('child',{ //参数校验 //1、原创 2021-08-23 18:28:52 · 631 阅读 · 0 评论 -
vue——父子组件的数据传递
父子组件的数据传递1、 父=>子(通过属性的形式):(1)在子组件的标签里设置属性【如 :count=“0” 】。给属性前面加上冒号,参数‘0’会变成数字格式(变为一个js表达式);不加冒号的话参数‘0’会是字符串形式。(2)在子组件里通过props接收数据,如props:[‘count’],子组件可以使用该数据,但不能修改改数据【这是因为Vue中的单向数据流,子组件只能使用父组件传过来的这个数据,而不能去直接修改这个数据】(3)解决单向数据流子组件不能直接修改传过来的数据的问题:在子组件里原创 2021-08-23 18:14:51 · 640 阅读 · 0 评论 -
vue——使用组件的细节点
使用组件的细节点1、使用is属性解决模版标签出现Bug的问题当要使用一个组件但是不能直接使用的时候(比如定义了一个组件row,它的内容是"<tr><td>this</td></tr>",要在一个table标签里使用它,直接写row标签的话会导致tr和table在同一级),可以使用is属性使该标签的内容为组件的内容(如在table内<tr is="row"></tr>,就可以实现table内的每个tr都是自定义组件row的内容),符合原创 2021-08-23 18:08:37 · 86 阅读 · 0 评论 -
vue——表单绑定
Vue中的表单绑定1、v-model指令只能在input、select、textarea这三类标签上使用注意:(1)用在select标签时,推荐第一项设置为‘<option disabled>--请选择--</option>’,增强用户体验。(2)用在select标签时,如果给option设置value属性,select框对应的数据的值会变成选中的option的value值;如果option没有设置value值,那select对应的数据值会是option的innerText值原创 2021-08-22 22:46:46 · 731 阅读 · 0 评论 -
vue——事件绑定
Vue中的事件处理方法:一、事件绑定基础语法有两种写法:1、直接写函数名,@click="handleClick";2、加$event,@click="handleClicks($event,参数)"参数可选,$event是内置事件对象 ;好处:不但可以传事件对象,还可以传其他的参数<div id="app"> <!-- 第一种写法 --> <button @click="handleClick">Button</button> <原创 2021-08-22 10:09:27 · 12071 阅读 · 0 评论 -
vue——set方法
Vue中的set方法【set方法既是一个Vue的全局方法,它也是一个实例方法。】1、对象使用:(1)全局方法:Vue.set(vm.userInfo,“address”,“beijing”)(对象名,键名,键值)(2)实例方法:vm.$set(vm.userInfo,“address”,“beijing”)2、数组使用:(1)全局方法:Vue.set(vm.userInfo,2,10)(数组名,下标,新的数据)(2)实例方法:vm.$set(vm.userInfo,3,8)<div i原创 2021-08-22 00:10:10 · 7729 阅读 · 0 评论 -
vue——列表循环
Vue中的列表渲染官网文档: https://cn.vuejs.org/v2/guide/list.html.一、数组循环:1、v-for中的in和of是一样的效果,二者都可以遍历数组和对象.建议使用v-for-of 更接近迭代器的语法.2、(item,index) of list中的index代表下表标3、:key="item.id中key值(唯一的)推荐使用item.id,为了提升性能(尽量别用index做key值)4、修改数组内容的时候,不能直接通过修改index(list[下标])来修改原创 2021-08-21 15:30:55 · 6151 阅读 · 0 评论 -
vue——条件渲染
Vue中的条件渲染更多:1、v-if后面表达式返回的值(false\true)决定这个div是否被真实的挂载在页面上.PS:Vue在重新渲染页面的时候会尽量尝试复用页面上已经存在的Dom,所以需要key值的方式处理这个问题2、if-else、if-else if-else连在一起使用才生效3、v-show后面表达式返回的值(false\true)决定这个div是否显示或隐藏在页面上(display:none/block),性能高 <div id="app"> <!-- v-i原创 2021-08-21 12:39:48 · 127 阅读 · 0 评论 -
vue——Vue中样式的绑定
Vue中样式的绑定1、class的对象绑定class的对象绑定::class=“{activated:isActivated}”data:{isActivated:false}//根据对象中类的值为true/false,来绑定不同的类名,实现不同的样式class的数组绑定:class="[activated,activatedOne]"data:{activated:"",activatedOne:"activated-one"}//数组里的每一项都是一个变量,通过设置每个变量原创 2021-08-21 10:28:06 · 324 阅读 · 0 评论 -
vue——计算属性的setter和getter
计算属性的setter和getter:使用插值表达式的时候,会先去data里找,找不到的话再去计算属性里找。计算属性computed里的属性可以写成对象的形式,然后在这个对象里定义两个方法set和get,get返回这个属性,set设置这个属性,调用的时候直接使用(vue实例.计算属性)的格式【比如vm.fullName是调用的get方法,返回fullName;vm.fullName="Dol Wsk"是调用set方法,设置fullName】。<div id="app"> {{fullN原创 2021-08-21 10:23:59 · 473 阅读 · 1 评论 -
vue——计算属性、方法、侦听器
计算属性、方法、侦听器1、计算属性:computed:{}内置缓存,代码简洁,性能高,推荐优先使用;计算属性,也就是某个值会通过计算得到。它是内置缓存的,当它依赖的变量没有发生任何变化的时候,这个计算属性就不会重新计算了,会一直用上一次计算的结果,这样可以提高一些性能;当它依赖的变量发生变化的时候,计算属性会重新计算一次。2、使用方法methods在页面里调用的时候要加上‘()’。这种方式是没有计算属性有效的,因为这种方式【没有缓存】,页面只要被重新渲染,方法就会重新被执行一次,它的性能没有计原创 2021-08-20 10:04:52 · 110 阅读 · 0 评论 -
vue——模板语法
Vue的模板语法1、插值表达式:{{…}}2、当我们看到vue指令后面跟着一个值得时候,这里的值就不再是一个字符串了,它指的是一定是一个JS的表达式。①v-text=“name”;表示让这个div标签里面的innerText的内容变成data数据里name的内容。效果和插值表达式一样,进行了转义,不会有任何样式的改变。②v-html=“name”;让这个div标签里的innerHTML的内容和name这个数据变量做绑定。不做任何的解析,把内容输出出来。【v-html不会转译,内容按普通 HTM原创 2021-08-19 22:58:09 · 470 阅读 · 0 评论 -
vue——Vue实例生命周期
Vue实例生命周期: Vue生命周期图示.Vue生命周期图示生命周期函数就是vue实例在某一个时间点会自动执行的函数。生命周期函数(钩子)有:1、beforeCreate:初始化事件和生命周期相关内容完成后2、created:处理外部注入(例如:双向绑定)后3、beforeMount:初始化结束后,判断是否有el,是否有template,如果有则执行,如果没有将el内部的内容当做模板来执行。该函数在模板和数据相结合,即将挂载到页面上时执行4、mounted:模板结合数据生成的最终的Vue实例里的原创 2021-08-19 22:49:36 · 204 阅读 · 0 评论 -
vue——简单的组件间传值
父组件向子组件传值通过v-bind传给子组件,子组件用props接收子组件向父子间传值通过$emit(事件类型,传递值)来向上层触发事件,父组件则对事件进行监听:v-bind:index="index"可以简写 :index=“index”v-on:click="hdd"可以简写 @click=“hdd”<div id="app"> <!-- 在此补充代码 --> <input type="text" v-model="inputVa原创 2021-08-19 21:45:22 · 124 阅读 · 0 评论 -
vue——全局组件和局部组件
全局组件:1、Vue.component是Vue提供的创建全局组件的方法。语法:Vue.component("组件名",{})2、props:['content'], 【接收传过来的content值】3、template:"<li>{{content}}</li>"【组件的内容模板,接收内容替换原标签内容后进行渲染】4、 v-bind:content="item"【向子组件传递一个绑定值】<div id="app"> <input typ原创 2021-08-19 21:05:54 · 378 阅读 · 0 评论 -
vue学习笔记——TodoList
TodoList:在输入框中输入的内容点击提交按钮以后会增加到一个列表里。基础语法:1、v-for:在标签中使用v-for会循环遍历data里指定数组的数据项【item指数组项,list指在data里定义的数组】;<li v-for = 'item in list'>{{item}}</li>2、v-on:Vue中绑定事件,要绑定的事件类型写在v-on后面,之间用‘:’连接,要执行的函数写在后面的属性值里,然后在Vue实例的methods属性(该对象是一个对象)中定义该函数原创 2021-08-18 11:47:57 · 344 阅读 · 0 评论 -
vue学习笔记——hello world
vue的使用:hello world1.用script引入vue<script src="./vue.js"></script>//在Vue.js官网下载Vue(选择开发版本),使用script标签引入。【新版跟老版相比,就是可以先不用安装vue框架,直接引入vue.js文件即可使用相关语法。可以类比于jquery插件,引入了以后就可以使用其方法和语法结构。】2.实例化vuevar app =new Vue({ el:'#app',//定义处理DOM的范围原创 2021-08-18 10:47:28 · 134 阅读 · 0 评论