Vue.js
Vue.js学习笔记。
大桔骑士v
微软程序员,B站账号:大桔骑士v
展开
-
【Vue.js学习笔记】21:路由转移的多种方式,多路由拼图
学习b站上的小马视频。路由转移的多种方式前面学习的使用路由的方式都是下面这样:<router-link to="路由URL"></router-link>还可以用传递一个路由对象的方式,灵活的实现路由。App.vue在上篇的例子的基础上,只改这个文件。需要注意的是,传递路由对象时,如果要使用name属性,name属性的值应该是组件的名称,而不是映射到的路由的名...原创 2019-01-31 22:35:39 · 400 阅读 · 0 评论 -
【Vue.js学习笔记】20:使用vue-router做动态路由,嵌套路由
学习b站上的小马视频。动态路由动态路由可以设置动态参数等,适合REST风格的接口,或者用于url级别的分页等功能。App.vue这里设置一个类似导航条或者分页条的路由。&amp;lt;template&amp;gt; &amp;lt;div id=&quot;app&quot;&amp;gt; &amp;lt;!--在这里设置去不同页面的路由--&原创 2019-01-30 23:19:59 · 582 阅读 · 0 评论 -
【Vue.js学习笔记】19:组件的slot插槽,命名slot
学习b站上的小马视频。组件的slot插槽以前学习的组件都只能传入属性,而双标签中没法使用内容,通过添加slot插槽可以使组件能使用其双标签中的内容。添加了slot插槽的组件<template> <div> 你好,<strong>{{pname}}</strong>! <slot></slot> ...原创 2019-01-29 20:57:09 · 3731 阅读 · 0 评论 -
【Vue.js学习笔记】18:class对象绑定,表单控件绑定,表单修饰符
学习b站上的小马视频。class对象绑定在Vue中可以绑定一个class,也可以绑定集成了多个class的对象,可以操作这些class的启用与否来影响所使用的CSS。这部分实际上就是前面学的动态绑定CSS样式的一种方式。<template> <div> <div v-bind:class="myClass">文本</div> ...原创 2019-01-28 22:32:07 · 467 阅读 · 0 评论 -
【Vue.js学习笔记】17:filters,watch,计算属性的get和set
学习b站上的小马视频。filters在这个属性中可以定义过滤器,一般用于给视图中的data进行格式化输出。<template> <div> <p>{{msg}}</p> <!--使用过滤器--> <p>{{msg | toUpper}}</p> <p&原创 2019-01-28 18:02:33 · 1800 阅读 · 0 评论 -
【Vue.js学习笔记】16:使用Vuex做组件状态管理的demo
Vuex集中管理组件的状态,提供store来集中存储所有组件用的数据,代替传统的繁琐的组件通信方式。store.js在这里导入Vuex并设置store的各项功能。import Vue from "vue";import Vuex from "vuex";Vue.use(Vuex);export const store = new Vuex.Store({ strict:tr...原创 2019-01-23 13:10:01 · 623 阅读 · 0 评论 -
【Vue.js学习笔记】15:vue-resource发送请求,proxyTable实现跨域(Fetch/Axios)
vue-resource发送请求安装npm i vue-resource -S这等价于:npm install vue-resource --save数据来源见JSONPlaceholder。这个网站上有很多JSON数据可以请求,比如请求这上面主页上推荐的users数据。这些数据可以用来测试(当后端还没写好的时候用这个测试很方便)。Home.vue<template>...原创 2018-12-28 14:58:19 · 644 阅读 · 0 评论 -
【Vue.js学习笔记】14:组件生命周期钩子函数,vue-router路由
组件生命周期钩子函数即组件生命周期过程中调用的函数。组件的生命周期可以参考官方文档中的图,这里在前面的例子上修改Header组件,在生命周期的各个方法中弹出对话框演示一下。Header.vue<template> <header v-on:click="updateTitle"> <h1>{{title}}</h1> </...原创 2018-12-27 13:42:22 · 493 阅读 · 0 评论 -
【Vue.js学习笔记】13:属性传值(父传子),事件传值(子传父)
属性传值(父传子)简述属性传值即父组件向子组件传值。有些属性可能有多个子组件要使用,这种时候总不能每个组件里都写一遍,这时候就可以把这样的属性放到父组件里,然后通过属性传值的方式传递给要使用它的子组件里去使用。这个例子是在上篇的基础上的,为了突出重点这里只贴出修改的部分的代码,其余部分是一样的。App.vue的script(数据)将之前放在子组件里的属性放到这里来。<script...原创 2018-12-27 10:53:03 · 744 阅读 · 0 评论 -
【Vue.js学习笔记】12:组件嵌套的Demo页面
组件嵌套的Demo页面这里按照课程视频里所做,将Header和Footer使用相应的语义化标签包装成组件,一起装进根组件中来使用,建立一个小Demo网页。App.vue&lt;template&gt; &lt;div id="app"&gt; &lt;app-header&gt;&lt;/app-header&gt;原创 2018-12-26 17:23:55 · 885 阅读 · 0 评论 -
【Vue.js学习笔记】11:组件中CSS的作用域
样式表最终的生成位置有两个组件,一个是根组件App,一个是子组件Users。它们都有一个h2标签,先只在根组件上写CSS样式。App.vue<template> <div id="app"> <h2>父组件的h2标签</h2> </div></template><script&am原创 2018-12-26 15:19:51 · 604 阅读 · 0 评论 -
【Vue.js学习笔记】10:第一个Vue脚手架项目,组件嵌套
接下来Vue的学习尽量在Vue脚手架项目中来学习,而不是像之前那样使用cdn的方式了。使用treer生成项目结构使用tree >> tree.txt可以将目录结构(不含文件)导出到名为tree的txt文件中,但是Windows下的tree命令实在太差,竟然没有-I参数来指定要忽略的文件,这里使用treer。用npm全局安装它:npm install treer -g安装好后,...原创 2018-12-26 14:47:03 · 881 阅读 · 0 评论 -
【Vue.js学习笔记】9:搭建Vue-CLI脚手架并创建Vue项目,在WebStorm中创建Vue项目
在第一篇的时候确实可以创建,这次跟着视频搭建一次,比较一下和上次的区别,更正一下上次的错误操作,加深理解。搭建Vue-CLI脚手架在Node.js的安装目录下,删除node_cache/和node_global下的所有内容,即让Node处于刚刚安装完成的状态,连cnpm也一起删掉了。使用npm install --global vue-cli安装一下Vue脚手架,安装好后使用vue-V能看到...原创 2018-12-26 11:10:21 · 1913 阅读 · 0 评论 -
【Vue.js学习笔记】8:建立多个Vue实例对象,认识Vue中的组件
建立多个Vue实例对象这里在同一个js文件中创建了两个Vue实例对象,它们各自能完成前面学的那些功能,同时使用对象名称也可以互相访问,协同实现一些功能。index.html&lt;!DOCTYPE html&gt;&lt;html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"&gt;&am原创 2018-12-25 10:21:00 · 6906 阅读 · 0 评论 -
【Vue.js学习笔记】7:v-for渲染,Vue的小Demo
v-forv-for是Vue中常用的列表渲染方法, 可以将一个列表渲染为一系列的HTML元素,也可以用来遍历对象内的k-v对。另外关于模板元素渲染在官方文档上见这里。index.html&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset=&原创 2018-12-24 10:28:48 · 515 阅读 · 0 评论 -
【Vue.js学习笔记】6:动态绑定CSS样式,条件渲染和v-show
动态绑定CSS样式这部分涉及官方文档中的Class与Style绑定。index.html<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"><head> <原创 2018-12-23 16:49:30 · 1868 阅读 · 0 评论 -
【Vue.js学习笔记】5:双向数据绑定,计算属性
双向数据绑定双向数据绑定往往会用到input、select、textarea等表单标签上,因为总是涉及一个数据数据的地方和输出数据的地方。当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。数据双向绑定,一定是对于UI控件来说的,非UI控件不会涉及到数据双向绑定。使用ref属性给这些标签做标记,那么就可以在函数中随时取得其中的数据,以实现双向绑定。in...原创 2018-12-22 22:34:32 · 731 阅读 · 0 评论 -
【Vue.js学习笔记】4:事件修饰符,键盘事件,键值修饰符
事件修饰符在Vue的官方文档中给出了引入v-on:的事件修饰符的理念是,不希望在方法中去处理DOM细节。事件冒泡事件在事件源上发生,处理事件的方法并未绑定在该事件源上,事件就要向外或者向内传播(propagation),也称事件冒泡。在JS里,可以用事件对象的stopPropagation()方法来阻止事件的进一步传播。index.html<!DOCTYPE html>&l...原创 2018-12-22 16:47:08 · 615 阅读 · 0 评论 -
【Vue.js学习笔记】3:数据绑定,事件绑定
数据绑定使用Vue时在Vue对象的el字段中要指定一下根容器,这里用id选择器。这个例子同时学习了data和methods的基本用法。数据绑定(data-binding)可以将Vue对象中的data的值绑定到HTML标签中的某些位置,则修改时只需要修改对象中相应data的值即可。index.html<!DOCTYPE html><html lang="en" xmlns...原创 2018-12-22 14:06:53 · 740 阅读 · 0 评论 -
【Vue.js学习笔记】2:从Vue中的插值认识Vue
Vue的上一篇学习已经是上周了,深切感受到了vue-cli和node的复杂,还是先用cdn引入Vue然后好好学一下Vue基础吧。可以使用runoob上推荐的bootcdn:<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>或者使用官网推荐的cdn:<script sr...原创 2018-06-30 21:08:28 · 737 阅读 · 0 评论 -
【Vue.js学习笔记】1:使用npm安装Vue.js环境,使用vue-cli创建Vue项目
本地安装Vue不使用全局安装,先创建一个目录,然后进入到该目录下,使用cnpm install vue安装:E:\WorkSpace\PhpStorm\myVue>cnpm install vue√ Installed 1 packages√ Linked 0 latest versions√ Run 0 scripts√ All packages installed (1 ...原创 2018-06-25 15:02:26 · 4011 阅读 · 0 评论