关于响应式 vue的双向绑定是基于响应式来做的，即给一个Vue对象的属性加上getter, setter方法，在这些方法中处理双向绑定。但这种方式就会出现下面这些坑 对象响应式 Vue中的属性如果是Object，或者是数组，数组中有Object，那么这些Object最好在最开始就把所有需要用到的属性都定义一遍，如果在运行中重新添加属性，这个属性并不是响应式的，就不会实现双向绑定，例如：const vm = new Vue({data: {a: {text: 'aaa'}} }) vm.a.b =...
知识说明： 初学JavaScript，注意以下七大细节，在实现同样功能的情况下，让我们的代码更易懂、效率更高。 一、简化代码 例如：创建对象 之前是这样的： Var car = new object(); Car.color = “red”; Car.wheels = 4; Car.age = 8; 而现在可以写成这样子： Var car = {color:red, wheels:4, age:8}例如：创建数组 之前是这样的： Var studentArray = new Array(‘zhangsan, lisi, ‘zhaowu, ‘wuliu); 而现在可以写成这样子： Va...
前言：微信小程序中经常需要用到this.setData({})把变量值渲染到视图层，那到底什么是this.setData，如何使用？需要注意哪些？作为一个初学者，分享一点我的经验，希望大家批评指正。介绍：setData函数主要用于将逻辑层数据发送到视图层，同时对应的改变this.data.x的值。参数：Object 以 key : value 的形式表示，将 this.data 中的 key 对应的值改变成 value。 使用：先给出代码，wxss没有什么意义就不贴了 index.wxml<view clas...
本文实例讲述了vue-router两种模式区别及使用注意事项。分享给大家供大家参考，具体如下：Vue Router 是Vue官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。vue-router 默认 hash 模式，还有一种是history模式。 hash模式 hash模式的工作原理是hashchange事件，可以在window监听hash的变化。我们在url后面随便添加一个#xx触发这个事件。window.onhashchange = function(event){console.log(event);}...
在面对单个组件逻辑复杂需要拆分时，难免会遇到父子组件之间数据传递的问题。那么我们来了解一下在父子组件之间进行数据传递时需要遵循哪些约定，以及要注意哪些问题。 如何传递 父组件向子组件在进行传递时，使用的是 prop 特性进行传递。 约定 老规矩， 在使用前我们首先了解应该怎么使用，有哪些约束条件： 子组件的 props 中定义要传递的变量名变量名同组件的命名规范父组件传值时，需要使用 短横线分隔命名使用 v-bind 进行传...
本文实例讲述了javascript function(函数类型)使用与注意事项。分享给大家供大家参考，具体如下： 在ECMAScript中，Function(函数)类型实际上是对象。每个函数都是Function类型的实例，而且都与其他引用类型一样具有属性和方法。由于函数是对象，因此函数名实际上也是一个指向函数对象的指针。 学习要点：1.函数的声明方式 2.作为值的函数 3.函数的内部属性 4.函数属性和方法一．函数的声明方式 1.普通的函数声明 function box(num...
有一句话叫“前人栽树后人乘凉”，还有一句话叫“如果说我看得比别人更远些，那是因为我站在巨人的肩膀上”。前一句是国人的俗语，后一句是那个发现了“万有引力”定律的牛顿说的。为什么要引用这两句呢？是因为我刚开始用vue的时候，使用的是vue-cli来搭建vue项目，快速又好用；我刚开始用react的时候，使用的是create-react-app来搭建react项目，方便又省事。使用这些已有的脚手架来搭建项目，无可厚非，对于新手来说，也确实能快...
1. 使用name和params组合传参 this.$router.push({name: details, params: {id: 233}})路由配置 import Vue from vue import Router from vue-routerVue.use(Router)export default new Router({mode: history,routes: [{path: /details,name: details,component: resolve => require([../components/details], resolve)}] })获取参数 this.$route.params.id // 233 刷新参数丢失 显示 undefined this.$route.params.id // undefin...
1.少用全局变量 原因：因为作用域链是一个堆栈的结构，所以遵循先进先出的原则，而javascript引擎在解析代码的时候，将全局对象放在栈底，然后向上依次出现的是不同作用域的活动对象（这些活动对象除了闭包没有相互依赖的关系），所以在查找变量的时候会从该活动对象开始，然后是闭包它的活动对象，最后是全局对象，如果全局变量过多就会影响获得变量时的速度，所以不要过多使用全局变量。 2.尽量使用局部变量封装全局变量 原因：正...
1如何引入组件库有两种方法 1 npm下载 2 下载代码，下面介绍第二种方法。在gitHub上， 链接如下 https://github.com/youzan/vant-weapp 首先在自己项目目录static下新建一个vant文件夹，用于存放组件文件，把dist文件夹下的所有文件拷贝到static下面的vant目录下，如下所示：2 如何使用1 在需要使用组件的页面所在的文件夹下新建一个页面main.json， （新建页面后必须npm run dev 才能生效）在其中引入相应的组件即可，如下图所示...
elementUI select组件使用详解 动态生成option选项option选项绑定对应的文本值和value值作为表单项目，新增、编辑功能对选项改变后触发相关事件<div id="app"><el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm"><el-form-item label="姓名选择" prop="typeId"><el-select v-model="form.typeId" placeholder="请选择" @change="change"><el-option v-for="item in items" :label="item.name" :value="...
select组件的使用方式就不细说，可查看select组件使用方式 主要要说一下注意事项：select组件可以动态生成option选项，option选项绑定对应的文本值和value值。有时候我们发现 默认显示的内容会显示具体的value值而不是对应的文本，这种情况原因都是：v-model绑定的值与option选项value值类型不符，常规就是number与string 通用我们会循环一个数组、对象生成option选项 1.简单数组 const array1=[1,2,3]<el-select v-model="seletV...
前言 最近在用vue做移动端项目，网上找了一些移动端适配的方案，个人觉得手淘团队flexible.js还是比较容易上手，在这里做下总结。 主体 flexible.js适配方案采用rem布局，根据屏幕分辨率大小不同，调整根元素html的font-size，从而达到每个元素宽高自动变化，适配不同屏幕 1.安装lib-flexible.js npm install lib-flexible --save 1.在项目入口文件main.js中引入lib-flexible import 'lib-flexible/flexible' 通过要以上两步，就完...
独立完成一个移动端项目(不是很明白为何会有这样的商品管理后台)，还是有些经验不足，包括对产品的全局思考，对插件的选择等，都有考虑不周的缺点，导致自己中途想换图形界面插件，浪费了点时间，这里记录下，总结下经验，理一下思路。 1.对于项目的一些心得与体会 首先的一点，就是，对于图形界面框架的选型，这个很重要，对于一项目来说，开始动手前就要对项目的设计图有个完整的了解，以便于自己选择插件或者框架； 然后就是，对...
一般情况下，我们不用担心所使用的第三方库，在npm管理仓库中找不到。 如果需要某一个库，如：jquery，可以直接运行npm install jquery脚本命令来安装这个项目所需要的依赖； 然后，在使用jquery的模块文件中，通过import $ from 'jquery'或者var $ = require('jquery')来引入。 这是常用的在webpack构建的项目中引入第三方库的方式。 注：为了更好的演示示例代码，示例是在nodemon这篇文章的基础上操作的。 但是，在不同的场景下，...