前言：vue组件化的应用涉及到vue-cli的内容，所以在应用之前是需要安装node和vue-cli的，具体如何安装我就不一一赘述了。可能一会儿我心情好的时候，可以去整理一下。1、应用的内容：在一个页面中，需要一个固定的内容，这个内容可以多次引用，那么就可以考虑把他分离出来，在下次需要的时候，实现引用就好。比如：<input type="text" v-model="content" > <button @click = addList>添加</button> <ul><li v-for="( item ) of tod...
使用方法：1.在父组件中引入"box.vue" //import popUpBox from "./box.vue"; 2.在父组件中注册 popUpBox //components:{popUpBox}, 3.放在父组件中使用 //<popUpBox></popUpBox> 4.调用popUpBox组件 //this.geAlert(0) 注：index.vue为 父组件，后者为子组件，效果图先上，可以先看是否是自己想要的组件，再选择使用index.vue<template><div><popUpBox ref="modal" @on-confirm="confirm"><div slot="modal__bd"><div class="m...
组件复用 当前组件被复用（没有被销毁或者创建）的时候，路径会发生改变，但是，值不会发生改变因为：created(){}接收值，但是created只创建一次，在create中接收路径传来的值，所以接收到的值不会发生改变解决方法：监听路由的变化 $route()使用场景：当 一个组件被复用的时候，虽然路由发生变化，但页面上的数据不会发生变化 比如： 从列表页list点击商品，进入商品详情页details查看商品的详细信息,当点击商品时，跳...
我们知道组件是单项的，但是有时候需要双向，这时候我们可以使用.sync修饰符，但今天遇到一个坑，一直不成功，花了半小时试出来的。。。。 在编程的时候我们很习惯冒号后面跟着空格。而.sync双向绑定需要子组件显性触发 this.$emit(‘update:foo‘, newValue)这里的updata:foo可以说是一个名字，不能加空格，不能加空格，不能加空格！！！这就是坑，由于编程习惯，也许会有人加空格，我也是，所以写出来当作一个笔记。 根据文档...
建立playlist.vue 组件，在player.vue 组件中引用，点击迷你播放器的播放列表按钮由下至上弹出这个层，所以在player.vue 播放器组件中引用在playlist.vue 组件中首先设置对外的方法可以控制该组件的显示隐藏，通过mapGetters 获取歌单数据播放列表功能操作： 当前播放歌曲显示正确的icon 点击当前歌曲播放该歌曲，对应相应的icon ，列表滚动到最上面 删除当前单条播放歌曲，（判断当前歌曲是否为正在播放的歌曲，重置数组...
想要让 Echarts组件 实现动态的刷新 ， 首先把数据处理一下，因为杂乱无章的数据来实现动态刷新，对我来说并没有什么作用 这是图表最开始的样子，因为我用的是 固定的数据，所以可能显得比较整齐，并且是 从大到小 排序的接下来，我们让图表实现 从大到小 排序并且 每5条数据 一页排序： //对数组进行排序 通过回调函数来决定是 从大到小 还是 从小到大this.allDate.sort((a, b) => {return b.value - a.value; //从大到小 (从...
组件使用细节点解决元素标签位置错误的问题：is 属性<div id="app"><table><tbody><!--tbody里要用一个组件,但不能直接写组件名 会导致位置错误问题，使用 is 属性将自定义组件row 与 tr 标签绑定在一起 --><tr is=‘row‘></tr><tr is=‘row‘></tr><tr is=‘row‘></tr></tbody></table><ul><li is=‘row‘></li><li is=‘row‘></li><li is=‘row‘></li></ul></div><script>Vue.comp...
分为三个部分:1.template模版：123456<script type="text/x-template" > <form v-on:submit.prevent="addtodo(newtodo)"> <input type="text" v-model="newtodo.title"> <button type="submit">提交</button> </form></script>2.vue.js的js操作:12345678910111213141516Vue.component(‘todo-form‘,{ template:‘#todo-form-template‘, props:[‘todos‘], data(){ return { new...
一、 keep-alive包裹的组件，在actived的钩子函数总进行调用。 二、在使用Vue-router做项目时，会遇到如/serviceId/:id这样只改变id号的场景。由于router-view是复用的，单纯的改变id号并不会刷新router-view。 当然，我们可以在点击事件上加上router.go(0)，强制刷新整个页面来满足效果，但页面整体的刷新会使体验下降。解决方案有以下几种：1、使用watch方法：当id发生变化时，‘$route‘也会相应地发生变化，因此可以通过wat...
正常我们给组件注册事件是先在子组件的里面监听事件，然后通过$emit向外层触发给父组件，然后再在父组件中接收事件，这样做有点啰嗦，vue提供了 .native修饰符，我们可以直接在父组件通过 .native修饰符来给子组件注册事件，如下： 原文：https://www.cnblogs.com/lyt0207/p/12103791.html
1，安装插件npm install vue-cropperyarn add vue-cropper2，引入 使用 注意： 需要关掉本地的mock服务， 不然图片转化会报错组件内使用 import { VueCropper } from ‘vue-cropper‘ components: { VueCropper, },main.js里面使用 import VueCropper from ‘vue-cropper‘ Vue.use(VueCropper) cdn方式使用 <script src="vuecropper.js"></script> Vue.use(window[‘vue-cropper‘]) nuxt 使用方式 if(process.browser) { vueC...
1.组件是什么 组件系统是 Vue 的一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。通常一个应用会以一棵嵌套的组件树的形式来组织；1.1组件的声明及使用 全局组件<body><div id="app"><!-- 用全局组件的名称作为HTML的标签 --><myzujian></myzujian></div></body> <script>//设置全局组件Vue.component("myzujian",{template:"<h2>我是全局组件</h2>"});var app=new Vue({el:"#app"...
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"> <link ...
HTML <el-tree:data="data":props="defaultProps"@node-click="handleNodeClick":render-content="renderContent":highlight-current="true"></el-tree> data把带status为1的颜色变为红色，其余的变为绿色 data: [{label: "一级 1",children: [{label: "二级 1-1",children: [{label: "三级 1-1-1",},],},],},{label: "一级 2",children: [{label: "二级 2-1",children: [{label: "三级 2-1-1",},],},{label: "二级 2-2",childre...
1, 介绍vue最强大的功能, 可以扩展html元素, 封装可充用的代码在较高的层面, 组件是自定义元素, vue的编译器为他添加特殊功能, 在有些情况下, 组件也可以表现为用 ls 特性进行扩展了html元素所有的vue组件同时也都是vue的实例, 所以可接受相同的选项对象(除了一些根级特有的选项) 并提供相同的生命周期的钩子2, 单文件组件1), template2), script3), style3部分组成3, 子父级组件1), 使用<template><div><p > 这儿是 子组件 </p></...