Vue
本专栏是摘自vue官网,整理了官网的一些案例
易辰_
当你的能力撑不起你的野心的时候,你就静下心来努力学习
展开
-
vue学习十八(axios)
文章目录安装get方法post方法批量请求后端代码安装通过npm install axios安装或者直接用cdn <script src="https://unpkg.com/axios/dist/axios.min.js"></script>get方法我们来测试下get方法,这里我利用了cdn的方式<!DOCTYPE html><html ...原创 2018-10-15 17:10:06 · 502 阅读 · 0 评论 -
vue学习十七(vue-resource使用)
文章目录前端代码后端代码(处理跨域)Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery。vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的A...原创 2018-10-15 12:07:51 · 369 阅读 · 0 评论 -
vue学习十六(vuex)
文章目录概念实例概念Vuex是用来管理组件之间通信的一个插件state:用来存放组件之间共享的数据。他跟组件的data选项类似,只不过data选项是用来存放组件的私有数据。getters:有时候,我们需要对state的数据进行筛选,过滤。这些操作都是在组件的计算属性进行的。如果多个组件需要用到筛选后的数据,那我们就必须到处重复写该计算属性函数;或者将其提取到一个公共的工具函数中,并将公共函...原创 2018-10-08 17:56:12 · 323 阅读 · 0 评论 -
vue学习十五(props解耦、props 布尔-对象-函数三种模式)
文章目录$route耦合props解耦props 布尔模式props对象模式props函数模式$route耦合在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。<!DOCTYPE html><html lang="en"><head> <meta charset="U...原创 2018-10-08 11:39:57 · 5091 阅读 · 1 评论 -
vue学习十四(嵌套路由、命名路由、命名视图、重定向)
文章目录嵌套路由命名路由命名视图嵌套路由&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&am原创 2018-09-30 17:52:57 · 784 阅读 · 0 评论 -
vue学习十三(VueRouter起步、动态路由参数匹配、获取、监测变化(测试无效))
文章目录起步动态路由参数匹配动态路由参数获取响应路由参数的变化(测试失败)起步路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容。Home按钮 => home 内容, about按钮 => about 内容,也可以说是一种映射. 所以在页面上有两个部分,一个是点击部分,一个是点...原创 2018-09-30 14:22:53 · 877 阅读 · 2 评论 -
vue学习十二( v-model用于自定义组件、父子组件通信、组件绑定原生事件、具名插槽、插槽作用域、动态组件is和keep-alive)
文章目录自定义组件的 v-model子组件跟父组件通信将原生事件绑定到组件单个插槽自定义组件的 v-model一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突 &amp;amp;lt;div id=&amp;quot;lll&amp;quot;&amp;amp;gt;原创 2018-09-29 17:39:45 · 1214 阅读 · 0 评论 -
vue学习十一(全局局部组件、prop传不同值、 v-bind 动态赋值、单向数据流、prop校验)
文章目录局部注册dom模板解析注意事项用 Prop 传递不同值类型用 Prop通过 v-bind 动态赋值用 Prop传递对象的所有属性用 Prop传递对象数组用 Prop传入一个数字单向数据流Prop 验证局部注册在这些情况下,你可以通过一个普通的 JavaScript 对象来定义组件:var ComponentA = { /* ... */ }然后在 components 选项中定义...原创 2018-09-29 12:03:30 · 6065 阅读 · 0 评论 -
vue学习十(prop传参、v-bind传参、$emit向父级发送消息、input组件上使用 v-model、事件抛值)
文章目录基本示例组件的复用通过 Prop 向子组件传递数据v-bind 来动态传递 prop通过 $emit 事件向父级组件发送消息使用事件抛出一个值在组件上使用 v-model基本示例组件是可复用的 Vue 实例,且带有一个名字:在这个例子中是 。我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用 <div id="components-de...原创 2018-09-28 20:25:15 · 8213 阅读 · 3 评论 -
vue学习九(表单输入绑定v-model)
文章目录v-model 表单基础用法文本多行文本复选框多个复选框单选按钮选择框多选择框v-for 渲染的动态选项lazynumbertrimv-model 表单基础用法你可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定,v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。文本 <div id="div1">...原创 2018-09-28 16:05:35 · 1553 阅读 · 0 评论 -
vue学习八(监听、$event、内联处理器中的方法)
文章目录一个组件的 v-for一个组件的 v-for任何数据都不会被自动传递到组件里,因为组件有自己独立的作用域。为了把迭代数据传递到组件里,我们要用 props &lt;div id="todo-list-example"&gt; &lt;form v-on:submit.prevent="addNewTodo"&gt;原创 2018-09-28 14:38:08 · 5308 阅读 · 0 评论 -
vue学习七(v-for数组和对象、v-if、监测索引值、监测对象属性增删、副本、组件v-for)
文章目录用 v-for 将数组对应为一组元素一个对象的 v-forkey复用数组利用索引设置项值对象属性的添加或删除显示过滤/排序结果v-for on a templatev-for with v-if用 v-for 将数组对应为一组元素在 v-for 块中,我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引 &lt;ul id="example...原创 2018-09-27 20:27:41 · 3972 阅读 · 1 评论 -
vue学习六(v-if、v-for、复用元素、v-show、template使用 v-if)
文章目录v-if v-elsev-else-iftemplate使用 v-if用key管理可复用的元素v-showv-if 与 v-for结合v-if v-else因为 v-if 是一个指令,所以必须将它添加到一个元素上 <div id="div1"> <div v-if="ok">yes</div> <div v-e...原创 2018-09-27 17:36:00 · 3310 阅读 · 0 评论 -
vue学习五(绑定class、v-bind:style(对象语法、数组语法))
文章目录绑定 HTML Class内联样式在模板里内联样式不在模板里绑定返回对象的计算属性数组语法class 列表class 列表使用三元表达式class 列表使用对象语法用在组件上绑定内联样式v-bind:style绑定 HTML Class我们可以传给 v-bind:class 一个对象,以动态地切换 class:内联样式在模板里 &amp;lt;div id=&quot;div1&quot; :class=&quot;{...原创 2018-09-27 15:16:41 · 7510 阅读 · 2 评论 -
vue学习四(计算属性的缓存、侦听、setter)
文章目录计算属性计算属性缓存 vs 方法计算属性 vs 侦听属性计算属性的 setter计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:<div id="example"> {{ message.split('').reverse().join('') }}</div>所以,对于任何复杂...原创 2018-09-27 11:37:58 · 539 阅读 · 0 评论 -
vue学习三(数据响应作用域、freeze、生命周期、v-once、$watch、v-html)
文章目录数据响应作用域数据freeze作用域生命周期$watchv-once数据响应作用域当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值&amp;amp;lt;div id=&amp;quot;app_1&amp;quot;&amp;amp;gt; &amp;amp;lt;p&原创 2018-09-26 20:26:57 · 1162 阅读 · 0 评论 -
vue学习二(渲染、绑定元素特性、v-if、v-for、v-on、v-model、事件修饰)
文章目录声明式渲染绑定元素特性(v-bind:title=&amp;quot;message&amp;quot;)v-if(过渡效果)v-forv-on监听(v-on:click)v-model(双向绑定)声明式渲染Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html lang=&原创 2018-09-26 18:30:05 · 921 阅读 · 0 评论 -
vue学习一(利用npm搭建Vue工程项目流程)
Vue.js是什么?搭建流程一、利用sublime方式二、利用npm构建vue项目Vue.js是什么?Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以...原创 2018-04-03 13:39:21 · 23680 阅读 · 0 评论