常规情况下，在里动态加载不同组件的方式为:<template><!-- 符合条件A，加载组件A --><BusinessComponentA v-if="condition==‘‘A" /><!-- 符合条件B，加载组件B --><BusinessComponentB v-if="condition==‘B‘" /><!-- 符合条件C，加载组件C --><BusinessComponentC v-if="condition==‘C‘" />
</template>
这种方式的问题，就是如果有很多种业务场景，那么在template里就需要写很多的分支.? 解决办法： 根据业务条件动态...
三个技能，父组件 —> 子组件传值（props）、子组件 —> 父组件传值（$emit）、以及插槽（slot）；对于一个独立的组件来说，props是用来为组件内部注入核心的内容；$emit用来使这个独立的组件通过一些逻辑来融入其他组件中。举个具体点的例子，假如你要做一辆车，车轮是要封装的一个独立组件，props指的就是根据整个车的外形你可以给轮子设置一些你想要的且符合车风格的花纹，图案等；而$emit的作用则是让这些轮子能够和整辆车完美...
npm init -y 初始化项目 //-y 为自动生成package.json，如果需要自行配置，去掉-y即可安装各种依赖项npm install --save vue 安装vue2.0npm install --save-dev webpack webpack-dev-server 安装webpack以及webpack测试服务器 //默认安装最新版2.x版本npm install --save-dev babel-core babel-loader babel-preset-es2015 安装babel，一般的浏览器是不认识es6语法的，babel的作用是将es6的语法编译成浏览器认识的语法npm install...
什么是双向数据绑定 Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。 值得注意的是，我们所说的数据双向绑定，一定是对于 UI 控件来说的，非 UI 控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用 vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突。为什么要实...
<html><head><title>element-ui demo</title><meta charset="UTF-8"><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></head><body><div id="app"><el-row class="tac"><el-col><el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"><menutree :data="menu_data"></menutree></el-menu></el-col> </el-row></div><template id="m...
Vue异步组件Demo在大型应用中，我们可能需要将应用拆分为多个小模块，按需从服务器下载。为了进一步简化，Vue.js 允许将组件定义为一个工厂函数，异步地解析组件的定义。Vue.js 只在组件需要渲染时触发工厂函数，并且把结果缓存起来，用于后面的再次渲染。下面是我写的一个简单Vue异步组件Demo。index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initi...
<!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.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head><body><div id="app"><button1></button1> <button2></button2> </div><script>var bus = new Vue();Vue.component(‘butt...
<template><div> <v-breadcrumb /> <div class="combat"> <el-tabs v-model="tabName" type="card" class="tab-section" @tab-click="changeTab()"> <el-tab-pane label="tab1" name="tab1"> <CombatCampsite v-if="tabName === ‘tab1‘"/> </el-tab-pane> <el-tab-pane label="tab2" name="tab2"> <CombatCourse v-if="tabName === ‘tab2‘" /> ...
uniapp兼容多端自定义模态弹框组件UAPopupua-popup 一款轻量级的uniapp自定义弹窗组件。汇集了android、ios和微信弹窗效果(msg消息、alert提示框、dialog对话框、actionsheet底部动作框、toast轻提示、长按定位菜单)等功能。如下图：H5+App端+小程序效果，亲测多端运行一致。◆ 引入使用 ▍在main.js中引入uapopup弹框组件// 引入自定义弹框组件
import uaPopup from ‘./components/ua-popup/index.vue‘
Vue.component(‘ua-popu...
//json数据var tree = [{ ‘menuName‘: ‘基础管理‘, ‘menuCode‘: ‘10‘, ‘children‘: [{ ‘menuName‘: ‘用户管理‘, ‘menuCode‘: ‘11‘ }, { ‘menuName‘: ‘角色管理‘, ‘menuCode‘: ‘12‘, ‘children‘: [{ ‘menuName‘: ‘管理员‘, ‘menuCode‘: ‘121‘ }] }]}]// 父组件 引用items(v-bind:model=‘menuItem‘)(v-for=‘menuItem in tree‘)// 子组件 <template lang="...
Vue获取组件的一些方法this.$refs.xxx给标签绑定ref属性，获取的是当前DOM对象给组件绑定ref属性，获取的是组件实例对象this.$parent获取当前组件的父组件,为一个对象this.$root获取当前组件的根组件,为一个对象this.$children获取当前组件的子组件,为一个数组vue-cli(vue脚手架)的使用1.安装npm install -g @vue/cli //必须先安装了node.js -g表示全局环境
vue -V // 可查看当前vue-cli的版本
2.创建项目Vue CLI >= 3 和旧版使用...
1.什么是组件组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。组件化和模块化的不同：2.组件化与模块化 模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一 组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用3.组件定义方式 全局定义 ①使用Vue.extend配合Vue.copmpone...
输出： <template><div class="Rating-gray"><i v-for="(item,index) in itemClasses" :key="index" class="fa" :class="item"></i></div></template><script>
const LENGTH =5;const CLS_ON ="fa-star";
const CLS_HALF ="fa-star-half-empty";
const CLS_OF ="fa-star-0";export default {name:"Rating",props:{rating:Number},computed:{itemClasses(){let result = [];// 如 4.8 对分数进行处理, 向下取0.5的倍数 let sco...
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。个人认为就是一个可以重复利用的结构层代码片段。全局组件注册方式：Vue.component(组件名,{方法})eg:<body>
<div id="app">
<my-component></my-component>
</div>
<div id="app1"><my-component><...
3. 14种组件通讯3.1 props这个应该非常属性,就是父传子的属性;props 值可以是一个数组或对象;// 数组:不建议使用
props:[]// 对象
props:{inpVal:{type:Number, //传入值限定类型// type 值可为String,Number,Boolean,Array,Object,Date,Function,Symbol// type 还可以是一个自定义的构造函数，并且通过 instanceof 来进行检查确认required: true, //是否必传default:200, //默认值,对象或数组默认值必须从一个工厂函数获取如 def...