vue

今天工作中遇到改变vue data中某个对象的值，却无法触发视图更新的问题。看了看官方文档，怎么解决的呢？ 1、检测对象的变化 受现代 JavaScript 的限制（以及废弃 Object.observe ）， Vue 不能检测到对象属性的添加或删除 。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。 使用Object.assign() 或 _.extend() 方法来添加属性 // 代替 `Object.assign(this.someObject, { a: 1, b: 2 })` this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 }) 2. 检测数组的变化 由于 JavaScript 的限制， Vue 不能检测以下变动的数组： (1)、当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue (2)、当你修改数组的长度时，例如： vm.items.length = newLength 如何解决上述问题呢？ 方法1： // Vue.set Vue.set(example1.items, indexOfItem, newValue) 方法2：

Vue折腾记 - (3)写一个不大靠谱的typeahead组件 2017年07月20日 15:17:05 阅读数：691 前言 typeahead在网站中的应用很多..今天跟着我来写一个不大靠谱的typeahead; 你能学到什么? 自定义事件 遍历的思想 功能细节的考虑 一切都挺不靠谱的…可完善的地方很多.废话不多说,看效果图 更新 2017-07-21: 完善逻辑及美化样式,所以效果图和代码都有所变动 效果图 这里写图片描述 有哪些功能点? 粗糙的模糊搜索 - 借助indexOf ESC和blur事件清除输入框,没有找到匹配的情况下 Enter默认在找到只剩下一个情况下选中 方向盘的上下(已经阻止光标的移动)选中子项,回车选中 鼠标点击选择子项 搜索框清空情况下默认不触发自定义事件值的返回 鼠标移动+键盘方向键移动位置的同步 placeholder及遍历数据data支持外部传入,也就是绑定props;前者字符串,后者数组对象 代码 typeahead.vue {{item.text}} 未能查询到,请重新输入! */ /*--> */ 总结 自此,一个挺粗糙的模糊搜索组件就完成了; 希望此文对于正在阅读的您有所收获~~ 有更好的方案或者实现方法的可以留言…谢谢 来源： https://www.cnblogs.com/xiaocongcong888/p/9414996.html

思路:　　 1.因页面分组件分的比较细,由图可知是组件5到组件4的联动. 如果利用组件间通信需要 子组件5 -->组件3-->所有组件的父组件-->组件4, 层级略显复杂,所以使用了vuex状态管理管理数据. 2.动画处理: 利用vue的 transition 标签来处理动画. 小球运动的轨迹是一条抛物线, 可使X轴做匀速运动, Y轴贝塞尔曲线, 可以考虑设定两个嵌套的DOM来控制运行轨迹.外层控制Y轴动画, 内层控制X轴动画. 因小球落点是同一个位置, 可以将小球设定到落点位置, 动态获取初始值来决定小球的运动轨迹. 3.如果连续点击小球, 则页面上可能显示多个小球, 所以需要设置多个小球保证页面上可以显示多个小球. 结构图: html (Ball.vue) : <div class="ball-container"> <transition v-for="(ball,index) in balls" :key="index" name="drop" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> <div class="ball" v-show="ball.show" > <div class="inner inner-hook"></div> </div> </transition>

1、初始化 Vue 项目： （1）彻底删除 cnpm （假如已安装过）： npm uninstall cnpm -g （2）安装 cnpm 淘宝的包管理器（由于 npm 的插件都是从国外服务器下载，因网络不稳定，可能出现异常，所以需要更换为 cnpm）： npm install cnpm -g --registry=https://registry.npm.taobao.org （3）查看包管理器是否安装成功： npm config get registry （4）全局安装 vue-cli2.x 脚手架（包括 vue 和 webpack）： cnpm install vue-cli -g cnpm install webpack -g （5）查看 vue 是否安装成功： vue -V （6）初始化项目： vue init webpack projectName 初始化过程中，会以交互的方式询问是否需要安装相关插件，全部选择 No 即可。 （7）运行项目： 1、cd 进入项目目录（检查下是否有 node_modules 文件夹，用于引入依赖的模块，如果没有则执行 cnpm install ） 2、使用 cnpm run dev 运行项目 2、Vue 项目结构说明： （1）全局结构： 文件夹： build -- webpack相关配置文件，一般情况下不需要自己配置 config --

