随笔分类 - Vue
摘要：{ // tab缩进大小,默认为2 "tabWidth": 4, // 使用tab缩进，默认false "useTabs": false, // 使用分号, 默认true "semi": false, // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号) "singleQuot
阅读全文
摘要：[A] 认识路由 路由是网络工程中的一个专业术语 (维基百科)路由就是通过互联的网络把信息从源地址传输到目的地址的活动 1. 路由提供两种机制：路由和转送 路由是决定数据包从来源到目的地的路径 转送将输入端的数据转送到合适的输出端 2. 路由中有一个重要的概念：路由表 路由表实质上是一个映射表，决定
阅读全文
摘要：[A] 脚手架CLI简介 1. 大型项目开发，一般都会使用到vue CLI来简化代码书写量，这是因为： 1. vue的形象项目开发时，我们需要考虑代码目录结构，项目结构和部署，预加载，代码单元测试等等 2. 如果所有代码都要手动书写，那工作量太大，此时需要结束vue CLI降低代码书写量 2. CL
阅读全文
摘要：[A] webpack的简介 1. webpack是一个现代的JavaScript应用的静态模块打包工具 1. 在开发中，我们可能生成多种格式的文件，如.js, .hbs, .png, sass等等，而最终我们只需要.js, .png, .css文件 webpack可以帮助我们实现文件的自动打包和格
阅读全文
摘要：[A] watch属性 1. watch是和el,data, methods属性同级的一个属性 2. watch属性用于监听组件中data中的数据变化(注：也可以监听props中的数据变化) 3. watch属性为一个对象，对象中定义函数，函数名为变量名，参数分别为新值和旧值 4. 当被监听的数据发
阅读全文
摘要：[A] slot插槽 在开发中，我们经常遇到一个模块中大部分内容相同，部分内容不一样的情况，这个模块可以写成一个组件， 组件中相同的内容保留，不同的内容暴露在组件预留的插槽中，即可实现最优化代码。 [B] 组建中插槽的使用 1. 让我们封装额组件更具有拓展性 2. 让使用者可以决定组件内部的一些内容
阅读全文
摘要：[A] 父子间的通信 1. 我们知道，子组件是不能直接引用父组件或者Vue实例中的数据的 2. 但是在实际开发中，我们经常需要数据从上层网下层传递 如：在一个页面中，主页面从服务器请求到了很多数据 其中一部分在大组件中展示，一部分在小组件中展示 这个时候就需要数据通过大组件(父组件)传递给小组件(子
阅读全文
摘要：组件创建存在的一些问题： 1. 在创建组件时，我们希望组件可以保存一定的数据，并且组件模板中嵌入这些数据实现动态改变组件内容 2. 但是，组件是不能访问Vue实例中的data的 3. 因此，我们需要组件也有存放自己数据的地方 在组件中保存数据 1. 组件注册时，与template并列等级的有一个da
阅读全文
摘要：[A] 组件化开发 1. 组件化开发时Vue.js中一个重要思想 2. 组件的使用分三个步骤： 1. 创建组件构造器 2. 注册组件 3. 使用组件 [B] 组件化的基本使用 1. 创建组件构造器 Vue.extend()创建的是一个组件构造器，通常在创建组件构造器时，传入template代表我们自
阅读全文
摘要：[A] filter() 数组过滤 参数：函数，函数体为筛选条件，该函数返回值为布尔值 返回值：一个新的数组(数组中的每一个元素都满足条件) 示例： var arr = [2, 4, 5, 7, 9, 0, 3, 4]; var newArr = arr.filter(function(item){
阅读全文
摘要：v-model的使用 实现双向绑定，即当数据改变时，界面同步更新，当界面改变时，数据也及时更新。 [A]的基本使用 1. v-model实现表单元素和数据的双向绑定 示例： <div id="app"> <input type="text" v-model="msg"> {{msg}} </div>
阅读全文
摘要：示例代码： <script> /* 购物车买书的case 需求： 1. 点击按钮增加买书量，自动计算总价 2. 可移除某些书籍 3. 当所有书籍被移除后，页面显示购物车为空 移除书籍：修改数据模型即可，页面会自动修改 */ </script> <style> .tb{ border: black 3
阅读全文
摘要：过滤器filters的使用 1. filters是vue中和和data，methods并列的对象 2. 过滤器中定义各个函数，用于将传入的数据进行过滤以下再展示 3. 使用案例 // DOM <div id="app"> 这本书的价格是：<span>{{bookPrice | twoPoint}}<
阅读全文
摘要：在Vue中，并不是所有的数据改变都会响应式的反映到页面中 1. 可以做到响应式的方法 pop() push() shift() unshift() splice() sort() reserve() 2. 做不到响应式的方法 通过下标改变数组的元素, 这是因为Vue中没有监听数值改变的变化 解决：
阅读全文
摘要：v-for 用于循环遍历 [A] 循环遍历数组/对象，不需要下标时 <ul> <li v-for="item in movies">{{item}}</li> </ul> [B] 循环遍历数组/对象，需要下标时 若遍历的是数组，(item, index) item表示值，index表示下标 若遍历的
阅读全文
摘要：[A] v-if...v-else 条件显示 1. 行内属性v-if的值为true时，则当前标签才被渲染出来，值为false，则不被渲染出来 2. 当v-if和v-else成对出现时，在任意时刻可都只会渲染其中一个 示例： <div v-if="isShow">我的名字是：{{name}}</div
阅读全文
摘要：[A] v-on作用 作用：用于绑定事件，如监听鼠标事件，键盘事件等 简写：@ 绑定类型：Function | Inline satatment | Object 参数：event [B] v-on的参数传递 1. 基本使用，不传参时 <button @click="addNum()">add</b
阅读全文
摘要：计算属性 computed data中的数据可以直接在html中通过差值表达式直接引用，但是有时候，我们想要data中的数据经过转换或者简单的计算再展示 【注意】computed中定义的函数而非变量 1. 简单使用 computed:{ fullName(){ return this.lastNam
阅读全文
摘要：v-bind 1. 插值表达式可以将变量的值插入到模板的内容中，即标签内容区域，不能插入到行内属性的值中去，如a标签的href的值，img标签的src值。 2. v-bind可以给行内属性绑定变量的值 v-bind的基本使用 1. 表明某个行内属性绑定的是一个变量而不是一个具体的值 如：<img v
阅读全文
