vue
关注
分享
扫一扫
桑丘紫言
这个作者很懒，什么都没留下…
展开
-
vue学习笔记day22 多元素多物体运动
一 vue的过渡 实现多物体运动使用 animate.css库 下载 bower install animate.css多元素 多物体运动 使用 transition-group 其子元素加属性key案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&...原创 2020-03-08 17:45:40 · 207 阅读 · 0 评论 -
vue学习笔记day21 使用velocity.js第三方js库实现动画
一 vue的过渡 （动画） 第四种方式 实现动画 使用第三方js库 Velocity.js案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev...原创 2020-03-08 17:35:04 · 228 阅读 · 0 评论 -
vue 学习笔记20 使用钩子函数实现动画
一 vue的过渡 （动画） 钩子函数vue动画的js钩子函数相当于动画的生命周期函数 。before-enter:进入之前触发 。after-enter：进入后触发 。enter-cancelled：结束进入阶段 。before-leave:进入之前触发 。after-leave：进入后触发 ...原创 2020-03-08 17:17:11 · 666 阅读 · 0 评论 -
vue学习笔记day19 动画之animate.css库使用
一 vue的过渡 （动画） 2》利用css动画库 (animal.css) bower install animate.css案例1<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"...原创 2020-03-08 16:48:57 · 660 阅读 · 0 评论 -
vue学习笔记day18 vue动画
一 vue的过渡 （动画） 1> 利用class 名称 2》利用css动画库 (animal.css) 3》利用钩子函数 4》利用第三方js库 在vue 提供组件 transition实现过渡在进入/离开的过渡中，会有 6 个 class 切换。v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。v...原创 2020-03-08 16:26:43 · 209 阅读 · 0 评论 -
vue学习笔记day17 子组件和子组件之间的传值
一 vue的组件传值 （通讯）a>父子组件通信 props 父组件给子组件传值 子组件使用父组件数据 1》在子组件props:[定义数据名称] 子组件中使用 {{子组件props定义的数据名称}} 2》<com :子组件名称="父组件数据名称"></com> 将父组件数据名称传给子组件中 props是单向数据流...原创 2020-02-29 18:22:08 · 551 阅读 · 0 评论 -
vue学习笔记day16 子组件使用父组件数据
一 vue的组件传值 （通讯） props 父组件给子组件传值 子组件使用父组件数据 1》在子组件props:[定义数据名称] 子组件中使用 {{子组件props定义的数据名称}} 2》<com :子组件名称="父组件数据名称"></com> 将父组件数据名称传给子组件中例子1<!DOCTYPE html>...原创 2020-02-29 17:36:40 · 276 阅读 · 0 评论 -
vue学习笔记day15 vue局部组件
一 vue的局部组件 局部组件格式 components: { "子组件名称": { template: "", data: function() { return { ...原创 2020-02-29 17:11:22 · 160 阅读 · 0 评论 -
vue学习笔记day14 vue全局组件
一 vue的组件 什么是组件 1》 扩展html元素 2》重用性 3》可以实现特殊功能 全局组件（父组件） Vue.Component(组件名称，{}) 组件中的data是一个函数 不是对象 data必须返回对象 return { 对象名称:值 ,} 局部组件（子组件）例...原创 2020-02-29 16:54:25 · 181 阅读 · 0 评论 -
vue 学习笔记day13 vue的自定义指令
一 vue的自定义指令 系统指令 ---》v-if v-show v-... 自定义 v-zhangsan v-color 全局 // 注册一个全局自定义指令 `v-focus` Vue.directive('指令名称',function（el,binding）{}) ...原创 2020-02-29 16:21:12 · 136 阅读 · 0 评论 -
vue学习笔记day12 vue的生命周期
一 vue的生命周期 1>beforeCreate 2>created 3>beforeMount 4>Mounted===>window.onload 5>beforeUpdate 6>updated 7>beforeDestory 8>destoryed例子1<...原创 2020-02-29 15:28:03 · 131 阅读 · 0 评论 -
vue 学习笔记day10 vue-resource 和java 后端交互
一 vue 交互 1》jquery =>$ajax 2》js原生 :es6=>axios 3>》vue的resource get this.$http.get() this.$http.get("http://localhost:8080/MyBlogSys/test/run", { ...原创 2020-02-29 14:29:12 · 346 阅读 · 0 评论 -
vue学习笔记day09 表单控件绑定
一 vue 表单控件绑定 1>v-model 数据的双向绑定 2>修饰符 .trim 去除前后空格 .number 转换输入的内容为numer类型 .lazy 失去焦点或者触发onchange事件触发数据同步例子1<!DOCTYPE html><html lang="en"><...原创 2020-02-27 19:07:14 · 134 阅读 · 0 评论 -
vue学习笔记day08 事件处理机制
一 vue 事件操作 1》监听事件 可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 v-on:事件名称 简写 ： @事件名称 2》方法事件处理器 @事件名称=“方法名称（参数1，参数2，。。）” 3》事件修饰符 阻止冒泡 @click.st...原创 2020-02-27 18:48:35 · 208 阅读 · 0 评论 -
vue学习笔记day07 列表渲染
一 vue的列表渲染 1》 v-for="(item ,index) in 数组名称" item是数组中的每一个值 index是数组的下标 2》 v-for="(item ,index) in 对象名称" item是对象的value index是对象的key 例子1<!DOCTYPE html&...原创 2020-02-27 18:20:32 · 207 阅读 · 0 评论 -
vue学习笔记day05 条件渲染
一 vue的条件渲染 v-if v-else-if v-else v-show v-if和v-show区别 1》v-show 没有v-else 2》v-show 不支持template 3》v-show 只是来做简单的切换（css=>display) 例子1<!DOCTYPE html>&l...原创 2020-02-27 18:04:56 · 169 阅读 · 0 评论 -
vue学习笔记day05 class和style的绑定
一 vue的class 和style的绑定 1.class绑定 :class = "data数据中的值" 对象写法 :class = "{bg:true}" 显示属性 false 不显示 :class = "{bg:true,fz:true}" 数组写法 :class="[bg,fz]" ==>取data中数据中的值 2....原创 2020-02-27 17:51:19 · 206 阅读 · 0 评论 -
vue学习笔记day04 计算属性computed
一 VUe计算属性模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。{{}}内放入了大量的逻辑代码，过重和难以维护解决—》计算属性 [computed] 基本写法：默认走的是get computed:{ b:function(){ //只能获取不能设置 ...原创 2020-02-27 17:06:59 · 165 阅读 · 0 评论 -
vue学习笔记day03 指令v-bind v-on
一 vue 指令 指令 (Directives) 是带有 v- 前缀的特殊 attribute 系统自带的指令：<div v-XXX><div> v-if v-else v-bind:href <!-- 完整语法 --> <a v-bind:hre...原创 2020-02-27 16:31:11 · 274 阅读 · 0 评论 -
vue学习笔记 day02 模板语法插值
一 使用1.实例化 new Vue()new Vue({ el:"选择器 规定vue的作用范围", data:{ 数据1, 数据2 }})模板语法2.插值 文本 ：在节点中加入{{数据名称}} v-once 指令， 执行一次性地插值，当数据改变时，插值处的内容不会更新 ...原创 2020-02-27 15:41:59 · 149 阅读 · 0 评论 -
vue 学习笔记-day01
一.vue.js概述cn.vuejs.orgVue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。二.vue获取安装 ...原创 2020-02-27 15:01:27 · 334 阅读 · 0 评论 -
npm安装详细教程
一、使用之前，我们先来掌握3个东西是用来干什么的。npm: Nodejs下的包管理器。webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）开始：...转载 2018-11-15 10:52:31 · 414 阅读 · 0 评论 -
vue-element-admin 代码详解 待更新中... ....
目录结构├── build // 构建相关 ├── config // 配置相关├── src // 源代码│ ├── api // 所有请求│ ├── assets // 主题...转载 2018-11-23 17:49:52 · 2814 阅读 · 0 评论 -
Vuex 组件中的属性对象及项目搭建
Vuex:1.什么是vuex 是专门为vue.js开发的状态管理模式，他集中存储了所有组件的状态（包括：数据/事件...)2.他的应用场景：中大型项目中使用组件式开发 单页面应用首页/购物车/中餐/我的---》张三（本地存储） /当前位置（公用的）3.使用搭建项目> vue init webpack-simple Demo> cd demo> npm in...原创 2018-11-21 15:36:18 · 286 阅读 · 0 评论 -
Vue 脚手架 路由3
vue-loader1>什么是Vue-loader? 其实是webpack的loader （webpack 模块打包工具）2>Vue项目是基于webpack来搭建的3创建Vue脚手架 npm install vue-clie -g vue init webpack-simple [项目名称] 进入到项目目录 cd demo 安装项目依赖 npm install 运行...原创 2018-11-20 15:20:27 · 719 阅读 · 0 评论 -
Vue 组件及组件传值2
vue组件什么是组件：(Component)组件是vue.js最强大的功能之一，组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素形式，以is特性扩展1.扩展HTML元素2.重用性3.可以实现特殊的功能1》全局组件（父组件）2》局部组件（子组件）全局组件：Vue.com...原创 2018-11-20 15:19:13 · 148 阅读 · 0 评论 -
Vue 基本语法1
使用1.实例化（new Vue）new Vue({ el:选择器 //规定vue的作用范围 data{ k1:数据1， k2:数据2， }})2.插值文本插值：1》在节点中插值{{key1}} v-once #这个数据是一次性的2》v-text#插入文本html插值：1》v-html#插入html{}花括号问题：在节点之间<h1></h...原创 2018-11-20 15:18:19 · 140 阅读 · 0 评论