vue
关注
分享
扫一扫
灵灵7
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
【踩坑】[email protected] requires a peer of [email protected] but none was installed
来源：https://blog.csdn.net/qq_37591637/article/details/89960914错误描述在用npm命令安装Element的时候（命令如下所示）npm i element-ui -S报了一个警告解决方案缺什么安装什么npm installvue@^2.5.16成功以后，再次输入cnpm i element-ui...转载 2019-05-09 23:26:59 · 18780 阅读 · 0 评论 -
bug例子：计算属性没有setter.Computed property "xxxx" was assigned to but it has no setter.
bug 提示：计算属性没有设置 setter 原因：计算属性中没有设置 setter 有bug 代码new Vue({ el: '#demo', data:{ docState:"saved" }, computed: { buttonMessage:{ get:function (){ switch (this.docState) ...原创 2018-12-06 21:32:35 · 14757 阅读 · 3 评论 -
进入/离开 & 列表过渡 transition 和 animation （上）：使用过渡和动画的3种方式
Vue 在插入、更新或者移除 DOM (就是添加、移除元素节点) 时，提供多种不同方式的应用过渡效果。包括以下工具：在 CSS 过渡 和动画中自动应用 class (在 <style> 中定义 css 效果) 在过渡钩子函数中使用 JavaScript 直接操作 DOM （methods 里面直接定义函数，并在<transition> 组件中用v-on 绑定 过渡状...原创 2018-11-24 21:51:57 · 5027 阅读 · 0 评论 -
组件 name 特性：作用一：递归组件（在组件中调用自身）--创建树形目录
详见例：https://www.cnblogs.com/gsgs/p/6687030.html// 用prop 传递数据：组件使用父组件（根元素） 传 data 数据 msg 给子组件接收(：msg）<body> <div id="div"> <!--用prop 传递实例数据给子组件--> <ggg :msg='msg'><...原创 2018-11-02 10:27:33 · 2230 阅读 · 0 评论 -
组件之间循环引用
以下用全局注册方式展示一下组件的循环引用例子。注意：例子中的 "父组件" 和 "子组件" 是为了便于区分两个组件，其实这两个组件互为 祖先和后代的关系，因为他们互相循环引用，不是简单的 父子关系<div id="div"> <!--用prop 获取实例data数据--> <father-comp :children="folde.原创 2018-11-03 16:06:00 · 2408 阅读 · 0 评论 -
（全局注册）如何使用父组件和子组件
1. 用Vue.component 全局注册两个组件，一个<father>, 一个<child>2. 在父组件模板中，可以嵌入子组件 <child>3. 如何传值：通过 prop 传值。父组件和子组件都注册 prop a. 父组件在 外部（html 层面，div 根元素内），通过prop 获取 根实例的 data 数据 b. 子组件...原创 2018-11-03 15:17:48 · 738 阅读 · 0 评论 -
vue 递归组件--树形
https://www.cnblogs.com/gsgs/p/6687030.html原创 2018-11-01 17:46:38 · 846 阅读 · 0 评论 -
vue $on 和 $emit 一起使用：监听自定义事件--》触发自定义事件--》触发监听结果
$on 和 $emit 一起使用$on：监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。$emit：触发当前实例上的事件。附加参数都会传给监听器回调。例子解析：1. $on 监听自定义事件要在事件执行前被监听。所以例子中在生命周期 beforeCreate 就开始了监听自定义事件 "start"。2. 在method...原创 2018-10-30 23:33:55 · 15962 阅读 · 3 评论 -
keep-alive 内置组件元素：保留组件状态或避免重新渲染
原创 2018-10-24 22:14:42 · 1174 阅读 · 0 评论 -
vue 依赖注入：provide、inject 祖先组件和后代组件的数据传输
用法：允许一个祖先组件向其所有子孙后代注入一个依赖 。也就是说，祖先组件可以用 provide 给后代组件提供一些数据；后代组件可以使用 inject 接受祖先组件提供的数据 provide：inject：...原创 2018-10-29 21:55:34 · 2354 阅读 · 0 评论 -
slot-scope：作用域插槽特性：子组件传递数据给父组件
1. 插槽的作用：如果没有在组件模板中放置插槽<slot>，则在html 代码中组件自定义元素之间的内容将不显示;如果在组件模板中设置插槽<slot>，则相当于，在组件中提前预留了位置，给在html 代码中组件自定义元素之间的内容放置。即使vue 组件被封装好了不再改动，也可以在html 层面上，在自定义元素之间增加内容或者设置样式等操作。详见：插槽的作用...原创 2018-10-23 22:16:04 · 6638 阅读 · 0 评论 -
<component>内置组件 + v-bind: is：实现动态组件
<component> 元素是vue 里面的一个内置组件。在<component>里面使用 v-bind: is，可以实现动态组件的效果。例子解析：下面例子创建一个包含多个子组件的 vue 实例。1. vue代码部分：新建 vue 实例 "app"，这个实例的 components 里面，有3个组件，这些组件都有各自的模板。分别是 acomp...原创 2018-10-25 22:12:16 · 29286 阅读 · 4 评论 -
访问元素和组件：$root 访问根实例、$parent 父组件、ref 子组件
这里介绍的方法可以访问（获取、修改）到根实例、父组件、子组件里面的数据。因为使用这些方法，可能造成难以排查到数据在哪里修改，所以慎用这些方法。1. 访问根实例: $root这里创建一个根实例 new Vue({ el:"#app", data: { foo: 1 }, computed: { bar: function () { /* ... */...原创 2018-10-28 23:56:54 · 4342 阅读 · 0 评论 -
在组件上使用 v-for：利用 props 传递数据（父组件传入子组件）
不使用组件的v-for 和 使用组件的 v-for 区别：1. 可重复使用性：组件是可以重复使用模板； 2. 触发事件的方法：组件模板元素触发事件需要用 $emit，把自定义事件发射到html 层面上，html 再通过绑定自定义事件和实例中的函数将其触发； 而不使用组件时，直接可以在html 元素上通过v-on 绑定原生事件和实例中 （data、methods、comput...原创 2018-10-20 14:11:01 · 10052 阅读 · 0 评论 -
ul、ol、table、select 元素使用"is"特性：约束元素不能直接使用组件
说明： 由于DOM元素模板限制，<ul>、<ol>、<table>、<select> 这些元素内部只能使用<li>、<tr>、<option>元素。如果在<ul>、<ol>、<table>、<select&a原创 2018-10-20 10:03:48 · 401 阅读 · 0 评论 -
<component>加上 "is"：动态组件用法（可以切换多个模板的组件）
在我们平时使用vue中的模板的时候，许多时候都是直接定义成一个固定的模板，但是，vue中提供了一个动态模板，可以在任意模板中切换，就是用vue中<component>用:is来挂载不同的组件。<div id="app" v-cloak> <component :is="currentView"></component>...转载 2018-10-19 23:52:22 · 13427 阅读 · 0 评论 -
进入/离开 & 过渡 transition 和 animation（ 下）：列表过渡&动态过渡
一、列表过渡重点：1. 使用元素 <transition-group>2. 过渡模式不可用 （mode="in-out/out-in"）3. 需要有 key 属性值4. 可用于 v-for 渲染的列表5. 可用 v-move 特性 改变元素定位<style>.list-item { display: inline-block; ...原创 2019-01-02 17:49:44 · 1473 阅读 · 0 评论 -
vue $ 符号（例如vm.$data vs vm.data）：读取实例属性 vs 读取 data 数据
vm.$ 读取实例中属性列表（第一层）vm.data 直接读取实例 data 数据属性中的数据值（第二层）。等价于 vm.$data.data<script>var ok=new Vue({ data:{ a:"aa", b:"bb", c:"cc", data:"ddd", options:"op", myOption:"opp"}原创 2019-01-17 18:21:56 · 12861 阅读 · 0 评论 -
npm 安装 elementUI 踩坑- 报错npm ERR! cb() never called!
来源：https://blog.csdn.net/qq_38822390/article/details/82188365在vue项目中引入饿了么elementUI组件的步骤之中，出现以下的错误：D:\my-project-first>npm i element-ui -SUnhandled rejection RangeError: Maximum call stack siz...转载 2019-05-09 23:21:59 · 3828 阅读 · 0 评论 -
npm run bulid 打包 vue 项目并在 tomcat 服务器运行
vue-cli 的 npm run bulid 指令打包 vue 项目。（详细分析：Vue -- vue-cli(vue脚手架) npm run build打包优化：http://www.cnblogs.com/donghuang/p/10042812.html）前提条件：node.js、webpack 以及 vue-cli 和 vue都已经安装好。我使用的是 npm 方法安装的 vu...原创 2019-05-04 00:21:50 · 3466 阅读 · 0 评论 -
vue 面试题总结
一、对于MVVM的理解？M。VVM 指的是 Model-View -Viewmodel 的简写。view 指的是 展示层，也就是网页model 指的是 数据模型，也就是网页显示的需要的数据viewmodel 是连接 view 和 model 同步的对象。用来实现 view 和 model 同步更新，实现双线数据绑定。因此开发者只需要关注业务逻辑，不用关注数据状态的同步实现问题。复杂...原创 2019-04-15 11:38:07 · 245 阅读 · 0 评论 -
Vue事件修饰符的使用
在Vue中，事件修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理。在Vue中事件修饰符主要有：.stop: 等同于JavaScript中的 event.stopPropagation( )，防止事件冒泡 .capture:与事件冒泡的方向相反，事件捕获由外到内 .prevent:等同于JavaScr...原创 2019-04-13 16:55:07 · 352 阅读 · 0 评论 -
vue 组件：全局注册和局部注册
全局组件: 如果想组件在任何地方都能应用，我们就需要注册全局组件局部组件: 局部组件要挂载到实例元素（在实例中定义组件）上，否则没有效果全局注册方式://注册Vue.component('component-a',{ template:'<div>我是全局注册的组件aaa</div>'})new Vue({ el: '#app' })//全局使用。...原创 2019-04-13 10:59:41 · 4271 阅读 · 3 评论 -
vue项目 引入图片 404 not found 报错
问题：在vue 项目中，引入的图片无法在网页显示控制台报错：图片地址 404 not found解决方案：把图片放在 static 文件夹，不要放在 assets 文件夹index.html 代码：<img src="./src/assets/img/logo.png" >解决方案：1. 把图片放在 static 文件夹，不要放在 assets ...原创 2019-04-12 18:24:11 · 6969 阅读 · 1 评论 -
vue 项目文件结构
用 webpack npm 的方式安装vue项目后，初始文件夹如下目录/文件 说明 build 这个是我们最终发布的时候会把代码发布在这里，在开发阶段，我们基本不用管。 config 配置目录，默认配置没有问题，所以我们也不用管 node_modules 这个目录是存放我们项目开发依赖的一些模块，这里面有很多很多内容，不过高兴的是，我们也不用管 s...原创 2019-04-11 20:25:42 · 1670 阅读 · 1 评论 -
vue 项目报错提示 Uncaught ReferenceError: Vue is not defined
报错提示：Uncaught ReferenceError: Vue is not defined解决方案：把vue 项目中vue 文件引入的<script> 标签放到文件头部。错误放置：正确放置：把<script>移到头部 <head>标签中，使vue文件在项目运行后第一个加载...原创 2019-04-11 16:53:04 · 68941 阅读 · 8 评论 -
vue 如何在项目中使用父子组件（webpack模块系统）
用 npm 方法安装 vue 初始项目用法：在父组件中嵌套子组件，并在项目中使用父组件子组件 App.vue<template> <div id="app"> <img src="./assets/logo.png"><p ><h3 style="color:aqua">我是APP.VUE组件（子组件)<...原创 2019-04-06 13:20:48 · 826 阅读 · 0 评论 -
vue 根实例 template 和 组件 template
1. 根实例 template 和 组件 template 是一样的，都只能有一个根元素（根元素指的是包含在最外层的元素）；new Vue({ el: '#app', store, components: {App, zujian}, //注册这两个组件 template: '<zujian></zujian>'})2. 优先级：根实例 temp...原创 2019-04-05 23:38:40 · 2699 阅读 · 1 评论 -
vue 实例与组件的关系
创建Vue实例var vm = new Vue({ // 选项})官方：一个 Vue 应用由一个通过new Vue创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。创建组件// 定义一个名为 button-counter 的新组件Vue.component('button-counter', { data: function () { r...原创 2019-04-05 22:12:24 · 2950 阅读 · 0 评论 -
npm install报错Unhandled rejection RangeError: Maximum call stack size exceededill install
故障在使用npm install下载依赖的时候报错Unhandled rejection RangeError: Maximum call stack size exceededill install loadIdealTree原因新版本nodejs与npm最新版本出现不兼容处理方式给npm降级npm install -g [email protected]重新执行npm install未见报...转载 2019-04-04 10:46:22 · 1024 阅读 · 0 评论 -
配置 vue 环境，运行vue 项目
https://segmentfault.com/a/1190000009871504原创 2019-01-28 23:32:03 · 160 阅读 · 0 评论 -
【链接】vue-router 基本使用 vue 路由
https://www.cnblogs.com/SamWeb/p/6610733.html转载 2019-01-28 23:31:17 · 175 阅读 · 0 评论 -
import Vue from 'vue';
ES6神奇的import...from...命令: https://www.jianshu.com/p/c0be35475e54import Vue from 'vue';import App from './App';import router from './route';import axios from 'axios';import './less/index'; ...转载 2019-01-25 19:44:23 · 692 阅读 · 0 评论 -
$emit( ) 触发组件（自定义元素）当前实例的事件
$emit(event, args )参数：event：事件名args：事件相关参数用法：触发当前实例上的事件。附加参数都会传给监听器回调。在组件模板中，不能直接通过 v-on 绑定触发 vue 实例中的方法，而需要先使用$emit( ) 绑定自定义事件，把自定义事件发射出去（发射到html 层面）；然后在html 层面，组件自定义元素上，绑定自定义事件和vue ...原创 2018-10-10 19:59:51 · 5445 阅读 · 0 评论 -
单/双引号多次嵌套问题的两种解决方案：转义和es6模板字符串
JS中：双引号内不能包含双引号，单引号内不能出现单引号。如果遇到多次嵌套时，有以下两个解决方案：1.使用转义符号“\”转义template:'<div @click="school=\'home\'">组件一 {{school}}</div>',2.使用es6模板字符串“``”template: ` <div @click="school='hom...转载 2018-10-10 19:11:38 · 2822 阅读 · 0 评论 -
vue props (组件自定义特性) 介绍 【草稿】
定义：Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。1. 用 prop 向子组件传递数据 <div id="div" ><food></food></div><script>Vue.component('food', { ...原创 2018-10-04 19:55:28 · 836 阅读 · 0 评论 -
安装 vue.js 教程
https://blog.csdn.net/m0_37479246/article/details/78836686转载 2018-09-17 10:11:00 · 154 阅读 · 0 评论 -
引入vue.js 文件
一、引入vue.js 文件 1. 用脚本标签<script> 引入外部vue.js 文件<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>2. 下面在一个新的 <script><script>标签里写vue 的代码<script..原创 2018-09-20 17:36:24 · 11563 阅读 · 1 评论 -
v-bind:title 绑定元素的title与实例属性一致
一、title 定义 ：规定元素的额外信息二、网页效果三、v-bind:title 定义1. 将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致<html>部分<div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提...原创 2018-09-20 22:56:58 · 18167 阅读 · 0 评论 -
v-if v-else v-else if 条件指令/ v-if 与 v-show 区别
用法一、布尔值ture/false 显示/隐藏元素1. true 显示元素：v-if的值和seen 属性值一致，为 true。<p>元素显示<div id="app-3"> <p v-if="seen">现在你看到我了</p></div><script>var app3 =原创 2018-09-21 18:10:59 · 9426 阅读 · 0 评论