editconfig root = true [*] charset = utf-8 indent_style = space indent_size = 2 end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true .eslintrc module.exports = { root: true, parserOptions: { parser: 'babel-eslint' }, env: { browser: true, }, extends: [ // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 'plugin:vue/essential', // https://github.com/standard/standard/blob/master/docs/RULES-en.md 'standard' ], // required to lint *.vue

module.exports = { root: true, 'extends': [ 'plugin:vue/essential', '@vue/standard' ], rules: { 'object-curly-spacing': ["error", "always"], // allow async-await 'generator-star-spacing': 'off', // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }], 'no-undef': 'off' }, parserOptions: { parser: 'babel-eslint' } } 来源： https://www.cnblogs.com/pengchenggang/p/11645708.html

前言 之前文章 讲到如何使用Node.js+Express构建JavaScript客户端，实现前后端分离。本节将介绍如何使用Vue实现前后端分离，文中介绍Vue的知识比较基础，适合新手学习。 一、搭建Vue项目 前提条件：安装nodejs、webpack和vue-cli。这个网上很多教程，这里不多说。 （1）新建Vue项目 Cmd进入创建项目的路径，输入：vue init webpack VueJS_Client 新建vuejs_client的Vue项目，安装npm。 （2）安装oidc-client库 使用VSCode打开vuejs_client项目所在的文件夹 Ctrl + ~ 打开控制控制台，输入：npm install oidc-client （3）实现自动跳转登录页面 在src文件夹中打开HelloWorld.vue文件，导入oidc-client模块，若在未登录情况，在组件创建前跳转登录页面。代码很简单，直接调用登录函数。 <template></template> <script> import Oidc from "oidc-client"; var config = { authority: "http://localhost:5000", client_id: "js", redirect_uri: "http://localhost:5003/CallBack

一、 Vue 组件： 用于扩展 HTML元素，封装可重用的代码； 　　主要分为：全局组件，局部组件； 二、全局组件： 　　1 ）创建： Vue.component(tagName, options)； 　　2 ）调用： <tagName></tagName> 　　3 ）注释事项： 　　　　1 ） 只有 div被vue绑定，才能使用vue 的组件； 　　　　2 ） template ：必须有一个根元素； 　　　　3 ） data 的写法不同： data ： function(){return{ json 格式键值对 }} 　　4 ）示例： <div id="app"> <module></module> </div> <script> Vue.component("module",{ template:"<div><p>{{title}}</p><button @click='btnFn'>java</button></div>", data:function () { return{ title:"你好" } }, methods:{ btnFn:function () { alert("java"); } } }) new Vue({ el:'#app' }) </script> 三、局部组件： 　　// 只能在 el 标记的 div 中使用； <div id="app">

组件化的思想 将一个页面中的处理逻辑放在一起，处理起来就会很复杂，不利于后续管理和扩展。 如果将页面拆分成一个个小的功能块，每个功能块实现自己的内容，之后对页面的管理和维护就变得很容易了。 注册组件的基本步骤 1.创建组件构造器 2.注册组件 3.使用组件 //创建组件构造器对象 const cpnC = Vue.extend({ template:` <div> <h2>hello world</h2> <p>hi world</p> </div> ` }) //注册组件 Vue.component('my-cpn',cpnC) //使用组件 <div id="app"> <my-cpn></my-cpn> </div> 全局组件 可以在多个Vue的实例下使用 Vue.component('my-cpn',cpnC) 局部组件 仅可以在当前Vue实例下使用 var vm = new Vue({ el: '#app', data: {}, methods: {}, components:{ mycpn: cpnC } }); 父子组件 <script> const cpnC1 = Vue.extend({ template:` <div> <h2>我是标题</h2> <p>我是内容，哈哈</p> </div> ` }) const cpnC2 = Vue.extend({

https://github.com/liukaijv/laravel-vue-cms https://github.com/allan2coder/VUE2-SPA-Tutorial https://github.com/liujians/vue-adminLte-vue-router http://wiki.jikexueyuan.com/project/vue-js/ http://www.vue-js.com/ http://cn.vuejs.org/guide/ http://router.vuejs.org/zh-cn/ http://www.doc00.com/doc/1001004eg http://www.cnblogs.com/jyichen/p/5660886.html http://www.cnplugins.com/devtool/vuejs-devtools/detail.html https://github.com/hilongjw/vue-lazyload https://segmentfault.com/q/1010000007213357 http://www.ibm.com/developerworks/cn/web/wa-develop-vue1-bluemix/index.html http://larabase.com