什么是双向数据绑定 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...
在vue项目中，我们可以自定义组件，像element-ui一样使用Vue.use（）方法来使用，具体实现方法：1.首先新建一个Cmponent.vue文件// Cmponent.vue<template> <div> 我是组件 </div></template><script> export default { }</script><style scoped> div{ font-size:40px; color:#fbb; text-align:center; }</style>2.其次在同一目录下建立index.js文件,在这个文件中使用install方法来...
1、插槽（1）插槽内容像 HTML 元素一样，我们常常需要给组件传递内容比如在下面的例子中，我们给自定义组件 prompt-info 传入 出错啦 的文本<!DOCTYPE html> <html><head><title>Demo</title><script src="https://cdn.jsdelivr.net/npm/vue"></script> </head><body><div id="app"><prompt-info>出错啦</prompt-info></div><script>Vue.component('prompt-info', {template: `<div><h3>提示信息</h3></div>`})new Vue({el: '#app'...
背景：项目需要，我们引入了前端框架就是目前最流行的框架之一vue,同时引入了一套由饿了吗维护的ui库，由于我们是在pc端使用发现它竟然没有提供可随意拖动的窗口，可能用的更多的时移动端吧吧，于是就随手写了一个，比较简单吧，但是做过的就会知道也是有一些小小的技巧，记录下吧留作备用。由于不是很难，就不做过多解释了，直接上代码：前端精品教程：百度网盘下载?12345678910111213141516171819202122232425262728293031323334...