文章分类 - Vue学习
第二章 Vue组件化编程和使用Vue脚手架
摘要：1.脚手架文件结构 ├── node_modules ├── public │ ├── favicon.ico：页签图标 │ └── index.html：主页面 ├── src │ ├── assets：存放静态资源 │ │ └─ logo.png │ ├── components：存放组件 │
第一章 Vue核心 第十七节 Vue的生命周期
摘要：17.1 引出生命周期 生命周期： 1.又名：生命周期回调函数、生命周期函数、生命周期钩子 2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数 3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的 4.生命周期函数中的this指向是vm 或 组件实例对象 示例代码： <!D
第一章 Vue核心 第十六节 自定义指令
摘要：需求1：定义一个v-big指令，和v-text指令功能类似，但会把绑定的数值放大10倍需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点自定义指令总结： 一、定义语法： (1).局部指令： new Vue({ new Vue({ directiv
第一章 Vue核心 第十五节 内置指令
摘要：15.1 内置指令 学过的指令： v-bind 单向绑定解析表达式，可简写为 :xxx v-model 双向数据绑定 v-for 遍历数组/对象/字符串 v-on 绑定事件监听，可简写为 @ v-if 条件渲染（动态控制节点是否存在） v-else 条件渲染（动态控制节点是否存在，必须与v-if搭配
第一章 Vue核心 第十四节 过滤器
摘要：过滤器： 定义：对要显示的数据进行特定格式化后再显示（适用于一些简单的逻辑） 语法： 1.注册过滤器：Vue.filter(name, callback) 或 new Vue({filters:{}}) 2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器
第一章 Vue核心 第十三节 收集表单数据
摘要：收集表单数据： 若<input type="text" />，则v-model收集的是value的值，用户输入的就是value值 若<input type="radio" />，则v-model收集是的是value值，且要给标签配置value值 若<input type="checkbox" />，
第一章 Vue核心 第十二节 数据监测
摘要：12.1 列表渲染 v-for指令 1.用于展示列表数据 2.语法：v-for="(item, index) in xxx" :key="yyy" 其中yyy为唯一值，item为值，index为对象key 或 索引 3.可遍历：数组、对象、字符串（用得少）、指定次数（用得少） 示例代码： <!DOC
第一章 Vue核心 第十一节 条件渲染
摘要：条件渲染： 1.v-if 写法： (1).v-if="表达式" (2).v-else-if="表达式" (3).v-else="表达式" 适用于：切换频率比较低的场景 特点：不展示的DOM元素直接移除 注意：v-if可以和v-else、v-else-if一起使用，但要求结构不能被打断 2.v-sho
第一章 Vue核心 第十节 绑定样式
摘要：绑定样式： 1.class样式 写法：class="xxx" xxx可以是字符串、对象、数组。 字符串写法适用于：类名不确定，要动态获取 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但是不确定用不用 2.style样式 :styl
第一章 Vue核心 第九节 监视属性
摘要：监视属性watch： 1.当监视的属性变化时，回调函数自动调用，进行相关操作 2.监视的属性必须存在，才能进行监视 3.监视的两种方法： (1).new Vue时传入watch配置 (2).通过vm.$watch监视 4.深度监视： (1).Vue中的watch默认不监视对象内部值的改变(一层)；
第一章 Vue核心 第八节 计算属性
摘要：计算属性： 1.定义：要用的属性不存在，要通过自己计算得来。 2.原理：底层借助了Object.defineProperty方法提供的getter和setter。 3.get函数什么时候调用？ (1)初次读取时会执行一次； (2)当依赖的数据发生变化时会被再次调用。 4.优势：与methods实现相
第一章 Vue核心 第七节 事件处理
摘要：7.1 事件的基本使用 1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名； 2.事件的回调需要配置在methods对象中，最终会在vm上； 3.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象； 4.@click="demo" 和 @c
第一章 Vue核心 第六节 数据代理
摘要：6.1 回顾Object.defineProperty方法 代码示例： let number = 21; let person = { name:'retrace', sex:'female' } //给对象添加属性 Object.defineProperty(person,'age',{//此方法
第一章 Vue核心 第四节 el与data的两种写法
摘要：el与data的两种写法： 1.el的两种写法 (1).new Vue时配置el属性。 (2).先创建Vue实例，随后再通过vm.$mount('#root');指定el的值 2.data的两种写法 (1).对象式 (2).函数式 如何选择：目前哪种写法都可以，以后学习组件时，data必须使用函数式
第一章 Vue核心 第三节 数据绑定
摘要：Vue中有两种数据绑定方式： 1.单向绑定(v-bind)：数据只能从data流向页面。 2.双向绑定(v-model)：数据不仅你从data流向页面，还可以从页面流向data 备注： 1.双向绑定一般都应用在表单类元素上（如：input、selecte等） 2.v-model:value 可以简写
第一章 Vue核心 第二节 模板语法
摘要：Vue模板有两大类： 1.插值语法： 功能：用于解析标签题内容 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性 2.指令语法： 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件......）。 举例：v-bind:href="xxx" 或 简写为 :href=
第一章 Vue核心 第一节 初识Vue
摘要：初识Vue： 1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象； 2.root容器里的代码依然符合HTML规范，只不过混入了一些特殊的Vue语法； 3.root容器里的代码被称为【Vue模板】； 4.Vue实例和容器是一一对应的； 5.真实开发中只有一个Vue实例，并且会配合着组件
