vue

目录 Vue常用特性 表单基本操作 表单修饰符 自定义指令 Vue.directive 注册全局指令 Vue.directive 注册全局指令 带参数 自定义指令局部指令 计算属性 computed 侦听器 watch 过滤器 过滤器中传递参数 生命周期 常用的 钩子函数 数组变异方法 替换数组 动态数组响应式数据 常用特性应用场景 1 过滤器 2 自定义指令 3 计算属性 Vue常用特性 表单基本操作 获取单选框中的值 通过v-model <!-- 1、 两个单选框需要同时通过v-model 双向绑定 一个值 2、 每一个单选框必须要有value属性 且value 值不能一样 3、 当某一个单选框选中的时候 v-model 会将当前的 value值 改变 data 中的 数据 gender 的值就是选中的值，我们只需要实时监控他的值就可以了 --> <input type="radio" id="male" value="1" v-model='gender'> <label for="male">男</label> <input type="radio" id="female" value="2" v-model='gender'> <label for="female">女</label> <script> new Vue({ data: { // 默认会让当前的 value

案例: 父组件 <template> <div id="app"> <h1>vuex</h1> <h3>count:{{count}}</h3> <button @click="count++">+1</button> <button @click="count--">-1</button> <!--父组件向子组件传递参数--> <hello-word :count2="count"></hello-word> </div> </template> <script> import HelloWord from "./components/HelloWord"; export default { name: 'App', components:{ HelloWord }, data() { return{ count: 0 } } } </script> 子组件 <template> <div> <h2>我是子组件</h2> <h3>count3:{{count2}}</h3> </div> </template> <script> export default { name: "HelloWord", props:{ count2:Number } } </script> <style scoped> </style> 来源： https://www.cnblogs.com

接上篇 https://www.cnblogs.com/chenyingying0/p/12635369.html 返回顶部组件 base/backtop/index.vue <template> <transition name="mine-backtop"> <a href="javascript:;" class="mine-backtop" v-show="visible" @click="backToTop"> <i class="iconfont icon-backtop"></i> </a> </transition> </template> <script> export default { name:"MeBacktop", props:{ visible:{ type:Boolean, default:false } }, methods:{ backToTop(){ this.$emit("backtop");//基础组件，与业务无关，具体实现去页面里 } } } </script> <style lang="scss" scoped> @import '~assets/scss/mixins'; .mine-backtop{ overflow:hidden; @include flex-center(); width:45px; height:45px;

背景：项目中使用了iframe做预览，左侧预览，右侧编辑。 问题：页面加载时，会把一些值通过postMessage发给iframe指定的页面，这样实现预览。但通过实验6次进入可能有一次无法触发onload事件。代码如下 <template> <div> <iframe id="iframe" width="500" height="800" src="http://xxx"></iframe> </div> </template> <script> ... sendMsg () { let iframe = document.querySelector('#iframe') iframe.onload = () => { console.log('加载完成') // 这里偶尔不会触发 } } ... </script> 解决：通过询问大神，知道了onload一定要在iframe加载前定义好。更改如下 <template> <div id="iframeBox"> <iframe id="iframe" width="500" height="800"></iframe> </div> </template> <script> ... sendMsg () { let iframeBox = document.querySelector('#iframeBox') let

受现代 JavaScript 的限制 ，Vue 无法检测到对象属性的添加或删除。 由于 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式 的。 但是 Vue 提供了 Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value) 来实现为对象添加响应式属性，那框架本身是如何实现的呢？ 我们查看对应的 Vue 源码： vue/src/core/instance/index.js export function set (target: Array<any> | Object, key: any, val: any): any { // target 为数组 if (Array.isArray(target) && isValidArrayIndex(key)) { // 修改数组的长度, 避免索引>数组长度导致splcie()执行有误 target.length = Math.max(target.length, key) // 利用数组的splice变异方法触发响应式 target.splice(key, 1, val) return val } // key 已经存在，直接修改属性值 if (key

接上篇 https://www.cnblogs.com/chenyingying0/p/12612393.html Loading组件 在api--home.js中，添加代码，使ajax获取到轮播图数据后，延迟一秒再显示 import axios from 'axios'; import {SUCC_CODE,TIMEOUT} from './config'; //获取幻灯片数据 ajax export const getHomeSliders=()=>{ // es6使用promise代替回调 // axios返回的就是一个promise // return axios.get('http://www.imooc.com/api/home/slider').then(res=>{ // console.log(res); // if(res.data.code===SUCC_CODE){ // return res.data.slider; // } // throw new Error('没有成功获取到数据'); // }).catch(err=>{ // console.log(err); // //错误处理 // return [{ // linkUrl:'www.baidu.com', // picUrl:require('assets/img/404.png') //

eslint是一种代码风格管理的工具，可以制定一些代码编写规范，在vue项目中经常用到 1、'layer' is defined but never used 这是定义了一个变量但是未使用到该变量，vue经常需要在全局进行声明，以便任何组件都能用到，但是经常会这样警告 可以在 .eslintrc.js 文件中修改配置，增加如下代码： "no-unused-vars":"off" rules: { // allow async-await 'generator-star-spacing': 'off', // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', "no-tabs":"off", "no-unused-vars":"off" } 2、最多的经常会碰到空格报错，去掉空格报错增加如下代码 "no-irregular-whitespace":"off" 3.报错 Newline required at end of file but not found 解决办法就是在后面再加一行 4.报错信息： Expected error to be handled 这是因为回调函数里面的参数error没有运用到，所以可以不设置参数

嵌套路由 嵌套路由：一个路由配置中嵌套其他的路由配置。 嵌套路由挺常用的，比如导航栏有首页、文章、想法、留言4个模块，我们以嵌套路由的形式集成这些模块，在导航栏中点击对应的条目，就会路由到对应的页面（下方显示对应的页面），和html的<iframe>效果差不多。 demo 嵌套路由 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- 引入vue.js --> <script src="js/vue.js"></script> <!-- 引入路由插件 --> <script src="js/vue-router.js"></script> </head> <body> <div id="app"></div> <script> // 导航 var Nav={ template:` <div> <router-link :to="{name:'nav.index'}">首页</router-link> <router-link :to="{name:'nav.article'}">文章</router-link> <router-link :to="{name:'nav.idea'}">想法</router-link> <router-link :to="{name:'nav

Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息，父组件可以使用 props 将数据向下传递到子组件，而在子组件中可以使用 events （父组件需要先监听对应子组件触发的事件） 向父组件传递信息。 但是当我们需要进行非父子组件间的通信或者是父子组件间的通信需要层层传递过于复杂时就需要使用非父子组件通信方案来进行组件间信息的传递： 下面是常见的两种非父子组件通信方案： 使用一个空的 Vue 实例作为一个事件总线中心 Bus 使用专门的状态管理模式 vueX 一、事件总线中心 Bus 总线中心 Bus 的实现思想是先把自己在 main.js 里进行全局注册，这样在每个组件都能通过 this 访问到它，由于 Bus 本身就是一个 vue 实例，所以具备 $emit 和 $on 方法，这样我们就能在 Bus 上通过自定义事件的方式发送和监听事件来传递数据，而且不受组件的位置关系影响。 具体使用如下： 1. 在 main.js 里面 将 bus 从 通过 Vue.prototype 全局注册，这样在所有的vue实例中都能通过 this.$bus 访问到 Bus: import Vue from 'vue' const bus = new Vue() Vue.prototype.$bus = bus 2. 在需要发送或接收事件的组件里面 //

使用vue进行数据过滤筛选是比较常用的功能，常见的使用场景就是搜索框数据筛选过滤了。简单示例： <template> <div> <input type="text" v-model="search"> <ul> <!-- 注意！注意！注意！这里循环遍历的是items，不再是data里的list数组 --> <li v-for="(item,index) in items"> <span>{{item.name}}</span> <span>{{item.msg}}</span> <span>{{item.age}}</span> <span>{{item.title}}</span> </li> </ul> </div> </template> <script> export default { name: "DataForm", data() { return { search:'', list:[ {id:0,name:'AAA',msg:'aaa文本介绍1',title:'水电费',age:366}, {id:1,name:'BBB',msg:'bbb文本介绍2',title:'赵子龙',age:235}, {id:2,name:'CCC',msg:'ccc文本介绍3',title:'赵性',age:587}, {id:3,name:'DDD',msg:'ddd文本介绍4'