Vue实例每个 Vue 实例都会代理其 data 对象里所有的属性：vm.a===data.a //true注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。除了 data 属性， Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的 data 属性区分。模板语法使用在v-html里的{{}}绑定会变成下面的样子，不会编译，直接当做字符串：数据绑定使用js表达式过滤器computedComputed vs...
本篇文章主要介绍了详解vue.js的事件处理器v-on:click，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧用 v-on 指令监听 DOM 事件注意:HTML5中不能使用v-on，换为@（1）html代码：<p id="example"> <button v-on:click="greet">Greet</button> // 或者 <button @click="greet">Greet</button> </p>（2）js代码：var vm = new Vue({ el: #example, data: { name: Vue.js }, // 在 `methods` 对象中定...
全局配置 silent 设置日志与警告 optionMergeStrategies 合并策略 devtools 配置是否允许vue-devtools errorHandler 错误追踪 ignoredElements 忽略在Vue 之外的自定义元素。 keyCodes 自定义...
本篇文章主要介绍了Vue路由跳转问题记录详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧最近项目上需要用Vue用来做app，在Vue中使用路由时遇到下面的问题。路由设置如下：其中/tab是根地址，有3个子地址，3个子地址层级为：LayoutList => LayoutView => LayoutDetail正常情况：假设当前路由为/tab/layoutList，需要跳转到LayoutView页面，可以通过router.push({path:layoutView/+item.id})跳转...
本篇文章主要介绍了详解Vue-cli 创建的项目如何跨域请求 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧问题描述：使用 Vue-cli 创建的项目，开发地址是 localhost:8023，需要访问 localhost:9000 上的接口分析原因：不同域名之间的访问，需要跨域才能正确请求。跨域的方法很多，通常都需要后台配置不过 Vue-cli 创建的项目，可以直接利用 Node.js 代理服务器，实现跨域请求 解决方案：接口地址原...
Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。下面这篇文章主要给大家介绍了关于vue.js使用的相关总结,需要的朋友可以参考借鉴。一、Vue.js组件vue.js构建组件使用Vue.component(componentName,{ /*component*/ })；这里注意一点，组件要先注册再使用，也就是说：Vue.component(mine,{template:...
首先在开发时需要考虑以下三点: 1、进入和弹出的动画效果。 2、z-index 的控制 3、overlay 遮盖层关于动画vue 对于动画的处理相对简单，给组件加入css transition 动画即可<template> <div class="modal" transition="modal-scale"><!--省略其它内容--> </div> </template> <script> // ... </script> <style> .modal-scale-transition{transition: transform,opacity .3s ease; }.modal-scale-enter, .modal-scale-le...
实现效果: 实现图表的二次封装以及表格的自由拖动,缩放功能先贴出两个组件的地址: vue-draggable-resizable-gorkysv-chart 图标的二次封装 这里我们先做一个简单的封装 比如标题+图表的形式:chart_with_upwards_trend: <div class="chartcontainer"><div>{{diyposition.title}}</div><ve-line :data="chartData[0]" width="100%" height="100%" :judge-width="true" ref="mychart" :colors="colors"></ve-line></div>尤其说明一下这...
vue概念：vuex 是 Vue 配套的 公共数据管理工具，它可以把一些共享的数据，保存到 vuex 中，方便 整个程序中的任何组件直接获取或修改我们的公共数据； 配置vuex的步骤： 1、运行cnpm i vuex -S 2、导包 import Vuex from vuex3、将vuex注册到vue中 Vue.use(Vuex)4、new Vuex.Store() 实例，得到一个 数据仓储对象 var store = new Vuex.Store({state: {// 大家可以把 state 想象成 组件中的 data ,专门用来存储数据的// 如果在 组...
什么是 keep-alive在平常开发中，有部分组件没有必要多次初始化，这时，我们需要将组件进行持久化，使组件的状态维持不变，在下一次展示时，也不会进行重新初始化组件。也就是说，keepalive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染 。也就是所谓的组件缓存 <keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 <keep-alive> 包裹动态组件时，会缓存不活动的组件实...
一开始我还以为vue的路由只能用在工程化的项目里面呢，然后研究了一下才发现，在脚本化里面也是可以用的。其实呢不管在哪里用，把原理研究明白就对了。 一、 官网demo 这里不得不吐槽一下官网，写的不清不楚的，在哪里使用都没有说清楚，几行代码一句话就轻飘飘的交代完事了，剩下的事情还得自己研究，比如 HTML5 History API 是怎么回事。这里又涉及了一个问题，想要用好vue，必须的基础是要先掌握的，因为vue的官网教程里面不会管...
vue router总结 $router和$route及router与 router与route区别 1 this.$router和this.$route的区别 vue router this.$router是VueRouter的实例方法，当导航到不同url，可以使用this.$router.push方法，这个方法则会向history里面添加一条记录，当点击浏览器回退按钮或者this.$router.back()就会回退之前的url。 this.$route相当于当前激活的路由对象，包含当前url解析得到的数据，可以从对象里获取一些数据，如name,path等。 2 路由...
有接口如下： http://127.0.0.1:8000/info/schemes/ 返回json数据： [{"name": "（山上双人标准间）黄山经典二日游（魅力黄山，日出云海，人间仙境，春暖花开）", "day": 2, "night": 1, "favorites": 0, "score_avg": 4, "photo_url": "/media/images/scenic/a9836502.jpg", "review_num": 2, "unit_price": 0}, {"name": "0购物+三环内接！郑州—焦作云台山二日游，含1晚住宿+1早2正餐，无强制消费", "day": 2, "night": 1, "fav...
由于新建项目发版打包时间大概需要 30分钟 ，发版时 严重 拖慢 下班 时间，所以特意查看了相关文档来优化打包速度，争取早点下班，^_^。 分析打包文件 要优化，先分析。我们先要知道到底是哪里拖慢我们的打包速度呢？ 打包后生成文件分析 可以利用 webpack-bundle-analyzer 插件来分析我们打包后生成的文件 安装npm i webpack-bundle-analyzer -D使用修改 webpack.prod.conf.js 文件const BundleAnalyzerPlugin = require(webpack-...
1.环境配置 项目中的不同开发环境有很多依赖配置，所以可以根据环境设置不同的配置，以免在不同环境经常修改文件 1 在根目录下创建 `.env.[环境]` 文件，可以在不同环境设置一些配置变量，如图 .env.dev 文件 2.eslint 配置 在package.json 文件里面有一个eslintConfig对象，可设置rules： 如图3.配置svg 在vue.config.js 里面需在module.exports对象里面设置 chainWebpack: config => {config.module.rules.delete(svg) // 重点:...