Vue
文章平均质量分 76
drunk喵咪
学习这件事,不是缺乏时间,而是缺乏努力。
展开
-
vuerouter
与vuex类似1. vuex的使用1) 安装script2) 实例化storelet store =new Vuex.Store({ state, getters, mutations, actions,})store注入到vuenew Vue({ store })使用this.$store.statethis.$store.gettersth...原创 2019-10-26 14:46:51 · 231 阅读 · 0 评论 -
vue状态机
vuex官方文档1、安装npm install vuex --save在main.js中全局引入import Vuex from 'vuex'Vue.use(Vuex)安装后会有一个store/index.js文件2、state由于vuex的状态存储是响应式的,那么在组件中,我们就可以用计算属性来获取state状态<template> <div id="app"> <h2>product-one</h2> <原创 2020-09-21 00:40:32 · 706 阅读 · 0 评论 -
vuex
介绍Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。原先数据需要保存到各自vue实例对象的data中,当使用vuex之后,就可以将data中的数据集中管理到vuex中。vue - data{ customer:{}}交互:双向数据绑定渲染事件绑定,事件处理...原创 2019-10-24 09:57:44 · 101 阅读 · 0 评论 -
vue api实例
子组件<template> <div v-if="visible"> <p>{{header}}</p> 我是子组件:{{num}} </div></template><script>export default { components: { }, props: { header:{ type:Str原创 2020-09-25 14:25:14 · 255 阅读 · 0 评论 -
vue中mixins、extends
mixins就是混入。一个混入对象可以包含任意组件选项。同一个生命周期,混入对象会比组件的先执行。<template> <div id="app"> </div></template><script>import {mixinsTest,mixinsTest2} from '@/api/test.js'export default { components:{ }, mounted(){原创 2020-09-22 18:38:22 · 243 阅读 · 0 评论 -
静态网页 手机端自适应
浏览器打开的网页,页面做手机端自适应以及引入vue和ant-designhtml<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ssss</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,m原创 2020-09-18 17:26:17 · 1394 阅读 · 0 评论 -
ant-design-vue的table动态列的显示和隐藏
难点:如何在不定义两个表头的情况下,保证每次传入父组件的参数为初始化的值(子组件回调函数改变列表表头)解决方案:将表头数组初始化数据深拷贝,传给子组件子组件<template> <a-modal title="列表配置" width="600px" :visible="visible" @ok="handleSubmit" okText="确认" @cancel="handleCancel" cancelText="关闭"原创 2020-09-18 11:01:46 · 11476 阅读 · 0 评论 -
自定义指令
在组件外在一个js文件中定义import Vue from 'vue'const color = Vue.directive('color',{ //不需要属性的指令 // inserted(el){ // console.log(el) // el.style.color = 'red' // } //需要属性的指令 bind(el,binding){ switch(binding.value){原创 2020-09-16 13:41:44 · 98 阅读 · 0 评论 -
vue中el
父组件<template> <div id="app"> <div class="container"> <example ref="text"></example> <button @click="add" ref="clickbutton">添加</button> </div> </div></template><script>imp原创 2020-09-15 18:57:25 · 336 阅读 · 0 评论 -
修饰符
3、事件修饰符.stop //阻止单击事件继续传播.prevent //提交事件不再重载页面.capture.self.once.passive //滚动事件的默认行为 (即滚动行为) 将会立即触发使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。<!-- 阻止单击事件继续传播 --><a v-on原创 2020-09-14 21:37:32 · 117 阅读 · 0 评论 -
插槽slot
什么是插槽?插槽就是子组件中的提供给父组件使用的一个占位符,用 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的标签。如下代码:在子组件中放一个占位符<h1>今天的天气状况:</h1> <slot></slot>在父组件中给这个占位符填充内容:<example :show.sync="show"> <div><h1>多云,最高温34度,最低转载 2020-09-14 16:34:19 · 250 阅读 · 0 评论 -
插件链接
flv文件播放:flv格式文件原创 2020-08-24 17:24:38 · 277 阅读 · 0 评论 -
v-if
v-if判断,函数时用tenplate<span slot="clueName" slot-scope="text,record"> <template v-if="clueNameRemake(record)"> <span style="color:#F5222D">*</span> </template> <span>{{ text }}<原创 2020-08-18 19:00:30 · 124 阅读 · 1 评论 -
使用v-chart遇见的问题
v-chart 无数据时图表不显示的解决方案双y轴刻度对齐,规定数据与右边y轴对齐<template> <div id="app"> <ve-histogram :data="histogramData" class="sss" :settings="chartSettings" :y-axis="yAxis" :extend="option" ></ve-h原创 2020-08-16 09:59:58 · 528 阅读 · 0 评论 -
关于时间的函数
//获取昨天时间getYesterday() { let day1 = new Date(); day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000); return day1.getFullYear() + '-' + (day1.getMonth() + 1) + '-' + day1.getDate(); }, getYesterdayStemp() { let day1 = new Dat原创 2020-08-15 14:14:10 · 215 阅读 · 0 评论 -
正则表达式应用
1、手机号验证{ pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/, message: '请输入正确的联系方式', trigger: 'blur' }2、中文验证{ pattern: /\u4e00-\u9fa5/, message: '请输入中文', trigger: 'blur' }3、数字验证{rules: [{ pattern: /^\d+$|^\d+[.]?\d+$/, message: '请输入数字',trigger: 'blur'}4、不允许中文原创 2020-08-07 11:03:55 · 795 阅读 · 0 评论 -
父子组件之间传值
子组件子组件通过this.$emit()的方式将值传递给父组件,这里的func是父组件中绑定的函数名<template> <div class="son"> <!-- 按钮 --> <input type="btton" @click="sendMsg" value="给父组件传值"> &l...原创 2019-12-23 17:17:45 · 137 阅读 · 0 评论 -
class与style绑定
1、class操作元素的class列表和内联样式是数据绑定的一个常见需求,可以用v-bind处理它们:通过表达式计算出字符串结果。表达式结果的类型,除了字符串之外,还可以是对象或数组(1)对象语法:<div class="name" :class="{'text-danger':hasError}">我的姓名:猫陛下</div><div class="name...原创 2019-12-20 11:16:06 · 138 阅读 · 0 评论 -
动态参数
1、参数一些指令能够接受一个‘参数’,在指令名称之后以冒号表示。<a v-bind:href='url' target="_blank">百度一下,你就知道</a>在这里href是参数,告知v-bind指令将钙元素的href特性与表达式url的值绑定<p v-on:click='something'>点击我</p>v-on指令,用于监听...原创 2019-12-20 10:32:00 · 1371 阅读 · 0 评论 -
封装echarts组件
条形图和折线图子组件<template> <div class="echartsLine" :id="id"></div></template><script>import echarts from 'echarts'export default { name:'echartsLine', props:...原创 2019-12-19 15:32:04 · 1872 阅读 · 0 评论 -
封装下拉框组件
效果:<template> <div :class={opened:menuOpened} class="drop_down_menu noselect"> <span :title="showText" @click="openAndClose" class="select_item" v-text="showText"></...原创 2019-12-17 14:55:09 · 650 阅读 · 1 评论 -
封装switch滑块组件
效果:<template> <div class="slideSwitch"> <!-- switch存在与否取决于flag是否为true --> <label role='checkbox' :class="['switch',{toggled}]"> <!--复选框,改变...原创 2019-12-17 14:51:47 · 332 阅读 · 0 评论 -
动态绑定图片
template:<template> <div id="app"> <img :src="url1" alt="图片1"> <img :src="url2" alt="图片2"> </div></template>data:我们的图片要用require引进来,静态资源都要用re...原创 2019-11-25 16:45:19 · 790 阅读 · 0 评论 -
模拟后台数据
JSON文件.json文件模拟后台数据[ { "time":"2019年01月09日 (星期三) 选题", "url":"./images/timeImage.png", "xuanti":[{ "gname":"集团总编办公室每日报题组新", "new":[...原创 2019-11-25 10:17:39 · 696 阅读 · 0 评论 -
vue组件传值
1、father.vue和child.vue基础例子//父组件 <template> <div> <h1>我是父组件!</h1> <child></child> </div></template> <script>import Child from '../compone...原创 2019-11-13 17:08:05 · 81 阅读 · 0 评论 -
vue-router重定向
往往设置不同的路径进行跳转,但有时候不同的路径可能是同一个页面,或者说同一个组件,这时候就需要路由的重定向。 routes: [{ path: '/', //路由路径 redirect: '/sys' //重定向的路径就是要跳转的那个页面的路径 }, { path: '*', redirect...原创 2019-11-13 15:32:35 · 202 阅读 · 0 评论 -
vue生命周期
初始化vue实例对象beforeCreatecreated编译模板,将模板转换为dom对象$elbeforeMount 将vue实例中的data、method绑定到$elmounted设置监听,data中值发生变化,模板就会重新渲染beforeUpdateupdated销毁beforeDestroydestroyed...原创 2019-10-21 20:06:56 · 93 阅读 · 0 评论 -
监听器
可以监听data中值的变化deep:true是关键,在Vue的文档中有说明:为了发现对象内部值的变化,可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>监听器<...原创 2019-10-21 20:02:11 · 113 阅读 · 0 评论 -
计算属性
methods中的方法在模板中被调用,如果这个方法依赖data,data的值发生了变化,这个方法就会重新执行;计算属性也具备这个特性。保证data中数据与页面中显示的数据保持一致!!!计算属性计算出来的结果会被缓存起来,下次无需计算直接显示,而方法不是,每次调用都会重新执行。<!DOCTYPE html><html lang="en"><head&...原创 2019-10-21 19:50:38 · 21055 阅读 · 0 评论 -
表单处理(双向数据绑定)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表单双向数据绑定</title> <!-- 导入vue --> <script src="https://cdn.bootcss.com/vue/2.6.10/v...原创 2019-10-21 19:28:05 · 259 阅读 · 0 评论 -
脚手架 vue-cli(创建项目)
1、为什么使用脚手架1) 模块化机制2) vue-cli能够进行项目管理1> 创建并且初始化工程node_modulessrccomponentspagesApp.vue 根组件main.js 入口文件package.json2.>测试自带静态服务器3>打包vue -> html/css/js2、安装脚手架程序1. 本地安装node&g...原创 2019-10-18 16:20:53 · 128 阅读 · 0 评论 -
vue组件
1、 组件定义将组件的信息配置到一个对象中,这个对象与Vue的参数基本一致let config = { template:` `, data(){ //保证每个vue实例都具有一个唯一的data对象 return { } }, props:["title"] , //期望从调用者哪里获取到的属性名称 methods:{ }}2、组件的注册(1)全局注册:所有的...原创 2019-10-18 16:16:58 · 158 阅读 · 0 评论 -
Vue模板语法
1、模板语言1) 声明式渲染{{message}}{{表达式}}2) 指令v-on:事件类型v-bind:属性v-if=“条件”v-show=“条件” 当dom元素频繁的显示与隐藏相互切换使用v-show,因为在隐藏与显示切换的时候不操作dom对象只改变dom对象的display属性v-for=“item in list”v-html=“v”3) 指令简写v-on:cl...原创 2019-10-16 19:51:42 · 211 阅读 · 0 评论