这篇博客主要介绍树形控件的两个小小的功能：下拉菜单输入过滤框以CSS样式为主，也会涉及到Vue组件和element组件的使用。对于没有层级的数据，我们可以使用表格或卡片来展示。要展示或建立层级关系，就一定会用到树形组件了。 使用Vue + Element UI，构建出最基本的树如下图所示： 现在我们就要在这个基础上进行改造，使页面更加符合我们的交互场景。一、下拉菜单将下拉菜单嵌到树节点中，使操作更加简便、紧凑。效果演示效果如图：...
插件使用通过导出一个含有install方法的对象，即可作为插件使用，install方法始终接收一个app对象--createVue的返回值，所以app即是全局vue实例。配置全局属性// properties.js export default {install(app) {app.config.globalProperties.$test = {a: "aa",};}, }; // main.js import properties from "@/plugins/properties.js"; app.use(properties) 配置全局组件// components/index.js import HelloWorld from "./HelloWorld...
先使用vue cli构建一个自己的vue项目1.npm i -g vue-cli2.vue init webpack sell (sell是你的项目名)3.一路回车（在这个过程中会提示你是否安装一些依赖包，比如vue-router，es6语法检查等等，这些根据你个人习惯或者癖好选择Y/N）4.npm i (这个是安装项目的依赖包)5.npm run dev（启动你的vue项目） 这个时候如果在页面上看到了vue的logo说明你的vue的项目基础构建已经完成，然后你可以删除掉没有用的组件6.webpack sell默认没有安...
this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。 假设我们更改了某个dom元素内部的文本，而这时候我们想直接打印出这个被改变后的文本是需要dom更新之后才会实现的，也就好比我们将打印输出的代码放在setTimeout(fn, 0)中； 先来第一个例子看一看<template><section><div ref="hello"><h1...
1.获取token值后台有接口调用直接返回token值//请求后台拿七牛云tokenasync getQiniuToken() { //tokenlet uploadtoken = await this.Fetch("/osg/resource/uploadtoken/image", {method: "get",});console.log(uploadtoken);//赋值保存在本地this.QiniuData.token= uploadtoken.data.token }, 2.贴上页面代码<template><div class="upload-info"><div><el-uploadclass="upload-pic":action="domain":data="QiniuData":on-rem...
<!DOCTYPE html><html><head><meta charset="utf-8"/><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="root"><!-- 监听原生事件 --><child @click.native="ZGZ"></child></div><script>Vue.component(‘child‘,{template:‘<div >Child<div/>‘,})var vm=new Vue({el:"#root",methods:{ZGZ:function(){alert("666")}}})</script></body></html> 原文：https://ww...
需求： 产品经理在列表页（几千个数据，n个page）点击某一项进去到详情页后，再返回到列表页发现页面回到了第一页，找不到之前的查看的是哪一条了，为了方便咋公司产品经理，返回列表页时需要记住之前的page页解决思路： 在列表页点击某一条进入详情页的时候，触发当前页面的keep-alive缓存页面解决步骤：1. 设置路由 需要缓存的路由设置 keepAlive : true, 不需要缓存的路由设置 keepAlive: false router index.js[{path...
new Vue 发生了什么 new vue 我们从入口分析，我们new 一个实例化对象，是由Funcction实现的，来看一下源码，在src/core/instance/index.js 中。 import { initMixin } from‘./init‘import { stateMixin } from‘./state‘import { renderMixin } from‘./render‘import { eventsMixin } from‘./events‘import { lifecycleMixin } from‘./lifecycle‘import { warn } from‘../util/index‘functionVue (options) {if (proc...
<!DOCTYPE HTML><html><head><title>vue.js 处理用户输入</title><script src="../vue.js"></script></head><body><div id="app"><input v-model="newTodo" v-on:keyup.enter="addTodo"/><ul><li v-for="todo in todos"><span>{{todo.text}}</span><button v-on:click="removeTodo($index)">X</button></li></ul></div><script>new Vue({el:"#app",data:{newTodo:"",todos:[{text:‘add some todos‘}]},methods:{addTodo:functio...
需要在本页面中展示vue组件中的超链接，地址栏不改变的方法:<template><div class="accept-container"><div class="go-back" v-show="goBackState" @click="goBack">GoBack</div> <ul><li v-for="item in webAddress"><a :href="item.link" target="showHere" @click="showIframe">{{item.name}}</a></li> </ul> <iframe v-show="iframeState" id="show-iframe" frameborder=0 name="showHere" scrolling=auto src=""></iframe></...
bulid webpack配置相关 config webpack配置相关node_modules nmp install 安装的依赖代码库 src 存放项目源码static 第三方静态文件.babelrc es6编译es5 编译转换 配置.editorconfig 编译器的配置.eslintignore 忽略语法检查的目录文件.eslintrc.js eslintrc的配置文件 debug在开发环境true 上线时要 flaseindex 入口文件package.json 项目配置文件原文：http://www.cnblogs.com/xyc211/p/7...
render函数使用 1.介绍：我们可以使用javascript动态的插件元素模板，不使用template使用js来创建// child.vue <script> export default {props: {myData: Array },// render函数：第一个参数是html标签，或者是一个对象，或者是一个函数，第二个参数是元素的相关配置。render: function (h) {return h(‘h1‘, {// class属性‘class‘: {foo: true,bar: false},// 组件的props props: {myData: Array},// style属性 sty...
在 webpack.config.js 中加入这个依赖{test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,loader: ‘file-loader‘ } 原文：https://www.cnblogs.com/carriezhao/p/11791204.html
//list例子:绑定从localStorage中读取的数据，动态添加list并监听将数据变化存储在localStorage中，绑定点击事件改变样式，页面 data数据： input_name:‘‘, items:locaStorage_work.fetch(),locaStorage_work为引用的组件js主要方法 监听存数据取数据：样式：.class-b{ text-align:center;}.class-a{ color:red;} 原文：http://www.cnblogs.com/wpsyp/p/6186434.html
技术点:在weakpack配置音频文件:{ test: /\.mp3(\?.*)?$/, loader: ‘url-loader‘, options: { limit: 15000, name: utils.assetsPath(‘media/[name].[hash:7].[ext]‘) }},一定注明音频大小限制(微信崩溃);在static中建个audio文件放音频;技术点二:微信背景音乐自动播放:function audioAutoPlay() { ground.load(); ground.play(); document.addEventListener("WeixinJSBridgeReady", funct...