![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
友人C君~
这个作者很懒,什么都没留下…
展开
-
Vue事件委托优化
虽然Vue不提倡也很少需要手动生成DOM,但是有时难免需要手动生成新的标签,此时,手动生成的新标签也像原生JS操作DOM一样,不会绑定事件,如以下例子:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Vue事件委托</title>...原创 2020-02-16 12:37:56 · 815 阅读 · 0 评论 -
Vue UI插件集合(转载)
element:VUE2的web UI工具 mint-ui:VUE 2中的移动UI iview:VUEjs 的开源 UI 库 muse-ui:响应式 UI 库 VUECircleMenu:VUE圆环菜单 VUE-chat:聊天示例 VUE-waterfall:瀑布组件 Keen-UI:基本UI组件 Vux:基于VUE和WeUI的组件库 VUE-carbon:MD风格的移动端 V...转载 2020-02-15 12:53:55 · 726 阅读 · 0 评论 -
关于Vue中数组更新问题
v-for指令把数组和一组<li>元素绑定了。在<li>元素内部,用循环变量t引用某个属性,例如,{{ t.name }}。这样,我们只关心如何更新Model,不关心如何增删DOM节点,大大简化了整个页面的逻辑。我们可以在浏览器console中用window.vm.todos[0].name='计划有变'查看View的变化,或者通过window.vm.todos.pus...转载 2019-02-01 13:05:11 · 446 阅读 · 0 评论 -
vue为一个元素绑定多个点击事件
<button id="button2" v-on:click="clickButton1();clickButton2()" v-on:click="">按钮2</button> <script> var vm=new Vue({ el:"#button2", methods:{ clickButton原创 2019-01-29 11:56:20 · 14103 阅读 · 0 评论 -
Vue_简单购物车的实现
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Vue_demo2</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&原创 2019-01-15 23:46:03 · 207 阅读 · 0 评论 -
Vue_输入框过滤数据
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Vue框架学习_输入框过滤后台数据</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.j原创 2019-01-12 17:57:31 · 1940 阅读 · 0 评论 -
Vue_条件渲染
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Vue框架学习_条件渲染</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quo原创 2019-01-12 14:17:28 · 123 阅读 · 0 评论 -
Vue学习代码
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Vue框架学习</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&am原创 2019-01-11 23:26:58 · 192 阅读 · 0 评论 -
Vue框架_class和style的绑定
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Vue框架学习</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&am原创 2019-01-12 11:58:42 · 151 阅读 · 0 评论 -
Vue中的路由传参的常用方式
在父组件中的router-link中的name值对应 index.js 路由文件中的路由匹配规则中的name值,(name值对应关系起主导作用,如果在router-link中还写有path会被忽略),此时能够完成最基本的路由跳转。params对应post方式的传参,所以如果需要通过路由传递参数,只需要在router-link中添加params属性,将需要传递的参数填入,并且在路由规则中...原创 2019-10-09 16:14:04 · 334 阅读 · 0 评论 -
Vue 使用 axios 访问 API
首先 使用 命令 npm i axios 安装 axios 然后在项目中 使用 import axios from 'axios' 引入 axiso 然后使用 axios 的函数来发起请求,获取数据,默认是get 请求。 axios.get('https://mockapi.eolinker.com/4VLgjtce15e8728b855c5b280bf96334eca5...原创 2019-09-27 15:58:47 · 423 阅读 · 0 评论 -
vue之父子组件间通信实例讲解(props、$ref 、 $emit )(转载)
组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。那么组件间如何通信,也就成为了vue中重点知识了。这篇文章将会通过props、$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信。在说如何实现通信之前,我们先来建两个组件father.vue和child.vue作为示例的基础。//父组件<temp...转载 2019-09-21 22:40:42 · 318 阅读 · 0 评论 -
Vue 路由守卫(路由钩子函数)
1、全局路由钩子函数 beforeEach beforeResolve afterEach,注意,使用vue-cli搭建的index路由文件里直接将router路由对象暴露出去,应当使用变量接收此路由对象,然后使用该变量来调用全局的路由钩子函数,最后把该变量暴露出去2、单个路由独享的守卫 beforeEnter3、组件内的路由守卫beforeRo...原创 2019-09-20 19:52:05 · 1823 阅读 · 0 评论 -
Vue 路由详解
Vue 路由详解Vue 路由API原创 2019-09-19 19:25:26 · 176 阅读 · 0 评论 -
详解vue 路由跳转四种方式(转载)
1、router-link1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始。 2.带参数 &...转载 2019-09-19 17:06:44 · 1082 阅读 · 0 评论 -
Vue组件的基础使用
外部导入Vue文件里的组件以App.vue文件为入口,修改如下<template> <div id="app"> <img src="./assets/logo.png"> <firstcomponent></firstcomponent><!--使用新导入的标签--> </d...原创 2019-06-06 11:21:36 · 150 阅读 · 0 评论 -
Vue半场动画(添加到购物车)
Vue默认动画样式 引用第三方库 transition-group实现v-for列表渲染 实例效果:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script ...原创 2019-06-19 10:18:23 · 653 阅读 · 0 评论 -
Vue组件基础
全局组件 Vue.component('myComponent',{//组件名使用驼峰命名,在使用组件时需将大写字母转成"-"+小写字母的形式 data:function(){ return {//return一个对象,确保全局组件的每个实例有自己的数据 value1:"", value2:"" ...原创 2019-06-19 11:19:58 · 154 阅读 · 0 评论 -
npm安装淘宝的cnpm并安装使用vue-cli
Vue.js是前端一个比较火的MVVM框架,要使用它,我们必须提前配置,其中有一种安装方式是使用npm,比较适合比较大型的应用。今天就来看看这种方式如何操作,由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像来安装vue.安装流程首先我们需要下载npm,因为我已经提前安装了node.js,安装包里面集成了npm,然后我们就可以利用npm命令从获取淘宝镜像的cnpm了。使...原创 2019-06-03 19:36:43 · 6621 阅读 · 2 评论 -
Vue组件传值
父组件向子组件传递数据(props) <body> <div id="app"> /*在标签内使用父组件的数据*/ <my-component :parrentmessage="message"></my-component> </div> <script> var vm = n...原创 2019-06-20 17:24:24 · 157 阅读 · 0 评论 -
Vue路由的基本使用
引入vue-router的js文件(先引入vue.js文件)<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.common.js">&...原创 2019-06-21 10:53:53 · 226 阅读 · 0 评论 -
Vue路由嵌套
定义父路由组件和子路由组件(注意,父组件中的子组件的to属性要包括父路由地址“main”) <template id="main"> <div> <h3>主页面</h3> <router-link to="/main/login" tag="button">登录</router-link&g...原创 2019-06-21 13:41:39 · 318 阅读 · 2 评论 -
Vue路由命名视图及路由组件切换
本来一个页面里面只能有一个路由视图 对应 一个组件,现在可以多个路由视图(router-view) 对应 多个组件。载入子页面在routes中使用components属性,将组件名称及其组件对象包裹,由此可在页面中的router-view标签中添加name属性来对应路由组件,未定义name属性则默认填入default组件 在routes中使用children属性,并传入路由组件对象...原创 2019-06-21 16:44:53 · 1651 阅读 · 0 评论 -
HBuilder中使用命令行工具(npm导入文件包)(转载)
点击顶部菜单中的“运行” 在弹出的快捷菜单中点击“外部工具” 点击外部工具 配置项 在打开的“外部工具 配置项”界面中点击左侧的新建图标按钮,如图 在右侧输入名称,要执行的命令或文件下的文本框中输入“C:\windows\system32\cmd.exe” 工作目录中输入${project_loc},然后点击应用...转载 2019-06-22 10:18:05 · 12887 阅读 · 0 评论 -
Vue生命周期
生命周期钩子=生命周期函数=生命周期事件(创建、运行、销毁)创建期间四个钩子函数(beforeCreate,created,beforeMount,mounted)刚开始初始化一个Vue空的实例对象,此时该对象身上只有默认的一些生命周期函数和默认事件,其余未创建。在beforeCreate生命周期函数执行的时候,data和methods中的数据都还没有初始化。Vue开始编辑模板...原创 2019-06-18 10:06:33 · 144 阅读 · 0 评论 -
Vue自定义指令
在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.f...原创 2019-06-18 16:13:31 · 295 阅读 · 0 评论 -
webpack——导入vue组件
首先创建一个.vue后缀结尾的vue文件然后在main.js中导入vue组件文件,然后在vue实例中注册该组件报错,需要安装解析vue文件的第三方loader加载器使用命令cnpm install --global vue-cli cnpm install vue cnpm install vue-loader vue-template-compiler loade...原创 2019-06-24 11:49:19 · 632 阅读 · 3 评论 -
webpack——使用vue-router
首先使用命令cnpm i vue-router -S 导入vue-router包可以引入组件的vue文件创建vue-router对象匹配路由规则便可正常使用路由、路由嵌套以及路由命名了。页面效果END...原创 2019-06-24 19:42:24 · 216 阅读 · 0 评论 -
Vue中的技术详解
原文地址:https://blog.csdn.net/liang377122210/article/details/71545459(以下为部分内容)Vue.js新手入门指南最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己的结业项目...转载 2019-01-12 11:48:04 · 2957 阅读 · 0 评论