随笔分类 - Vue
摘要：v-bind:class=" " 绑定样式 <div id="app"> <!-- 值是对象形式，字段名是class样式名，值是boolean值，true是引用该样式，false不引用 --> <!-- 值是false，只是不引用该样式，并不是就不显示该元素了 --> <p v-bind:class
阅读全文
摘要：vue最初使用vue-resource来实现异步请求（ajax），vue 2.0开始推荐使用 axios 来代替vue-resource。 准备工作 1、使用npm下载axios npm install axios 2、引入axios.js <script src="js/axios.js"></s
阅读全文
摘要：demo 商城后台，添加一种商品 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- 引入vue.js --> <script src="js/vue.js"></script> </head> <b
阅读全文
摘要：嵌套路由 嵌套路由：一个路由配置中嵌套其他的路由配置。 嵌套路由挺常用的，比如导航栏有首页、文章、想法、留言4个模块，我们以嵌套路由的形式集成这些模块，在导航栏中点击对应的条目，就会路由到对应的页面（下方显示对应的页面），和html的<iframe>效果差不多。 demo 嵌套路由 <!DOCTYP
阅读全文
摘要：在单页应用中常常要用到路由。 传统的页面跳转是浏览器请求新的页面，渲染整个新的页面。 单页应用是把要跳转的页面的以组件的形式集成在当前页面中，跳转时浏览器不用发起新请求，因为目标页面是当前页面的一部分，直接显示目标页面那一部分即可。 demo 在单页应用中使用路由 1、下载路由插件 npm inst
阅读全文
摘要：Vue的生命周期图 红色圈出来的都是钩子函数，成对的，和el、template、data一个级别。 组件也是一个Vue实例，也有这些生命周期，并不是说要显式new Vue()才是一个Vue对象。 demo Vue的生命周期 index.html <!DOCTYPE html> <html> <hea
阅读全文
摘要：实现非父子组件之间的通信，有以下几种方式 Bus总线。创建一个空的Vue对象作为Bus中央事件总线（中间组件）。 vuex（适合大型项目，小项目效果不明显） provide/inject（同根往下派发） 本地存储 第一种是最常用的，此处只介绍第一种。 bus总线实现非父子组件之间的通信 <div i
阅读全文
摘要：组件之间的通信分为2种 父子组件之间的通信 非父子组件之间的通信 父组件向子组件传数据 <div id="app"></div> <script> // 子组件 Vue.component('Child',{ template:`<p>我是子组件，接收到父组件传来的数据：{{msg}}</p>`,
阅读全文
摘要：向组件中插入内容有2种方式 槽点 子组件 demo 使用槽点向组件中插入内容 Vue.component('Parent',{ template:` <!--反引号比引号更好用--> <div> <p>hello</p> <slot></slot> <!--如果后续要在组件中插入元素、内容，需要先留
阅读全文
摘要：将页面拆分为多个组件，简化了页面开发，方便维护，组件也可以复用。 组件的类型 通用组件，比如表单、弹窗、菜单栏、分页组件等 业务组件，实现某一业务的组件，比如抽奖组件 页面组件，也叫做单页，一个页面就是一个组件，只完成功能，不复用 组件开发流程：声明、注册、使用 demo 组件使用流程 <div i
阅读全文
摘要：数据监听用于监听内存变量值的变化，当值变化时做一些处理。 比如将搜索框绑定一个双向绑定一个变量，搜索框的内容改变时，提供对应的预选项； 比如选择地区，省份双向绑定一个板顶当选择的省份变化时，列出的该省下辖的地区也要对应发生改变。 watch是监听单个单个变量值的变化，computed是同时监听多个变
阅读全文
摘要：内容中的{{var}}会直接显示，使用过滤器：{{var | 过滤器名}}，会先用过滤器处理var，再显示。 按作用域划分，有2种过滤器：全局过滤器、组件内过滤器。 demo 组件内过滤器 <div id="app"> <input v-model="content" /><br /> <!--绑定
阅读全文
摘要：指令是以数据去驱动DOM行为，简化DOM操作。常用指令如下 v-text innertext，不能解析文本中的html标签 v-html innerhtml，可解析文本中的html标签 v-show 控制元素的显示、隐藏 v-if、v-else-if、v-else 满足条件才显示对应的元素 v-fo
阅读全文
摘要：vue是国人开发的一个js框架，国人用得比较多。 Vue等框架与jQuery的区别 jQuery基于dom操作 Vue框架以数据驱动、组件化开发为核心 下载vue.js 如果安装了node，执行命令 npm install vue 下载vue.js，可在vue后面加上 @版本号 指定要下载的vue.
阅读全文
