解决vue单页面多个组件嵌套监听浏览器窗口变化问题_vue.js

来源:脚本之家  责任编辑:小易  

展开全部 这种情况很简单,动态添加进去的tr不能应用js和css,在tr添加进页面后,再调用一下$("tr").addClass("样式名"); 重新给他添加一下样式即可.至于js的话,在绑定事件的时候用:$("tr").live(funtion(){ }) 这样就可以了.因为绑定事件的时候live就www.zgxue.com防采集请勿采集本网。

需求

最近公司有个大屏展示项目(如下图)

store中的值不会因为页面重新渲染而改变。 以上这篇解决vue-cli单页面手机应用input点 希望能给大家一个参考,也希望大家多多支持脚本之家。 您可能感兴趣的文章:vue组件实

页面的元素需要做响应式监听,图表需要跟着窗口响应变化

这篇解决vue多个路由共用一个页面的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。 您可能感兴趣的文章:Vue.js 单页面多路由

问题

每一个图表都被我写成了一个组件,然后就在每一个组件里写了一串代码,监听浏览器变化

问题描述: Vue单页面用按F5强刷,数据就恢复初始了,这怎么破? 解决方案: store.subscribe((mutation, state) => { sessionStorage.setItem('mobileState', JSON.stringify(state));

结果只有父组件的代码生效

在做vue的demo的时候遇到一个问题,多个嵌套的元素如何设置transition? 我的代码: <div id='demo'> <button @click="show = !show">按钮</button> &

mounted(){ window.onresize = () => { //当窗口发生改变时触发 // };}

看来你已经研究到总线通信这一部分了,目前的问题是 var eventBus = new Vue(); 不能被其他组件所使用。 我猜测你可能是使用了官方的cli 生成的 Webpack的单文件组件模式吧

原因

经简单测试后发现,同一个路由页面只能注册一次浏览器窗口监听事件,第二次注册的会覆盖第一次注册

html>head>meta charset="utf-8">title>Vue 测试实例-组件嵌套二种方式</title> <script src="//cdn.bootcss.com/vue/2.1.10/vue.js

下边代码即可测试

?live github地址 体验链接 Vue页面级缓存解决方案feb-alive (上) 在剖析feb-alive实 获取到嵌套的第一个默认插槽的vnode,也就是router-view组件vnode,同时获取到了路由

mounted(){ window.onresize = () => { //当窗口发生改变时触发 console.log(1) }; window.onresize = () => { //当窗口发生改变时触发 (会覆盖上一个函数) console.log(2) };}

Vue父组件向子组件传递事件/调用事件 不是传递数据(props)哦,适用于 Vue 2.0 方法一:子组件监听父组件发送的方法 方法二:父组件调用子组件方法 子组件: export default { m

父子嵌套组件同理,子组件生命周期执行在父组件之前,父组件函数会覆盖子组件函数

在改页面的script里面 import 'swiper.js地址' 要是全部都有用 你可以在index.html中直接引用

解决方案

"babel-core": "^6.14.0", "babel-loader": "^6.2.5", "babel-plugin-component": "^0.4.3", "babel-preset-es

1、只在父页面写个监听,但是通过组件传值的方式传给子组件,并且子组件用watch监听传值的变化,响应改变

您可能感兴趣的文章:基于Vue单文件组件详解vue cli webpack中使用sass的方法vue-cli构建项目使用 less的方法vue-cli + sass 的正确打开方式图文详解vue-cli如何添加less 以及

2、假如是多层组件嵌套,用vuex可能会更省力

"babel-core": "^6.14.0", "babel-loader": "^6.2.5", "babel-plugin-component": "^0.4.3", "babel-preset-e

补充知识:vue/组件嵌套/无限嵌套/嵌套组件消息传递/嵌套父子组件传值

页面问题的解决方法Vue 路由切换时页面内容没有重新加载的解决方法vue通过路由实现页面刷新的方法解决vue 路由变化页面数据不刷新的问题vue router路由嵌套不显示问题

目前接到一个需求,是我之前从来没有实践过的,正好趁此机会做一个深度剖析,并记录下这次的成长,并分享给大家。

1、服务端渲染 服务端渲染对于刚接触 vue 的新手来说,并不是那么友好,虽然已有官方 SSR 中文文档。但是对于一个已经开发完毕的 vue 项目去接 SSR 无论是从工作量还是技

需求文档

一 、(一个厂商编号和一个版本号)唯一决定一个配置

二 、 配置内容支持无限嵌套

三、配置数据格式示例(配置包括项和模块):

{ "vendorId": "IL03#sub_01", "version": "9.0.0", "config": { "module-1": { "property-1": "value-1", "property-2": "value-2", "property-3": "value-3", "module-1_1": { "property-1_1": "value-1_1", "property-1_2": "value-1_2", "property-1_3": "value-1_3" } }, "module-2": { "property-4": "value-4", "property-5": "value-5" } }}

四、配置成果物如下:

需求分解

一个简单的嵌套组件:

<template> <div> <span>{{data.content}}<span> <div> <nested :data="data.child"></nested> <div> </div></template><script>export default { name: 'nested', props: ['data']}</script>

我们给最外层的组件(根嵌套组件)绑定形如

{ "content": "value", "child": { "content": "value-1" "child": { "content": "value-1_1" ...... } }}

的数据结构,就可以看见效果了,是不是和我们前面需求的数据结构很像?

开始动工

step1:最外层列表展示

这里作为静态路由页面展示即可(分页、查询、删除功能在这里做)

<!-- 这里使用了EL-UI --><template> <!-- 应用配置入口 --> <div class="app-config-wrap"> <!-- 增 --> <div class="app-config-add"> <el-button type="primary" size="mini" @click="handleClickAdd">新增配置</el-button> </div> <!-- 查 --> <div class="app-config-search"> <div class="label" @click="isShowFilter = !isShowFilter"> <span class="text">查询App配置</span> <span class="el-icon-caret-right" v-if="!isShowFilter"></span> <span class="el-icon-caret-bottom" v-else></span> </div> <div class="clear-all" @click="handleClearAll" v-if="isShowFilter" title="点击清空所有查询条件"> <span class="text">清空条件</span> </div> <div class="form-wrap" v-show="isShowFilter"> <div class="by-vendorId"> <el-input type="text" size="mini" placeholder="按厂商编号查询" clearable v-model.trim="vendorId"> </el-input> </div> <div class="by-version"> <el-input type="text" size="mini" placeholder="按版本号查询" clearable v-model.trim="version"> </el-input> </div> <div class="search-button"> <el-button type="primary" size="mini" @click="handleClickSearch">查 询</el-button> </div> </div> </div> <div class="app-config-main" :style="tableHeight"> <el-table size="mini" height="100%" :data="configList" stripe @row-click="handleClickRow" highlight-current-row style="width: 100%;"> <el-table-column type="index" label="No." width="60"></el-table-column> <el-table-column prop="vendorId" label="厂商编号" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="version" label="版本号" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="operation" label="操作"> <template slot-scope="scope"> <!-- 删 --> <el-button type="danger" size="mini" @click="handleClickDelete(scope.row.id)">删除配置</el-button> </template> </el-table-column> </el-table> </div> <el-pagination class="pagination" v-if="total" background small :current-page="pageNum" :page-sizes="[10, 20, 40, 60]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="parseInt(total)" @current-change="changePageNo" @size-change="changePageSize"> </el-pagination> </div></template><script>export default { name: 'appConfig', components: {}, props: [], data () { return { isShowFilter: false, vendorId: '', version: '', pageNum: 1, pageSize: 20, total: 0, configList: [{ // 假数据 id: 1, vendorId: 'cjm', version: '10.0.0' }] } }, computed: { tableHeight () { return this.isShowFilter ? { height: 'calc(100% - 129px)' } : { height: 'calc(100% - 90px)' } } }, methods: { handleClearAll () { this.vendorId = '' this.version = '' }, handleClickSearch () { // 这里发送查询请求 }, changePageNo (val) { // 这里发送分页请求 this.pageNum = val }, changePageSize (val) { // 这里发送分页请求 this.pageSize = val }, handleClickDelete (id) { // 这里发送删除请求 }, handleClickAdd () { // 使用路由方式跳转到配置页面(增加配置和修改配置同一页面即可) this.$router.push({ name: 'configData', query: {} }) }, handleClickRow (row) { // 通过id让配置页面初始化时请求数据,在跳转页面中watch即可 this.$router.push({ name: 'configData', query: { id: row.id } }) } }}</script>// 样式我就不贴了,节省篇幅

step2:动态路由页准备

由于配置页面展示是根据厂商编号和版本号动态改变的,所以这里用到

this.$router.push({ name: 'configData', query: { id: row.id }})

来实现动态路由页面,这里也需要引入我们的根嵌套组件(嵌套入口)。

<template> <div class="config-data-warp"> <div class="config-head"> <span class="text">厂商编号:</span> <el-input class="config-input" type="text" size="mini" placeholder="厂商编号" clearable v-model.trim="vendorId"> </el-input> </div> <div class="config-head"> <span class="text">版本号:</span> <el-input class="config-input" type="text" size="mini" placeholder="版本号" clearable v-model.trim="version"> </el-input> </div> <div class="config-main"> <config-module :data="config" :root="true" :commit="commit" @commit="handlerCommit"></config-module> </div> <el-button class="config-commit-btn" type="primary" size="mini" @click="commit = true">确认提交</el-button> </div></template><script>import configModule from './configModule'export default { name: 'configData', components: {configModule}, data () { return { id: this.$route.id, commit: false, vendorId: '', version: '', config: {} // 这里放点假数据 } }, mounted () { // 如果id存在,就去请求数据 if (id) { ... } }, methods: { handlerCommit (data) { // 这里是汇总数据的地方,记下来,等下提到了好找 console.log(data) this.commit = false } }}</script>

值得注意的是,确认提交按钮只是将commit变量置为true,而commit绑定在我们的嵌套组件中。

<div class="config-children" v-for="(value, index) in configJsonChildren" :key="index + 'child' + moduleName"> <config-module :index="index" @change="changeChildName" @commit="handlerCommit" :commit="commit" :data="{key: value[0], child: value[1]}"></config-module></div>

这是嵌套组件的部分代码,我们可以看到commit被原封不动的传递给了子嵌套组件,也就是说,这里的commit变量起到通知所有嵌套组件执行了提交动作,这也是父组件控制子组件组件的唯一方式——传递数据变化props(或者使用vuex也可以)。

这里还有一点,就是定义什么是嵌套部分,什么是嵌套外部分,显然,厂商编号和版本号不属于嵌套部分。

还有传入的root变量,是为了控制根嵌套组件的名称不可修改,所以传个true就可以了。

step3:嵌套组件的实现(重点)

这里梳理一下嵌套组件需要提供的功能点:

1、能够做到传入数据的展示

2、能够动态添加项和模块

3,能够将修改了的数据传递出去

传入数据的展示

我们再回过头看看后台传给我们的数据格式:

{ "vendorId": "IL03#sub_01", "version": "9.0.0", "config": { "module-1": { "property-1": "value-1", "property-2": "value-2", "property-3": "value-3", "module-1_1": { "property-1_1": "value-1_1", "property-1_2": "value-1_2", "property-1_3": "value-1_3" } }, "module-2": { "property-4": "value-4", "property-5": "value-5" } }}

从中我们是否可以提炼出每个嵌套组件的数据格式?

module: { property-1: value-1, property-2: value-2, ...... module-1: { ...... }, mpdule-2: { ...... }, ......}

而且,我们需要这个对象的key和value是可以被双向绑定的。

可是我们想一下,对象的key可以双向绑定吗?显然不能!

这也就是说,原始传入的数据结构并不能用,需要进行处理:

<template> <div class="config-module-warp"> <div class="config-head"> <!-- 根组件固定模块名,或者说不需要模块名 --> <span class="config-header-item" v-if="root">配置:</span> <div class="config-header-item" v-else> <el-input class="config-module-name" type="text" size="mini" placeholder="模块名" clearable v-model="moduleName" @change="changeModuleName"></el-input> </div> <el-button class="config-header-item" type="primary" size="mini" @click="handleClickAddProperty">新增项</el-button> <el-button class="config-header-item" type="primary" size="mini" @click="handleClickAddModule">新增模块</el-button> <el-button v-if="root" class="config-btn" type="danger" size="mini" @click="handleClickClear">清空配置</el-button> <el-button v-else class="config-btn" type="danger" size="mini" @click="handleClickDeleteModule">删除模块</el-button> <div class="config-property" v-for="(value, index) in configJsonProperty" :key="index + 'property'"> <el-input class="config-property-value" type="text" size="mini" placeholder="key" clearable v-model="value[0]"></el-input> : <el-input class="config-property-value" type="text" size="mini" placeholder="value" clearable v-model="value[1]"></el-input> <el-button class="config-header-item" type="danger" size="mini" @click="handleClickDeleteProperty(index)">删除该项</el-button> </div> <div class="config-children" v-for="(value, index) in configJsonChildren" :key="index + 'child'"> <config-module :index="index" @change="changeChildName" @commit="handlerCommit" :commit="commit" :data="{key: value[0], child: value[1]}"></config-module> </div> </div></template>...data () { return { moduleName: '', // 绑定当前子模块名 configJsonProperty: [], // 这里是子模块的property configJsonChildren: [], // 这里是子模块下的子模块(孖模块^-^) ... }}...mounted () { if (this.data && this.root) { // 由于根节点是没有模块名的,数据的解析结构是{key: moduleName, child: moduleValue},参上。 this.classify({child: this.data}) } else if (this.data) { this.classify(this.data) }}// 或者将引用根组件的地方改成下面这样也可以:// <config-module :data="{child: config}" :root="true" :commit="commit"// @commit="handlerCommit"></config-module>// _____________________________________// mounted () {// if (this.data) {// this.classify(this.data)// }// }...classify (prop) { let data = prop.child this.moduleName = prop.key for (let key in data) { if (typeof data[key] === 'object') { this.configJsonChildren.push([ // 这里将数组转化为可以双向绑定的二维数组 key, data[key] ]) } else { this.configJsonProperty.push([ key, data[key] ]) } }}

实现动态增加

只需要添加空项就行了,但由于模块是由父组件传入的,所以改变模块名也需要同步改变父组件的模块名,而这里就用到了props中的index,代表父组件中的位置。

handleClickAddProperty () {this.configJsonProperty.push([ '', '' ])},handleClickAddModule () { this.configJsonChildren.push([ '', {} ])},changeModuleName (value) { this.$emit('change', this.index, value)},changeChildName (index, name) { this.$set(this.configJsonChildren[index], 0, name)},

孪生兄弟:动态删除

其实,增加数据和删除数据无外乎就是,本地数据本地改,外部数据同步改:

handleClickClear () { // 如果本身就是空,就无需操作,防止误操作,毕竟我挺讨厌弹窗的 if (!this.configJsonProperty.length && !this.configJsonChildren.length) { return } // 敏感操作给个弹窗 this.$confirm('确定清空所有配置?', '警告', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { // 这个是本地触发的哦! this.configJsonProperty = [] this.configJsonChildren = [] })},handleClickDeleteProperty (index) { // 本地数据本地改 this.configJsonProperty.splice(index, 1)},handleClickDeleteModule () { // 外部数据传出改,由于是删除操作,外部销毁了会直接导致本地销毁,本地无需再销毁 // 和改模块名不一样 // 改模块名时,虽然外部数据改变触发了本地更新,但由于是push操作,并不会改变本地数据 this.$emit('delete', this.index)},deleteModule (index) { // 与handleClickDeleteProperty方法比较,一定要分清哪个是子组件触发,哪个是父组件触发 this.configJsonChildren.splice(index, 1)},

重中之重:提取这个树结构中的数据

数据在各个子组件中保存,怎么把它们提取出来呢?

聪明的你肯定马上想到了我之前所说的commit变量吧,它将这个动作分发到了各个子组件。

所以,只要每个子组件听从命令,把数据层层上报,是不是就完成了呢?

这就好比是公司总经理想要开发一个软件,他就只要告诉各个部门:

哎,你们软件部负责做出软件可行性方案;

你们市场部负责调查同类软件和市场份额;

你们营销部赶快出炉软件推广方案,等等。

然后部门总监给各项目经理发小人物,然后项目经理再分解任务成需求给你。

最后做完了,流程就是:你 -》经理-》总监-》总经理。

在我们这份代码中,也是这样子的:

第一步:你要知道任务来了:

watch: { commit (val) { if (val) { this.handleClickCommit() // 接到任务 } else { this.commitData = {} // 这里也标记一下 } }},

第一步:找到最底层的“你”,也就是找到这个树组件的末梢节点,

它的标志是:

if (!this.configJsonChildren.length) { ...... } // 他没有子节点了

d收集它的“工作成果”:

let obj = {}this.configJsonProperty.forEach(v => { if (v[0] && v[1]) { obj[v[0]] = v[1] } else { this.$emit('error') // 如果有项不完整,可以报错 }})

你觉得上面代码有没有小问题?给你五秒想一想。

1

2

3

4

5

有没有这样一种情况?我们一不注意写了两个同样键名的项,不管是写到了错的模块里面还是怎样。

那么在上面的代码中,就会使得新值覆盖旧值,就有可能导致严重的事故!!!

所以我们改成:

handleClickCommit () { if (!this.configJsonChildren.length) { if (!this.moduleName && !this.root) { this.$emit('error') return } let obj = {} for (let v of this.configJsonProperty) { if (v[0] && v[1]) { if (obj.hasOwnProperty(v[0])) { this.$emit('error') // 啊,一不小心走神了 return } obj[v[0]] = v[1] } else { this.$emit('error') // 这里不需要return是因为不会造成严重后果,当然也可以加上 // 主要是我用这个功能时会一口气添加好多项,也不一定全填满,省得一个个删。 } } this.$emit('commit', { // 把数据给经理!!!这个杀千刀的,天天催! key: this.moduleName, // 身份狗牌 value: obj }) }}

啊,工作终于提交了,再也不担心了,接下来的事就交给经理去做吧!

经理:我手下管着这么多人,不可能来一个我上交一个吧?那就等他们全部上交了,我再整个打包上交吧。

首先第一步,我需要一个箱子来存他们的成果:

data () { return { moduleName: '', configJsonProperty: [], configJsonChildren: [], commitData: {} // 存放成果的箱子 }}

接下来就等他们上交了:

handlerCommit (data) { if (!this.moduleName && !this.root) { // 领导也要有名字,但总经理只有一个 this.$emit('error') return } this.commitData[data.key] = data.value // 先按人头收下成果 for (let item of this.configJsonChildren) { if (!this.commitData.hasOwnProperty(item[0])) return // 如果没收齐,继续等待 } // 欧耶,收齐了 let obj = {} for (let v of this.configJsonProperty) { // 这个for循环可以封成一个函数的,毕竟写了两次 if (v[0] && v[1]) { if (obj.hasOwnProperty(v[0])) { this.$emit('error') return } obj[v[0]] = v[1] } else { this.$emit('error') } } this.$emit('commit', { key: this.moduleName, value: Object.assign(obj, this.commitData) // 领导自己的成果加上员工的成果 })}

还记得上面我让你记下的地方吗?

handlerCommit (data) { console.log(data) // 汇总数据,在这里可以发送给后台了 this.commit = false // 任务完成标志}

watch: { commit (val) { if (val) { this.handleClickCommit() } else { this.commitData = {} // 初始化子组件 } }},

到这里,嵌套组件也大致完工了,贴全代码:

<template> <div class="config-module-warp"> <div class="config-head"> <span class="config-btn" v-if="root">配置:</span> <div class="config-btn" v-else> <el-input class="config-module-name" type="text" size="mini" placeholder="模块名" clearable v-model="moduleName" @change="changeModuleName"></el-input> </div> <el-button class="config-btn" type="primary" size="mini" @click="handleClickAddProperty">新增项</el-button> <el-button class="config-btn" type="primary" size="mini" @click="handleClickAddModule">新增模块</el-button> <el-button v-if="root" class="config-btn" type="danger" size="mini" @click="handleClickClear">清空配置</el-button> <el-button v-else class="config-btn" type="danger" size="mini" @click="handleClickDeleteModule">删除模块</el-button> </div> <div class="config-property" v-for="(value, index) in configJsonProperty" :key="index + 'property'"> <el-input class="config-property-value" type="text" size="mini" placeholder="key" clearable v-model="value[0]"></el-input> : <el-input class="config-property-value" type="text" size="mini" placeholder="value" clearable v-model="value[1]"></el-input> <el-button class="config-btn" type="danger" size="mini" @click="handleClickDeleteProperty(index)">删除该项</el-button> </div> <div class="config-children" v-for="(value, index) in configJsonChildren" :key="index + 'child'"> <config-module :index="index" @change="changeChildName" @delete="deleteModule" @commit="handlerCommit" :commit="commit" :data="{key: value[0], child: value[1]}"></config-module> </div> </div></template><script>export default { name: 'configModule', props: ['data', 'root', 'commit', 'index'], data () { return { moduleName: '', configJsonProperty: [], configJsonChildren: [], commitData: {}, error: false } }, watch: { commit (val) { if (val) { this.handleClickCommit() } else { this.commitData = {} this.error = false } } }, computed: { }, mounted () { if (this.data) { this.classify(this.data) } }, methods: { classify (prop) { let data = prop.child this.moduleName = prop.key for (let key in data) { if (typeof data[key] === 'object') { this.configJsonChildren.push([ key, data[key] ]) } else { this.configJsonProperty.push([ key, data[key] ]) } } }, handleClickAddProperty () { this.configJsonProperty.push([ '', '' ]) }, handleClickAddModule () { this.configJsonChildren.push([ '', {} ]) }, handleClickClear () { if (!this.configJsonProperty.length && !this.configJsonChildren.length) { return } this.$confirm('确定清空所有配置?', '警告', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { this.configJsonProperty = [] this.configJsonChildren = [] }) }, handleClickDeleteProperty (index) { this.configJsonProperty.splice(index, 1) }, handleClickDeleteModule () { this.$emit('delete', this.index) }, deleteModule (index) { this.configJsonChildren.splice(index, 1) }, changeModuleName (value) { this.$emit('change', this.index, value) }, changeChildName (index, name) { this.$set(this.configJsonChildren[index], 0, name) }, handleClickCommit () { if (!this.configJsonChildren.length) { if (!this.moduleName && !this.root) { this.$emit('error') return } let obj = {} for (let v of this.configJsonProperty) { if (v[0] && v[1]) { if (obj.hasOwnProperty(v[0])) { this.$emit('error') return } obj[v[0]] = v[1] } else { this.$emit('error') } } this.$emit('commit', { key: this.moduleName, value: obj }) } }, handlerCommit (data) { if (!this.moduleName && !this.root) { this.$emit('error') return } this.commitData[data.key] = data.value for (let item of this.configJsonChildren) { if (!this.commitData.hasOwnProperty(item[0])) return } let obj = {} for (let v of this.configJsonProperty) { if (v[0] && v[1]) { if (obj.hasOwnProperty(v[0])) { this.$emit('error') return } obj[v[0]] = v[1] } else { this.$emit('error') } } this.$emit('commit', { key: this.moduleName, value: Object.assign(obj, this.commitData) }) } }}</script>

总结

其实聪明的人根本就不需要我总结嘛,代码是最好的语言

所以这里我提出一些我的不足和没做完的部分,不过都是细枝末节啦:

第一个是错误的处理,我这边没有加上

第二个是模块应该有折叠功能,不然配置多看着就眼花缭乱,

不过v-show的使用大家应该也是登峰造极了。

然后,大家有什么意见和建议都可以在下方反馈。

感谢大家看完这一篇长文,么么哒~希望能给大家一个参考,也希望大家多多支持真格学网

一个组件按页面功能切分还是按业务逻辑切分的问题,两种思路都没问题,不管哪种,都需要想清楚,逻辑抽象是否覆盖了不同场景,并且需要平衡可复用性和复杂度,如果为了提升可复用性,过分增强了复杂度,则不如不要这个可复用性。 另外,可以考虑使用 elemefe 的 element 或者 mint 组件库啊内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 解决vue单页面修改样式无法覆盖问题
  • vue app.vue中的公共组件改变值触发其他组件或.vue页面监听
  • vue将单页面改造成多页面应用的方法
  • vue路由切换页面不更新问题解决方案
  • vuejs第七篇之vuejs过渡动画案例全面解析
  • 详解三种方式解决vue中v-html元素中标签样式
  • vue v-for循环中每个item节点动态绑定不同函数的实例
  • 利用vue.js指令实现全选功能
  • elementui表格组件+sortablejs实现行拖拽排序的示例代码
  • 使用vue脚手架(vue-cli)搭建一个项目详解
  • vue中保存用户登录状态实例代码
  • 基于vue-cli npm run build之后vendor.js文件过大的解决方法
  • vue项目中数据的深度监听或对象属性的监听实例
  • vue里面父组件修改子组件样式的方法
  • Vue 项目单组件问题
  • vue.js 单页面怎么调用组件
  • vue父子组件的嵌套的示例代码
  • vue 切换页面,组件没有销毁(destroyed无效)。
  • 解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住i...
  • 解决vue多个路由共用一个页面的问题
  • Vue单页面应用保证F5强刷不清空数据的解决方案
  • 详解vue2.0 transition 多个元素嵌套使用过渡
  • vue递归组件里面嵌套组件,怎么写
  • Vue 多层组件嵌套二种实现方式(测试实例)
  • 浅谈Vue页面级缓存解决方案feb-alive (下)
  • vue单文件组件通常是如何调用实例方法的
  • vue单文件组件怎么引入swiper.js?
  • vue单文件组件,script中怎么能使用es6的export语法
  • 浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
  • vue单文件组件,script中怎么能使用es6的export语法
  • vue 刷新之后 嵌套路由不变 重新渲染页面的方法
  • Vue单页面如何做seo页面优化
  • vue 路由配置怎么绑定多个组件
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全yui.ext相关prototypejqueryangularjsjsonlib_jsjs面向对象extjsmootoolsseajsdojovue.jsbackbone.js其它首页javascriptjavascript类库解决vue单页面修改样式无法覆盖问题vue app.vue中的公共组件改变值触发其他组件或.vue页面监听vue将单页面改造成多页面应用的方法vue路由切换页面不更新问题解决方案vuejs第七篇之vuejs过渡动画案例全面解析详解三种方式解决vue中v-html元素中标签样式vue v-for循环中每个item节点动态绑定不同函数的实例利用vue.js指令实现全选功能elementui表格组件+sortablejs实现行拖拽排序的示例代码使用vue脚手架(vue-cli)搭建一个项目详解vue中保存用户登录状态实例代码基于vue-cli npm run build之后vendor.js文件过大的解决方法vue项目中数据的深度监听或对象属性的监听实例vue里面父组件修改子组件样式的方法vue引用js文件的多种方式(推荐)vue之父子组件间通信实例讲解(pr简单理解vue中props属性vue props用法详解(小结)vue元素的隐藏和显示(v-show指令vue.js常用指令汇总(v-if、v-fovue 进阶教程之v-model详解使用vue实现图片上传的三种方式vue.js实战之利用vue-router实现vue实现文件上传功能vue.js实现标签页切换效果vue cli3.0 引入eslint 结合vscode使用使用vue-router完成简单导航功能【推荐】vue vantui tab切换时 list组件不触发loavue中created和mounted的区别浅析vue 列表上下过渡效果的实例代码vue与vue-i18n结合实现后台数据的多语言切vue.js利用object.defineproperty实现双向react router动态加载组件之适配器模式的vue.js之vue-cli脚手架的搭建详解
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved