橘猫吃不胖的博客

Vue生命周期概述1 概述2 初始阶段3 挂载阶段4 更新阶段5 销毁阶段6 总结

在Vue中可以自定义指令，通过自定义指令，我们可以对DOM进行更多的底层操作，这样不仅可以在某些场景下为我们提供快速解决问题的思路，而且让我们对Vue的底层有了进一步的了解。

Vue v-model收集表单数据1 单行文本2 多行文本3 复选框4 单选按钮5 选择器6 修饰符

Vue Class与Style绑定1 Class绑定1.1 字符串写法1.2 数组写法1.3 对象写法2 Style绑定2.1 对象写法2.2 数组写法

Vue事件修饰符1 .prevent：阻止默认事件2 .stop阻止事件冒泡3 .once事件只触发一次4 .capture使用事件捕获模式5 .self当e.target是当前操作的元素才触发事件6 .passive：事件的默认行为立即执行7 键盘事件...

Vue数据代理1 Object.defineProperty方法2 什么是数据代理3 Vue中的数据代理

Vue内置指令1 v-show：根据表达式的真假值来显示和隐藏元素2 v-html：插入标签3 v-text：在元素当中插入值4 v-if和v-else：根据表达式的真假值来动态插入和移除元素5 v-for：根据变量的值来循环渲染元素6 v-bind：单向绑定绑定元素的属性7 v-on：监听元素事件，并执行相应的操作8 v-model：实现了数据和视图的双向绑定9 v-once：让元素或组件只渲染一次10 v-pre：跳过这个元素和它的子元素的编译过程11 v-cloak：解决初始化慢

Vue中v-if和v-show的比较v-if和v-show都可以控制元素是否在页面上显示，下面两个例子说明v-if和v-show的用法。示例代码：v-if <!-- 下面的代码可以显示p标签，因为v-if的参数值表达式判断是true --> <div id="app"> <!-- v-if可以通过判断表达式的真假动态的插入和移除元素 --> <p v-if="key == 1">橘猫吃不胖</p>

Vue实例的属性及模板渲染1 概述2 el：与DOM元素绑定3 data：定义双向绑定的数据4 computed：计算属性5 methods：定义Vue实例的方法6 Vue中的三种模板6.1 html模板6.2 字符串模板6.3 render函数模板7 watch属性8 模板渲染8.1 条件渲染8.2 列表渲染

Vue开发环境的搭建1 基本方式2 脚手架方式（vue2.0）3 使用WebStorm集成环境创建vue-cli项目（vue3.0）4 vue项目的目录结构（vue2.0）1 基本方式最基本的方式就是在页面文件中引入vue.js文件，步骤如下：（1）引入vue.js文件（在自己创建的html文件中引入，以下使用001.html文件来举例）         创建001.html文件，在该文件中引入vue.js文件

软件的架构模式MVC、MVVM1 MVC（Model View Controller）2 MVVM（ Model，View，ViewModel）

Vue简介1 概述2 Vue热加载3 Vue的双向数据绑定的原理1 概述Vue.js 可以说是MVVM架构的最佳实践，是一个JavaScript MVVM库，是一套构建用户界面的渐进式框架。专注于 MVVM 中的 ViewModel，不仅做到了数据双向绑定，而且也是一款相对比较轻量级的JS 库，API 简洁。Vue用于构建用户界面的渐进式框架，渐进式代表的含义是：主张最少。每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中