;

<div id="app"> <navbar></navbar> <pagefooter></pagefooter> </div> Vue.component(‘navbar’,{ template:’#navbar’, data:function () { return { navs:[] } } }); Vue.component(‘pagefooter’,{ template:’#pagefooter’, data:function () { return { footer:” } } }); new Vue({ el:’#app’, mounted:function () { //ready, //这里怎么直接访问navbar的navs和pagefooter的footer值呢, } }) 这就用到ref了 修改组件 <div id="app"> <navbar ref="navbar"></navbar> <pagefooter ref="pagefooter"></pagefooter> </div> new …

vue中ref介绍 10 天前
;

问题描述: ajax返回一个对象数组,页面内通过v-for输出,但是每个循环元素内要添加一个input输入框 提交时候,需要连同input值一起提交 初期思路 步骤: 1.直接对ajax返回的json对象数组通过for循环追加属性, 2.data变量在渲染以后结构发生变化,如何取值 解决方法: 1.ajax返回的结果先赋值给临时变量temp 2.通过for循环给temp数组内的对象添加新属性result 3.把temp赋值给projectList 表单提交时候: 通过 document.querySelectorAll(“.rusult_input”);获取到追加input的值,通过for再循环赋值 尝试改进: 1.用map函数处理数据 data.map(function(item){ item.show = false; }); 2.数据在created钩子中请求及追加 用map函数追加属性 getinfoList(){ this.$ajax.get(‘/service/check/15/LABS_CHECK?pageSize=1000’) .then((res)=>{ this.infoList=res.data.body.list; this.infoList.map(function(item){ if(…

对通过ajax返回的对象数组追加input并提交 10 天前
;

1.echarts 报错 ‘There is a chart instance already initialized on the dom’ 在mounted里初次加载,然后在watch里监听数据变化, 两个事件内分别写上echarts.init就会有此警告 解决办法:data部分定义组件全局变量myCharts, 只在mounted内初始化:this.myCharts=echarts.init(document.getElementById(‘myCharts’)); 两个地方分别 setOption 2.JS空格报错 这是 ESLint,用来规范代码风格的 找到build文件夹下面的webpack.base.conf.js文件 找到rules部分 loader:’eslint-loader’ 注释之

vuejs问题总结(三):各种报错整理 14 天前
;

1.组件引用 <template> <div class="content"> <h1>title</h1> <subcontent class="subcontent_style"></subcontent> </div> </template> <script> import lifeChart from ‘@/components/sub/subcontent’ export default{ name:’content’, data(){ return{} }, components:{ ‘lifeChart’:lifeChart }, methods:{} } </script> 2.组件内mounted,watch 如何调用methods中的方法 mounted() { this.getchart(); }, watch:{ searchchart:’getchart’ }, methods:{ getchart:function(){} } 3.vue中透明蒙层点击空白处关闭 <div class="mask" @click.self=&quot…

vuejs问题总结(二):组件内各种方法 14 天前
;

npm安装模块 npm install xxx //利用 npm 安装xxx模块到当前命令行所在目录; npm install -g xxx //利用npm安装全局模块xxx; 本地安装时将模块写入package.json中: npm install xxx //安装但不写入package.json; npm install xxx –save //安装并写入package.json的”dependencies”中; npm install xxx –save-dev //安装并写入package.json的”devDependencies”中。 npm 删除模块 npm uninstall xxx //删除xxx模块; npm uninstall -g xxx //删除全局模块xxx; 后记: 1.uninstall卡死 直接删除 node_modules文件夹,然后修改package.json,然后重新npm install

npm常用命令 16 天前
;

普通函数中的this: 1. this总是代表它的直接调用者, 例如 obj.func ,那么func中的this就是obj 2.在默认情况(非严格模式下,未使用 ‘use strict’),没找到直接调用者,则this指的是 window 3.在严格模式下,没有直接调用者的函数中的this是 undefined 4.使用call,apply,bind(ES5新增)绑定的,this指的是 绑定的对象 箭头函数中的this 默认指向在定义它时,它所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window 要整明白这些, 我们需要首先了解一下作用域链: 当在函数中使用一个变量的时候,首先在本函数内部查找该变量,如果找不到则找其父级函数, 最后直到window,全局变量默认挂载在window对象下 1.全局变量默认挂载在window对象下 <script> var aa = 2; alert(window.aa); (function () { aa = 3; })(); alert(window.aa); </script> 我们仅仅声明了一个全局变量aa,但是打印出window.aa却和aa保持一致,为什么呢? 眼见为实, 我们使用 console.dir(window) …

深入理解ES6箭头函数的this 17 天前
;

★概述: 使用对象字面量,或者向空对象中动态地添加新成员,是最简单易用的对象创建方法。然而,除了这两种常用的对象创建方式,JavaScript还提供了其他方法创建对象。 ★使用工厂函数创建对象 我们可以编写一个函数,此函数的功能就是创建对象,可以将其称为“对象工厂方法”。 ★ 定义对象“构造”函数 注意点:对象构造函数首字母大写;内部使用this关键字给对象添加成员;使用new关键字调用对象构造函数 ★ 对象的constructor属性 使用对象构造函数创建对象,每个对象的constructor属性都会引用这个构造函数;如下图示, 使用对象工厂函数创建对象,每个对象的constructor属性引用Object();如下图示, ★ 以 普通方式调用的“构造函数” 构造函数其实也是一个函数。不同之处在于调用它时,必须加一个“new”关键字,如果不加这个关键字,则对它的调用被认为是普通函数调用。 注意,这里的普通调用构造函数,在输出window.name是输出以当前的普通调用函数值。不理解的话,看图吧。 对象构造函数与对象工厂方法的区别 1.对象构造函数中没有显示的对象创建代码; 2.新对象应具备的属性与方法通过this引用添加的; 3.对象构造函数中没有return语句; 4.通常会把对象构造函数的首字母设置为大写的,以区别普通函数。 来源:ht…

对象工厂函数与构造函数 17 天前
;

1.vue中for内变量作用域 var obj={}; for(var i=0;i<length;i++){ obj.id=fileList[i].response.body.id; obj.type=’DOM’; obj.zindex=”; this.CrudeImg[i]=obj; }; 两种写法obj作用域不同 for(var i=0;i<length;i++){ var obj={}; obj.id=fileList[i].response.body.id; obj.type=’DOM’; obj.zindex=”; this.CrudeImg[i]=obj; };

vuejs问题总结(四):疑问 19 天前
;

1.camelCase vs. kebab-case HTML 特性是不区分大小写的。所以,当使用的不是字符串模板时,camelCase (驼峰式命名) 的 prop 需要转换为相对应的 kebab-case (短横线分隔式命名): Vue.component(‘child’, { // 在 JavaScript 中使用 camelCase props: [‘myMessage’], template: ‘<span>{{ myMessage }}</span>’ }) <!– 在 HTML 中使用 kebab-case –> <child my-message="hello!"></child> 如果你使用字符串模板,则没有这些限制(字符串模板就是,模板不含数据,为静态内容)。 2.把一个对象的所有属性作为 prop 进行传递 可以使用不带任何参数的 v-bind (即用 v-bind 而不是 v-bind:prop-name)。例如,已知一个 todo 对象: todo: { text: ‘Learn Vue’, isComplete: false } 然后: <todo-item v-bind="todo"></to…

vuejs问题总结(一):注意事项 21 天前
;

DI / 双向数据绑定中: 用户 -> 内存 : 浏览器提供有User Event触发事件的API,如click,change…等等等; 内存 -> 用户: 浏览器并没有提供数据监测的API,故任何内存数据变动(定时、异步请求、事件触发…导致的数据变动)都无法被Listen,自然也就没办法再处理callback了; 但我们可以基于这些大部分能够产生数据变动的事件进行封装(如:click、mouse-enter、Timeout…),在每次事件发生后,执行完事件后,检查一遍数据的变化,如果数据和上次的值有变化,则执行这个值(注册时)对应的callback(框架中),这个callback可能是view层的一个数据展现,也可能是一段处理function; 在检查数据变化的时候,由于你并不知道这个事件是对哪些数据进行了更改,以及这个事件有可能造成事件之外的其他任何地方的数据更改,所以必须进行一次大检查,将所有“注册”过的值全部检查一遍,一次检查称为一个周期,每次最少检查两遍,因为第二遍用来确认,前一遍的变动中是否有数据的变动,导致了其他数据的变动,如果第二次有变动的话,会再执行一遍,直到最后两次完全一致,则停止检查(其实就是个(递归(遍历))的过程),考虑到内存的消耗和死循环的风险,脏检查每个周期最多递归执行10遍,…

angular的脏检测 27 天前
;

Object.defineproperty语法 在一个对象上定义新的属性 var o = {}; // 创建一个新对象 // Example of an object property added with defineProperty with a data property descriptor Object.defineProperty(o, "a", {value : 37, writable : true, enumerable : true, configurable : true}); // 对象o拥有了属性a,值为37 // Example of an object property added with defineProperty with an accessor property descriptor var bValue; Object.defineProperty(o, "b", {get : function(){ return bValue; }, set : function(newValue){ bValue = newValue; }, enumerable : true, configurable : true}); o.b = 38; 数据和视图联动 给对象o定义…

Object.defineproperty实现数据和视图的联动 28 天前