随笔分类 - Vue
摘要：一、使用Vue-cli3创建Vue项目 1、检查当前Vue版本 输入下面的命令检查当前安装的Vue-cli版本： $ vue -V 结果如下： 说明本机安装的是3版本。如果是2.xx版本，就需要先卸载掉旧版本，然后在安装新版本。卸载旧版本命令： npm uninstall vue-cli -g 注意
阅读全文
摘要：一、为什么要使用计算属性 1、什么是计算属性 计算属性：可以理解为能够在里面写一些计算逻辑的属性。具有如下的作用： 减少模板中的计算逻辑。 数据缓存。当我们的数据没有变化的时候，不会再次执行计算的过程。 依赖固定的数据类型（响应式数据），不能是普通的传入的一个全局数据。 在数据量比较大的时候，计算属
阅读全文
摘要：一、什么是Vuex 官网解释如下： Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 tim
阅读全文
摘要：一、安装jQuery Bootstrap需要依赖jQuery，所以引用Bootstrap之前要先引用jQuery，使用下面的命令引用jQuery： 注意：如果想查看npm上jquery有哪些版本，可以执行命令： 二、引入Bootstrap 1、使用命令安装 可以使用下面的命令安装： 2、下载Boot
阅读全文
摘要：一、$set 在开始讲解$set之前先看下面的一段代码，实现的功能：当点击“添加”按钮时，动态的给data里面的对象添加属性和值，代码示例如下： 先看看点击按钮之前的效果： 从截图中可以看出这时info对象只有三个属性，点击“添加”按钮刷新，然后在看看info对象的属性，截图如下： 可以看出这时in
阅读全文
摘要：一、创建并引入一个组件 1、创建组件 vue-cli中的所有组件都是存放在components文件夹下面的，所以在components文件夹下面创建一个名为First.vue的自定义组件： 2、在App.vue组件里面引用First.vue组件 1、在<script>标签里面使用import导入自定
阅读全文
摘要：一、什么是vue的生命周期 Vue中的生命周期是指组件从创建到销毁的一系列过程。看下面这张官方文档的图： 从图片中可以看出Vue的整个生命周期包括8个状态，按照先后顺序分别为： beforeCreate Created beforeMount mounted beforeUpdate updated
阅读全文
摘要：一、v-model指令 v-model 用来获取表单元素的值。对应input输入框获取的是输入的值，单选按钮、复选框、下拉框获取的是选择的状态。 使用v-model可以在表单控件或者组件上创建双向绑定。 代码示例如下： 二、v-model指令实例 下面代码利用v-model指令实现全选的功能：
阅读全文
摘要：一、过滤器 过滤器是vue中的一个特性，作用是用于对文本进行格式化的作用。 注意：在vue 1.0中有内置的过滤器，在2.0中去掉了内置过滤器，只有自定义过滤器 二、使用位置 过滤器只能应用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。例如： 三、分类 过滤器
阅读全文
摘要：一、什么是event对象 event对象：代表的是事件的状态。比如获取当前的元素：e.Target。 二、事件冒泡 什么是事件冒泡呢？百度百科的解释如下： 当事件发生后，这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力，即处理事件的函数（方法）
阅读全文
摘要：一、v-on指令 v-on指令在Vue.js中用来绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联预计，如果没有修饰符也可以省略。 用在普通元素上时，只能监听原生DOM事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。 用法： 例如：点击按钮的时候执行play事
阅读全文
摘要：一、v-show指令 v-show指令可以用来动态的控制DOM元素的显示或隐藏。v-show后面跟的是判断条件，语法如下： 例如： v-show="true"，表示显示DOM元素。 v-show="false"， 表示隐藏DOM元素。 看下面的示例： 运行效果： 将flag变量改为false，代码如
阅读全文
摘要：一、什么是v-bind指令 v-bind指令用于响应更新HTML特性，允许将一个或多个属性动态绑定到表达式。v-bind是应用在动态属性上面的。 二、语法 v-bind语法如下： 也可以简写成下面的形式： 代码示例如下： 这里的src和title都是<img>标签的属性，这里都是绑定到变量。 v-b
阅读全文
摘要：随着Vue.js越来越火爆，更多的项目都用到Vue进行开发，在实际的开发项目中如何搭建脚手架呢？今天就来跟大家分享一下如何使用vue-cli搭建脚手架。 一、安装node.js 1、进入官网https://nodejs.org/en/download/ 根据电脑操作系统，选择相应版本的文件进行下载。
阅读全文
摘要：一、什么是v-for指令 在Vue.js中，我们可以使用v-for指令基于源数据重复渲染元素。也就是说可以使用v-for指令实现遍历功能，包括遍历数组、对象、数组对象等。 二、遍历数组 代码示例如下： 其中index表示数组的索引 效果如下图所示： 注意：最新的版本中已经移除了$index获取数组索
阅读全文
