Vue
Licheng Xu
Master student of University Malaya - Software Engineering
展开
-
Vue实战:公用组件拆分,结合毕设完成后台导航栏
Vue实战:公用组件拆分,结合毕设完成后台导航栏 一、创建文件夹将公用组件都放到common文件中 二、修改webpack.base.conf.js在webpack.base.conf.js添加别名’common’: resolve(‘src/common’),让common指向刚刚创建的文件夹,修改文件都需要重启项目 resolve: { extensions: ['....原创 2020-02-26 01:36:22 · 267 阅读 · 0 评论 -
Vue实战:使用Vuex结合毕业设计实现数据共享
Vue实战:使用Vuex结合毕业设计实现数据共享 一、存在问题预约功能中,需要显示预约充电桩的信息,这时候我已经调用的后台的API接口获取了充电桩信息,里面包含了经纬度,这时候路线功能也是需要用到充电桩的经纬度,如果两个都一直调用的话,不如弄成数据共享,当项目涉及大量数据进行传递的时候,可以利用vuex数据框架:https://vuex.vuejs.org/zh/ 二、Vuex简单介绍...原创 2020-05-22 23:01:35 · 1123 阅读 · 0 评论 -
Vue学习:元素、组件、列表过度与动画封装
Vue学习:元素、组件、列表过度与动画封装 一、多个元素过度1.1 点击切换,此时点击style中的动画并没有出现由于Vue是尽可能的复用DOM元素,所以这时候动画并不会出现 <style> .v-enter,.v-leave-to{ opacity: 0; } ...原创 2019-11-07 22:43:29 · 248 阅读 · 0 评论 -
Vue学习:使用animate.css库并与过度、Velocity.js结合
Vue学习:使用animate.css库并与过度、Velocity.js结合 一、使用keyframes动画1.1 未自定义命名需求这里transition的name为fade,则会命名需要为fade-enter-active、fade-leave-active <style> @keyframes bounce-in{ ...原创 2019-11-05 22:14:47 · 242 阅读 · 0 评论 -
Vue学习:Vue中CSS动画原理
Vue学习:Vue中CSS动画原理 一、例子1.1 基础代码代码实现了点击按钮hello derrick显示或者消失,现在需要添加过度效果<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Hello ...原创 2019-11-05 18:17:55 · 131 阅读 · 0 评论 -
Vue学习:使用插槽、作用域插槽与动态组件
Vue学习:使用插槽、作用域插槽与动态组件 一、插槽1.1 使用场景当希望子组件初了展现p标签之外,还需要展示一段内容,但这段内容不是我子组件所决定的,而是父组件传递过来的 <body> <div id="app"> <child></child> <child&g...原创 2019-11-03 19:02:30 · 292 阅读 · 0 评论 -
Vue学习:给组件绑定原生事件与非父子组件间的传值
Vue学习:给组件绑定原生事件与非父子组件间的传值 一、组件绑定原生事件1.1 点击无效,属于组件间定义的事件为自定义事件 <body> <div id="app"> <!--这里绑定的是自定义事件,点击无效--> <child @click="handleClick">&...原创 2019-11-01 20:28:19 · 192 阅读 · 0 评论 -
Vue学习:父子组件间数据传递,参数校验与非props特性
Vue学习:父子组件间数据传递,参数校验与非props特性 一、父子组件间数据传递1.1 父组件通过属性向子主键传递数据下面例子中给子组件添加属性count,然后子组件在pros里接收 <body> <div id="app"> <!--父组件通过属性向子主键传递数据,利用count属性--> ...原创 2019-11-01 16:23:24 · 383 阅读 · 0 评论 -
Vue学习:使用组件的细节点
Vue学习:使用组件的细节点 一、is解决html5解析错误问题1.1 在HTML创建table <table> <tbody> <tr><td>this is derrick</td></tr> ...原创 2019-11-01 14:38:09 · 119 阅读 · 0 评论 -
Vue学习:基础精讲
Vue学习:基础精讲 一、Vue实例new Vue创建Vue实例,el代表Vue接管的DOM的所有显示,data里面用于存放数据,由于Vue接管了app部分,所以会对DOM里面的语法进行分析,发现运用了{{}}插值表达式,就会去data里面寻找对应的数据,利用这个数据替换掉这个插值表达式同时Vue也可以分析出DOM所绑定的事件,所以当点击DOM元素的时候,就会去Vue实例寻找对应的方法程...原创 2019-11-01 12:06:37 · 261 阅读 · 0 评论 -
Vue学习:使用组件改造ToDoList与组件间的传值
Vue学习:使用组件改造ToDoList与组件间的传值 一、原本的ToDoList每一个li可以当作页面的一个部分,便可以拆开来编写,原本这里是利用v-for循环li标签来显示的,可以将li标签组件化<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"&g...原创 2019-10-31 12:46:04 · 319 阅读 · 0 评论 -
Vue学习:简单的ToDoList开发
Vue学习:简单的ToDoList开发 一、知识点1.1 v-forv-for=“item in list”,这里告诉vue需要去循环list里面的数据,循环的每一项我都放进item里面,然后利用插值表达式{{}}去使用item,<html lang="en"> <head> <meta charset="UTF-8"> ...原创 2019-10-30 22:40:15 · 148 阅读 · 0 评论 -
Vue学习:Hello World
Vue学习:Hello World 一、安装vue.js就为vue的库文件,这时候再创建一个index.html,使用visual studio code打开 二、Hello World2.1 原生js让div显示hello world<!DOCTYPE html><html lang="en"> <head> <...原创 2019-10-30 16:36:02 · 186 阅读 · 0 评论