vue
文章平均质量分 82
zzwi
这个作者很懒,什么都没留下…
展开
-
vue-router参数传递
vue-router参数传递vue-router参数传递通过 :to 和 query 进行参数传递我是Profile标题通过 methods 和 query 进行参数传递通过 params 进行参数传递this.$router.push() 和 paramsvue-router参数传递通过 :to 和 query 进行参数传递URL 是表示资源位置的字符串。解析URL (维基百科) <scheme> 方案+<host> 主机+<port> 端口+<host原创 2021-04-30 12:17:48 · 121 阅读 · 1 评论 -
Vue的学习(八)
Vue的学习(八)v-model原理v-model 其实是一个语法糖,它的背后本质上是包含两个操作:v-bind绑定一个value属性v-on指令给当前元素绑定input事件参考代码<input type="text" v-model="message"><!-- 等同于下面 --><input type="text" :value="message" @input="message = $event.target.value">v-model原创 2021-04-05 09:30:17 · 141 阅读 · 1 评论 -
Vue的学习(7)
Vue的学习(七)let(变量)/const(常量)在Vue中,let用于声明变量,const用于声明常量const一旦给const修饰的标识符被赋值之后,不能修改在使用const定义标识符时,必须进行赋值常量的含义是指向的对象不能修改,但是可以改变对象内部的属性,因为const指向的是对象的地址let app = new Vue({ // 选项});Vue列表展示<!-- html --><div id="app"> <h1 v-f原创 2021-04-03 19:10:04 · 1446 阅读 · 0 评论 -
Vue的学习(六)
Vue的学习(六)组件基础(大部分源自官网)这里有一个Vue组件的示例:vue// 定义一个名为 button-counter 的新组件Vue.component('button-counter',{ data:function(){ return{ count:0 } }, template:'<button v-on:click="count++">You clicked me {{ count原创 2021-03-21 11:57:10 · 181 阅读 · 0 评论 -
Vue的学习(五)
Vue的学习(五)v-on传参数当使用@click、@input之类可以传参的v-on绑定事件时,需要注意参数问题如果该事件(方法)不需要额外参数,那么方法后面的()可以不添加。但是注意,如果在v-on:后双引号内的方法()或methods中定义的方法()内自带有一个参数,那么会默认将原生事件event参数传递进去如果在需要传入某个参数时,同时需要原生event,可以通过$event传入事件参考代码html<div id="example"> &l原创 2021-03-21 08:20:06 · 112 阅读 · 1 评论 -
Vue的学习(四)
Vue的学习(四)v-on:的深入了解事件修饰符.once 只执行一次.prevent 提交事件不再重载页面,阻止默认事件.stop 阻止事件扩散,即阻止冒泡.capture 捕获点击事件,改变冒泡顺序.self 该修饰符可以理解为跳过冒泡事件和捕获事件,只有直接作用在该元素上的事件才可以执行.passive关于.passive修饰符 vue官方文档是这样介绍的:.passive 会告诉浏览器你不想阻止事件的默认行为。在vue中,不阻止默认事原创 2021-03-13 16:47:42 · 552 阅读 · 0 评论 -
Vue的学习(三)
Vue的学习(三)transition在下列情形中可以提供进入/离开的过渡效果条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点过渡的类名在进入/离开的过渡中,会有 6 个 class 切换。v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进原创 2021-03-09 21:00:03 · 93 阅读 · 0 评论 -
Vue的学习(二)
Vue的学习(二)特殊attributekey引用自官方文档key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。最常见的用例是结合 v-for:原创 2021-03-09 20:18:26 · 148 阅读 · 0 评论 -
Vue的学习(一)
初识Vue框架首先,先进入vue官网,在上方菜单栏的学习下拉框中找到教程,跟着指引下载vue.js文件,再自选一个编译软件,我是使用的Visual Studio Code,便可以跟着官方教程或者自己找其他资源正式开始学习vue框架了!创建一个Vue实例每个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的下面将介绍Vue实例的创建以及常用的三个Vue内置apiel— 与css与原生js一样id绑#、class绑.data— 可存放所有数据,其内存放的数据变动时视图也会即时发生原创 2021-03-09 20:16:59 · 128 阅读 · 0 评论