Vue
letMeAlone_
坚持走自己的路,不被表象所迷惑,基础才是根本,沉淀才是正道,不幸并不是我的全部,珍惜眼前
展开
-
Vue- 对象语法 v-bind:class与对象语法的使用(重要)
我们可以传给 v-bind:class 一个对象,以动态地切换 class 。div v-bind:class="{ active: isActive }">div>//对象语法也就是在v-bind:class绑定一个对象的时候,里面的值将影响最终取值,//比如如果 这里isActive的值为true 则会被渲染成class='active' 如果为false , 则原创 2017-02-28 16:56:54 · 38707 阅读 · 4 评论 -
vue-事件修饰符和按键修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点,但更好的方式是:methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。 为了解决这个问题, Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。.prevent原创 2017-04-25 22:29:42 · 10076 阅读 · 0 评论 -
VUE 无法获取在P标签子元素下用Mustache写法 {{}}来显示数据的BUG
例子:<p id='a'><div>{{data}}</div><p> <script type="text/javascript"> var vm=new Vue({ el:'#a', data:{ data:'a' }原创 2017-05-18 18:15:05 · 2276 阅读 · 0 评论 -
VUE框架 导致绑定事件的阻止冒泡失效
前面遇到了一个问题就是VUE框架内部做了一些处理,使得在我们通过v-for渲染DOM的时候添加新元素的时候,绑定事件也能对新增的元素有效。而这次遇到的问题则是,原本绑定事件中(该函数没有写在vue实例的methods中),导致阻止冒泡事件失效了。无论是return false 还是event.stopPropagation();都无效。此时需要通过用VUE提供了事件修饰符来处理,比如阻止事件冒泡@c原创 2017-08-17 18:16:31 · 5540 阅读 · 0 评论 -
Vue数组为何没办法被监测变动?
Vue.set全局操作是为了更新数据而提供的,这个操作主要是针对某些情况而使用 注意事项 由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如: vm.items.length = newLength 为了解决第一类问题,以原创 2017-08-29 09:31:17 · 8699 阅读 · 4 评论 -
Vue-组件props属性再回顾
组件有自己独立的作用域!如果需要传递参数进入组件。需要通过props属性来声明。 <input v-model="newTodoText" v-on:keyup.enter="addNewTodo" placeholder="Add a todo" > <li is="to原创 2017-03-06 23:24:40 · 1860 阅读 · 0 评论 -
Vue组件中data选项为什么必须是函数
官方解释 data 必须是函数 构造 Vue 实例时传入的各种选项大多数都可以在组件里使用。只有一个例外:data 必须是函数。实际上,如果你这么做:Vue.component('my-component', { template: '<span>{{ message }}</span>', data: { message: 'hello' }}) 那么原创 2017-10-28 10:55:25 · 4845 阅读 · 2 评论 -
Vue 父组件和子组件之间的双向数据流动 .sync【版本需要2.3.0+】
<head> <meta charset="UTF-8"> <title></title></head><body> <div id="test"> <my :foo.sync='msg'></my> <!--@update:foo='val=>msg=val'--> {{msg}} </div> <script原创 2017-11-01 17:37:46 · 1019 阅读 · 0 评论 -
Vue 事件修饰符.self的用法
<!-- 阻止单击事件冒泡 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联 --><a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 --><form v-on:s原创 2017-10-26 15:22:13 · 8654 阅读 · 2 评论 -
vue-cli构建项目
安装vue-cli – npm install vue-cli -g初始化项目 – vue init webpack vuecliTest //webpack是vue提供的五种模板中的一种,vuecliTest是项目名,他会在你当前所在目录下创建与项目名一致的文件夹 在实际开发中,一般我们都会使用webpack这个模板,那我们这里也安装这个模板,在命令行输入以下命令: 输入命令原创 2017-11-30 14:31:07 · 417 阅读 · 0 评论 -
Vue 数组检测 filter
example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/)})//其中匿名函数中的参数名是随意的,它用于代替数组中的某个值,这里要说明的是,官方提供的包括 push() pop() shift() unshift() splice() sort() revers原创 2017-04-24 23:26:50 · 5917 阅读 · 0 评论 -
Vue input控件通过value绑定动态属性及修饰符
对于单选按钮,勾选框及选择列表选项, v-model 绑定的 value 通常是静态字符串(对于勾选框是逻辑值):<!-- 当选中时,`picked` 为字符串 "a" --><input type="radio" v-model="picked" value="a"><!-- `toggle` 为 true 或 false --><input type="checkbox" v-model=原创 2017-05-02 23:49:16 · 63074 阅读 · 0 评论 -
Vue-不允许嵌套式的渲染
意思如下:id="app">//这里作为第一个vue对象 {{ todo.text }} id='con' v-on:click='show_console'>console//这里为第二个对象,在以下js代码不变的情况下,Vue是异常的。它不允许“嵌套式”写法,如果你想把它们分别创建一个对象的话。Vue无法识别内部,在此处也就是id='con'的正原创 2017-02-22 17:36:54 · 1943 阅读 · 0 评论 -
vue-属性与方法
每个Vue实例都会代理其data对象里面的所有属性:var mydata= { a: 1 }var vm = new Vue({ el: '#example', data: mydata})vm.a===mydata.a // ---->true因为其响应式,无论是改变vm.a还是mydata.a,他们的值都会一起改变,但是!如果某属性是在创原创 2017-02-22 22:14:34 · 7000 阅读 · 0 评论 -
Vue- v-html指令
双大括号的数据绑定写法{{ }}会被VUE当成纯文本输出,为了能够输出HTML,需要用到V-HTML指令{{message}}在这个指令下数据绑定会被忽略,而被当成HTML注意,你不能使用 v-html 来复合局部模板,因为 Vue 不是基于字符串的模板引擎。组件更适合担任 UI 重用与复合的基本单元(这句话暂时不知道什么意思)如果尝试在v-ht原创 2017-02-23 11:17:54 · 15965 阅读 · 0 评论 -
Vue- 动态元素属性及v-bind和v-model的区别
属性Mustache (双大括号写法)不能在 HTML 属性中使用,应使用 v-bind 指令:div v-bind:id="dynamicId">div>这对布尔值的属性也有效 —— 如果条件被求值为 false 的话该属性会被移除:button v-bind:disabled="someDynamicCondition原创 2017-02-23 11:39:05 · 20794 阅读 · 0 评论 -
Vue - 过滤器
Vue 允许自定义的过滤器过滤器Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化。过滤器应该被添加在 mustache 插值的尾部,由“管道符”指示:{{ message | capitalize }}//capitalize需要在Vue实例中自定义{{ message | capitalize }}div转载 2017-02-23 17:55:03 · 904 阅读 · 0 评论 -
VUE-计算属性 vs Watched Property
Vue.js 提供了一个方法 $watch ,它用于观察 Vue 实例上的数据变动。当一些数据需要根据其它数据变化时, $watch 很诱人 —— 特别是如果你来自 AngularJS 。不过,通常更好的办法是使用计算属性而不是一个命令式的 $watch 回调。思考下面例子:div id="demo">{{ fullName }}div>原创 2017-02-24 13:42:18 · 2238 阅读 · 0 评论 -
Vue- 组件与props属性的用法
Vue.component('tree', {//注册组件 template: 'This is a tree!'//定义组件,这里一般会在把数据分离出来,用另外一个参数来代替,如下---------------/*Vue.component('todo-item', { props: ['todo'], template: '{{ todo.text }}'})*/---转载 2017-02-22 18:22:45 · 21956 阅读 · 0 评论 -
vue-提示warning
[Vue warn]: Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>.出现这个警告的原因可能是你新建VUE实例的代码放在了被绑定的组件当中比如<div id='l原创 2017-04-10 14:49:28 · 8719 阅读 · 0 评论 -
Vue-component全局注册
组件的全局注册必须注意是在实例化对象之前完成。Vue.component("mytest",{ template:'<li>{{name}}</li>', props:['name']})new Vue({//...})而局部注册则只能在父模板内使用 <div id="clear" ><mytest v-for='li in list' v-bind:name原创 2017-04-17 23:00:47 · 2785 阅读 · 0 评论