weixin_41796631的博客

原创 vue $on 和 $emit 一起使用：监听自定义事件--》触发自定义事件--》触发监听结果

$on 和 $emit 一起使用$on：监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。$emit：触发当前实例上的事件。附加参数都会传给监听器回调。例子解析：1. $on 监听自定义事件要在事件执行前被监听。所以例子中在生命周期 beforeCreate 就开始了监听自定义事件 "start"。2. 在method...

原创 vue 依赖注入：provide、inject 祖先组件和后代组件的数据传输

用法：允许一个祖先组件向其所有子孙后代注入一个依赖 。也就是说，祖先组件可以用 provide 给后代组件提供一些数据；后代组件可以使用 inject 接受祖先组件提供的数据 provide：inject：...

原创 访问元素和组件：$root 访问根实例、$parent 父组件、ref 子组件

这里介绍的方法可以访问（获取、修改）到根实例、父组件、子组件里面的数据。因为使用这些方法，可能造成难以排查到数据在哪里修改，所以慎用这些方法。1. 访问根实例: $root这里创建一个根实例 new Vue({ el:"#app", data: { foo: 1 }, computed: { bar: function () { /* ... */...

原创 <component>内置组件 + v-bind: is：实现动态组件

 &lt;component&gt; 元素是vue 里面的一个内置组件。在&lt;component&gt;里面使用 v-bind: is，可以实现动态组件的效果。例子解析：下面例子创建一个包含多个子组件的 vue 实例。1. vue代码部分：新建 vue 实例 "app"，这个实例的 components 里面，有3个组件，这些组件都有各自的模板。分别是 acomp...

原创 keep-alive 内置组件元素：保留组件状态或避免重新渲染

原创 slot-scope：作用域插槽特性：子组件传递数据给父组件

1. 插槽的作用：如果没有在组件模板中放置插槽&lt;slot&gt;，则在html 代码中组件自定义元素之间的内容将不显示;如果在组件模板中设置插槽&lt;slot&gt;，则相当于，在组件中提前预留了位置，给在html 代码中组件自定义元素之间的内容放置。即使vue 组件被封装好了不再改动，也可以在html 层面上，在自定义元素之间增加内容或者设置样式等操作。详见：插槽的作用...

原创 在组件上使用 v-for：利用 props 传递数据（父组件传入子组件）

不使用组件的v-for 和 使用组件的 v-for 区别：1. 可重复使用性：组件是可以重复使用模板； 2. 触发事件的方法：组件模板元素触发事件需要用 $emit，把自定义事件发射到html 层面上，html 再通过绑定自定义事件和实例中的函数将其触发； 而不使用组件时，直接可以在html 元素上通过v-on 绑定原生事件和实例中 （data、methods、comput...

原创 ul、ol、table、select 元素使用"is"特性：约束元素不能直接使用组件

说明： 由于DOM元素模板限制，&lt;ul&gt;、&lt;ol&gt;、&lt;table&gt;、&lt;select&gt; 这些元素内部只能使用&lt;li&gt;、&lt;tr&gt;、&lt;option&gt;元素。如果在&lt;ul&gt;、&lt;ol&gt;、&lt;table&gt;、&lt;select&a

转载 <component>加上 "is"：动态组件用法（可以切换多个模板的组件）

在我们平时使用vue中的模板的时候，许多时候都是直接定义成一个固定的模板，但是，vue中提供了一个动态模板，可以在任意模板中切换，就是用vue中&lt;component&gt;用:is来挂载不同的组件。&lt;div id="app" v-cloak&gt; &lt;component :is="currentView"&gt;&lt;/component&gt;...

原创 slot 用法（2）：编译作用域

html 代码部分&lt;div id="div"&gt;&lt;comp&gt;插槽访问数据属性：{{like}}&lt;/comp&gt; &lt;/div&gt;组件代码部分Vue.component('comp', { ... }, template:` &lt;p&gt;这里是模板中的p元素&lt;br&gt;&lt;br&g

原创 slot 默认值使用

html 代码部分Vue.component('adiv', { ... }, template: `&lt;div&gt;这个黄色区域是模板里的 div元素&lt;br&gt;&lt;br&gt; &lt;button&gt;&lt;slot&gt;用slot的默认值&lt;/slot&gt;&lt;/button&gt;

原创 <slot>插槽详细用法（1）不具名和具名插槽

//html 部分代码&lt;div id="div"&gt;&lt;adiv v-bind:style="componStyle" &gt;&lt;button&gt;这是一个按钮&lt;/button&gt;&lt;p&gt;这是一个没绑定slot的段落&lt;/p&gt; &lt;/adiv &gt; &lt;/div&am

原创 <slot>插槽： 可指定包含组件内部位置的哪些内容

插槽内容： 更多内容详见：&lt;slot&gt;插槽详细用法当组件渲染的时候，这个 &lt;slot&gt; 元素将会被替换为“Your Profile”。  具名插槽：可使用于&lt;template&gt;元素或普通 html 元素作用：&lt;slot&gt; 元素中使用 "name" 属性，区分多个插槽，便于同时使用多个插槽。html 代码：...

原创 $emit(update: prop, "newPropVulue") /.sync 修饰符:子组件向父组件传达：更新属性

$emit(update: prop, "newPropVulue")  这个模式，使子组件向父组件传达：更新属性，并抛出新的属性值.sync 修饰符 是以上模式的简写$emit(update: prop, "newPropVulue")  模式：用 title 举例：在声明了 title 这个 prop 的子组件中，创建一个方法， 使用 this.$emit('update...

原创 $event ：父组件获取子组件 $emit(event, args) 抛出的值 args

1.子组件用  $emit(event, args) 方法，触发event ，抛出一个 arg参数2. 父组件监听这个事件，然后可以通过 $event 访问到 子元素抛出的 args 这个参数  如果这个事件处理函数绑定的是一个方法，那么子元素利用 $emit 抛出的参数将会作为第一个参数传入这个方法比如这里的父元素把自定义事件 enlarge-text 和 "onE...

原创 vue 组件中的 model: 允许自定义组件在使用 v-model 时定制 prop 和 event

&lt;my-checkbox v-model="foo" value="some value"&gt;&lt;/my-checkbox&gt;Vue.component('my-checkbox', {  model: {    prop: 'checked',    event: 'change'  },})Vue.component('my-checkbox',...

转载 js es6 语法: => 函数简化为箭头符号

=&gt;是es6语法中的 arrow function(x) =&gt; x + 6相当于function(x){ return x + 6;}; 详见：js(=&gt;) 箭头函数 详细解说 案例大全

原创 checkbox (input) 选择框元素的 checked 和 value 属性

&lt;input type="checkbox"/&gt; 选择框元素的 checked 和 value 属性：checked 属性设置或返回 checkbox 是否应被选中。语法checkboxObject.checked=true|false 返回布尔值说明该属性保存了 checkbox 的当前状态，不管何时，这个值发生变化的时候，onclick 事件句柄就会触发（...

原创 <label> 元素：可以绑定 input 元素

&lt;label&gt;定义和用法&lt;label&gt; 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。&lt;label&gt; 标签的 for 属性应当与相关元素的 id 属...

原创 $listeners属性：包含了组件的所有监听器。可直接绑定在组件子元素

&lt;base-input&gt; &lt;/base-input&gt; 是一个组件。用 .native 修饰符 可以把 "focus" 这个原生事件绑定在这个组件上。但是，如果组件的根元素不能使用 " focus " 事件时，这个绑定会失效。（比如这个组件的父元素是 &lt;label&gt; &lt;/label&gt; , 子元素是 &lt;input&gt; &am

原创 $emit( ) 触发组件（自定义元素）当前实例的事件

$emit(event, args )参数：event：事件名args：事件相关参数用法：触发当前实例上的事件。附加参数都会传给监听器回调。在组件模板中，不能直接通过 v-on 绑定触发 vue 实例中的方法，而需要先使用$emit( ) 绑定自定义事件，把自定义事件发射出去（发射到html 层面）；然后在html 层面，组件自定义元素上，绑定自定义事件和vue ...

转载 单/双引号多次嵌套问题的两种解决方案：转义和es6模板字符串

JS中：双引号内不能包含双引号，单引号内不能出现单引号。如果遇到多次嵌套时，有以下两个解决方案：1.使用转义符号“\”转义template:'&lt;div @click="school=\'home\'"&gt;组件一 {{school}}&lt;/div&gt;',2.使用es6模板字符串“``”template: ` &lt;div @click="school='hom...

原创 jq .on( ) 给元素绑定一个或多个事件

语法：$(selector).on(event,childSelector,data,function)作用：方法在被选元素及子元素上添加一个或多个事件处理程序。自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。...

转载 JS .removeEventListener( ) 移除由 addEventListener() 方法添加的事件句柄 (解除事件监听)

语法：element.removeEventListener(event, myFunction)注意：兼容： IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:element.attachEv...

转载 JS .addEventListener( ) 事件监听器：监听元素的事件，并设置事件发生时触发的函数，以及事件流（冒泡、捕获）

为什么使用事件监听？当同一个对象使用.onclick的写法触发多个方法的时候，后一个方法会把前一个方法覆盖掉，也就是说，在对象的 onclick事件发生时，只会执行最后绑定的方法。而用事件监听则不会有覆盖的现象，每个绑定的事件都会被执行。用.addEventListener( ) 可以为元素绑定多个事件，而且每个事件都可以被执行，实现事件监听。语法：Element.add...

转载 JQ .siblings( ) 返回元素的同胞元素

用法：返回元素的同胞元素。参数是选择器，也就是说，参数可以是先经过一定的筛选条件后的元素。selector 字符串值，包含用于匹配元素的选择器表达式。 &lt;ul&gt; &lt;li&gt;list item 1&lt;/li&gt; &lt;li&gt;list item 2&lt;/li&gt; &lt;li class="third-item"&gt

转载 JS event.target 返回触发事件的当前元素

定义和用法：target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。&lt;script type="text/javascript"&gt;function getEventTarget(event) { x=event.target; alert("点击事件的元素的id是 " + x.id); }&lt;/scri...

转载 vue 传递 静态或动态 props

传递静态props新建vue 组件 &lt;blog-post&gt;。然后直接定义title 的值"My journey with Vue"&lt;blog-post title="My journey with Vue"&gt;&lt;/blog-post&gt;也可以通过 v-bind 绑定属性，然后传入值&lt;blog-post v-bind:title="pos...

原创 Object.defineProperties 添加一个/多个属性到对象；修改已有属性

语法：object.defineProperties(object, descriptors)作用：除了可以用构造函数和字面量的方式为对象设置属性，也可以使用 object.defineProperties来添加/设置对象属性。参数：object必需。 对其添加或修改属性的对象。  这可以是本机 JavaScript 对象或 DOM 对象。  descriptors...

转载 v-model 修饰符：.lazy .number .trim

#.lazy 延迟同步值 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change事件进行同步：&lt;input v-model.lazy="text"  /&gt;&lt;div id="div"&gt;&lt;input v-model.lazy="t...

原创 vue v-model 双向绑定表单元素的数据：实质是绑定了value、checked、selected属性

用法：可以用 v-model 指令在表单 &lt;input&gt;、&lt;textarea&gt; 及 &lt;select&gt; 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。v-model 忽略所有表单元素的 val...

原创 vue props (组件自定义特性) 介绍 【草稿】

定义：Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。1. 用 prop 向子组件传递数据 &lt;div id="div" &gt;&lt;food&gt;&lt;/food&gt;&lt;/div&gt;&lt;script&gt;Vue.component('food', { ...

原创 JS 中构造函数和普通函数的区别

1、构造函数也是一个普通函数，创建方式和普通函数一样，但构造函数习惯上首字母大写2、构造函数和普通函数的区别在于：调用方式不一样。作用也不一样（构造函数用来新建实例对象）3、调用方式不一样。     a. 普通函数的调用方式：直接调用 person();      b.构造函数的调用方式：需要使用new关键字来调用 new Person();4、构造函数的函数名与...

原创 object.prototype.name=value 为JS对象添加属性

语法 object.prototype.name=value用法向对象添加属性和方法。&lt;script type="text/javascript"&gt;function Person(name,job,age){ this.name=name; this.job=job; this.age=age; this.sayHi...

原创 JS instanceof 检测对象的

instanceof 运算符用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置用法：boolean result = object instanceof class参数：Result：布尔类型。Object：必选项。任意对象表达式。Class：必选项。任意已定义的对象类。说明：如果 object 是 class 的一个实例，则 insta...

转载 JS新建数组的方法

1、采用直接量创建var arr = []; //创建一个空数组var arr2 = [1,2,3]; //创建一个有三个元素的数组2、采用构造函数创建a、var arr1 = new Array(); //创建空数组b、var arr2 = new Array(10)；//创建一个长度为10的数组c、var arr3 =  new Array(5,4,3,2,1); //...

原创 vue 组件 Vue.component 用法

定义：组件是可复用的 Vue 实例，且带有一个名字可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用1. 定义一个新组件。命名为 counter格式：1.组件名为"conter";2.data 数据属性：写函数;3.template 模板：写组件的内容（元素和触发的事件）Vue.component("counter",...

原创 v-for 和 v-if 并用时筛选条件方法

 &lt;ul id="ul"&gt;&lt;li v-for="todo in todos" v-if="todo&lt;4"&gt; {{ todo }}&lt;/li&gt;&lt;/ul&gt;&lt;script&gt; varvm=new Vue({el:"#ul",data:{ todos:

转载 一段取值范围的 v-for

&lt;div&gt; &lt;span v-for="n in 10"&gt;{{ n }} &lt;/span&gt;&lt;/div&gt; 

原创 vue filter( ) 过滤数组方法

要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据（非变异方法）。可以使用filter( ) 方法。&lt;div id="div"&gt; &lt;li v-for="n in evenNumbers"&gt;{{ n }}&lt;/li&gt;&lt;/div&gt;&lt;script&gt;varvm=new Vue({el:"#div&qu