vue

1、主要作用 主要作用： 给DOM元素绑定事件。（v-on:事件名称 = “事件执行和函数引用”） 2、简写方法 简写方法： 事件绑定简写：@事件名称 = “事件执行和函数引用”。 3、常用事件修饰符 .stop - 调用 event.stopPropagation()。 .prevent - 调用 event.preventDefault()。 .capture - 添加事件侦听器时使用 capture 模式。 .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。 .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。 .native - 监听组件根元素的原生事件。 .once - 只触发一次回调。 来源： https://www.cnblogs.com/jiapei/p/12458113.html

1.父组件向子组件传值： ①在父组件中使用v-bind进行属性绑定 ②在子组件中使用props进行数据接收 2.子组件向父组件传值： ①在子组件中使用v-on进行事件绑定，使用$emit发送数据 ②在父组件中自定义事件用于接收传过来的值，使用$on接收数据 3.兄弟组件之间传值：EventBus 来源： CSDN 作者： 不停520 链接： https://blog.csdn.net/Y1914960928/article/details/104775522

1.vue中的驼峰命名不能被使用-----vue的项目名不能使用大写-----vue的组件不能以大写命名 错误实例： <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <div id="app-7"> <ol> <todo-item v-for="obj in objList" v-bind:myObj="obj" v-bind:key="obj.id" ></todo-item> </ol> </div> <script> Vue.component('todo-item', { props: ['myObj'], template: '<button v-on:click="showIdAndName" >{{ myObj.text }}</button>', methods: { showIdAndName: function(){ alert(this.myObj.id + " **" + this.myObj.text); } } }) var app7 = new Vue({ el: '#app-7', data: { objList: [ { id: 0, text: '蔬菜' }, { id: 1, text: '奶酪' }, { id: 2, text:

1 缓存形式说明 vue常使用的两种缓存策略,一种为vue的router中使用keep-alive,一种为使用vuex的store.两者对比见表格: 缓存策略 router中使用keep-alive vuex的store 用法 个人博客 官方博客 优点 1.比较灵活;<br>2.基本不需学习 1.方便统一管理数据;<br>2.多个router之间传输数据十分方便; 缺点 1.多个router之间数据传输较困难;<br>2.统一管理数据困难且效率低; 1.页面内部与input等内容交互时不方便,像v-model这样的语法糖需要拆开;<br>2.需要一定的学习过程和良好的设计理念; 适用场合 刚开始使用vue的新手(只需配置即可) 更高效管理通用数据的情况;<br>建议通过模块化使vuex的耦合性降到最低; 3 数据交互处理 以部门模块和需要选择部门的用户模块为例进行说明. 此处的数据交互问题包含两个问题: 在本地操作,当前模块的数据改变时(如增加部门),影响到另一模块的数据引用(此时再增加用户时选择的部门,如果只是单纯被缓存,则不会体现这种变化); 在本地操作,当前模块的数据改变时,影响另一个地点的数据引用; 问题二情景的自主实现必然需要后台的支持,更加复杂,本博客不予考虑.一般而言,这种情况建议用户直接刷新页面来解决问题二; 对于问题一,理论上可以仅通过前台实现自主产生影响

条件渲染 1.v-if 条件性的渲染一块内容 指令中的表达式返回为true的时候渲染 反之为false 不渲染 < p v-if = " first " > one </ p > < p v-if = " second " > two </ p > < p v-if = " third " > null </ p > new Vue ( { el : "#second" , data : { first : true , second : false , third : null , } } ) 2. v-else v-else指令来表示v-if的else块 如果v-if块表达式为false 不被渲染 则渲染对应的v-else 块 < p v-if = " first " > v-if块1 </ p > < p v-else > v-else块1 </ p > < p v-if = " second " > v-if块2 </ p > < p v-else > v-else块2 </ p > new Vue ( { el : "#second" , data : { first : true , second : false } } ) 3.v-show 也是根据条件展示元素 条件为true 展示 反之 不展示 不同的是 v-show的不显示 只是类似于不显示 display

<template> <div id="app" > <transition :name="transitionName" > <router-view class="appView"></router-view> </transition> </div> </template> <script> export default { name: 'App', data () { return { transitionName: '' } }, watch: { '$route' (to, from) { const toRouterLevel = to.meta.routerLevel const fromRouterLevel = from.meta.routerLevel console.log(fromRouterLevel) console.log(toRouterLevel) // console.log(to, from) // const toDepth = to.path.split('/').length // const fromDepth = from.path.split('/').length // console.log(to.path) // console.log(from.path) if (toRouterLevel >

<template> <div id="app" > <transition :name="transitionName" > <router-view class="appView"></router-view> </transition> </div> </template> <script> export default { name: 'App', data () { return { transitionName: '' } }, watch: { '$route' (to, from) { const toRouterLevel = to.meta.routerLevel const fromRouterLevel = from.meta.routerLevel console.log(fromRouterLevel) console.log(toRouterLevel) // console.log(to, from) // const toDepth = to.path.split('/').length // const fromDepth = from.path.split('/').length // console.log(to.path) // console.log(from.path) if (toRouterLevel >

[2018-07-31更新]： vue-cli 3.0正式版的中文文档已经出来了，详细的可以参考： https://cli.vuejs.org/zh/guide/ 一、安装Vue和创建项目: # 安装 npm install -g @vue/cli注：快捷键win+R，输入cmd并运行，默认C盘，可设置对应的磁盘，如F盘， 输入cd\到C盘更目录，再输入f:进入F盘，最后就是自己自定义的文件夹cd vue # 查看已安装版本 vue --version 或者 vue -V # 卸载 npm uninstall @vue/cli -g # 新建项目 vue create my-project注：创建自定义项目(my-porject)的时候，可自定义设置项目相关配置，可以End默认，如果设置了的可以在vue.config.js配置文件中再次修改。 # 项目启动 npm run serve # 打包 npm run build 二、Vue相关配置--vue.config.js Vue-cli3.0的配置不同于之前版本，大大的简化了开发者工作，更人性化，只有一个配置文件-vue.config.js。 常用配置：1、样式预处理less，sass，公共样式文件设置 　　　　　2、端口设置和热加载 　　　　　3、第三方插件 vue.config.js --- 基础模版 module

1 <template> 2 <div ref="dragBox" 3 @touchstart="touchstartHandle('dragBox',$event)" 4 @touchmove="touchmoveHandle('dragBox',$event)"> 5 可拖拽元素 6 </div> 7 </template> data() { return { coordinate: { client: {}, elePosition: {} } } }, methods: { touchstartHandle(refName, e) { let element = e.targetTouches[0] // 记录点击的坐标 this.coordinate.client = { x: element.clientX, y: element.clientY } // 记录需要移动的元素坐标 this.coordinate.elePosition.left = this.$refs[refName].offsetLeft this.coordinate.elePosition.top = this.$refs[refName].offsetTop }, touchmoveHandle(refName, e) { let element = e.targetTouches[0] //

一周的时间，几乎每天都要工作十几个小时，敲代码+写作文，界面原型算是完成了，下一步是写内核的HTML处理引擎，纯JS实现。本次实战展示告一段落，等RXEditor下一个版本完成，再继续分享吧。 剩下的功能：标签式输入、名值对输入、对话框（modal dialog），边框输入，全部完成。 css class输入，样式跟属性输入，效果： 对话框（model dialog效果） 前几期功能效果总览： 标签输入框用来输入CSS class，名字一如既往的好听，就叫RxLabelInput吧。 输入值一个数组，因为有多处要操作数组，增、删、改、克隆、比较等。比较好的一个方式是把Array类用继承的方式重写一下，把这写方法加到里面。但是RXEidtor内核用纯JS实现，并放在一个iFrame里面，它跟主界面只能通过windows message传递数据，带有方法的类无法作为消息被传递，暂时先不用这个方法，只把相关功能抽取成独立函数，放在valueOperate.js里面。 如果以后数组操作量更大，再考虑转成一个通用的数组类。 前几期介绍过，使用计算属性changed来标识数据是否被修改过，changed计算属性内部，需要比较两个值是否相等，普通字符串不会有问题，要比较数组用这样的方式最方便，先排序、转成字符串、比较字符串： aValue.sort().toString() === bValue