12 2022 档案
摘要：初始化脚手架 说明 Vue 脚手架是 Vue 官方提供的标准化开发工具(开发平台)。最新的版本是 4.x。文档: https://cli.vuejs.org/zh/。 具体步骤 第一步(仅第一次执行): 全局安装 @vue/cli。 npm install -g @vue/cli 第二步:切换到你要
阅读全文
摘要：一个.vue 文件的组成(3 个部分) 1. 模板页面 页面模板 2. JS 模块对象 <script> export default { data() { return {} }, methods: { }, computed: { }, components: { } } </script> 3
阅读全文
摘要：Vue中使用组件的三大步骤： 一、定义组件(创建组件) 如何定义一个组件？ 使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别； 区别如下： 1.el不要写，为什么？ ——— 最终所有的组件都要经过一个
阅读全文
摘要：脚手架文件结构 ├── node_modules ├── public │ ├── favicon.ico: 页签图标 │ └── index.html: 主页面 ├── src │ ├── assets: 存放静态资源 │ │ └── logo.png │ │── component: 存放组件
阅读全文
摘要：vue生命周期 1.引出生命周期 生命周期： 1.又名：生命周期回调函数、生命周期函数、生命周期钩子。 2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。 3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。 4.生命周期函数中的this指向是vm 或 组件实例对象。
阅读全文
摘要：1.回顾一个DOM操作 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> .demo{ background-color: orange; } </style> </head>
阅读全文
摘要：基本指令 v-bind : 单向绑定解析表达式, 可简写为 :xxxv-model : 双向数据绑定v-for : 遍历数组/对象/字符串v-on : 绑定事件监听, 可简写为@v-if : 条件渲染（动态控制节点是否存存在）v-else : 条件渲染（动态控制节点是否存存在）v-show : 条件
阅读全文
摘要：过滤器理解 （1）功能: 对要显示的数据进行特定格式化后再显示 （2）注意: 并没有改变原本的数据, 可是产生新的对应的数据 ps: Vue3中已废弃filter，用方法调用或计算属性替换过滤器。 定义： 过滤器（Filters）是vue为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方
阅读全文
摘要：列表显示指令 数组: v-for / index对象: v-for / key v-for指令: 1.用于展示列表数据 2.语法：v-for=“(item, index) in xxx” :key=“yyy” 3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少） <!DOCTYPE ht
阅读全文
摘要：收集表单数据： 若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。若：<input type="checkbox"/> 1.
阅读全文
摘要：1. v-if 与v-else 写法： (1).v-if=“表达式” (2).v-else-if=“表达式” (3).v-else=“表达式” 适用于：切换频率较低的场景。 特点：不展示的DOM元素直接被移除。 注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”
阅读全文
摘要：理解 (1) 在应用界面中, 某个(些)元素的样式是变化的 (2) class/style 绑定就是专门用来实现动态样式效果的技术 1.class样式 1.:class=‘xxx’ 2.表达式是字符串: ‘classA’ 3.表达式是对象: {classA:isA, classB: isB} 4.表
阅读全文
摘要：监视属性-watch 方法说明 1.通过通过vm 对象的$watch()或watch 配置来监视指定的属性 2.当属性变化时, 回调函数自动调用, 在函数内部进行计算 监视属性watch： 1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作 2.监视的属性必须存在，才能进行监视！！ 3.监
阅读全文
摘要：1. 定义: 要用的属性不存在,要通过已有属性计算得来。 2. 原理 底层借助了objcet.defineproperty方法提供的getter fllsetter. 3. get两数什么时候执行? (1),初次读取时会执行一次。 (2),当依赖的数据发生改变时会被再次调用。 4. 优势 与meth
阅读全文
摘要：事件处理的基本使用 绑定监听 v-on:xxx=“fun” @xxx=“fun” @xxx=“fun(参数)” 默认事件形参: event 隐含属性对象: $event 绑定方法说明 使用v-on:xxx 或@xxx绑定事件,其中xxx是事件名;事件的回调需要配置在methods对象中,最终公在vm
阅读全文
摘要：1.回顾Object.defineProperty方法 Object.defineproperty Object.defineproperty 的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性。Object.defineproperty方法需要传递3个参数，1.属性所在的对象 2
阅读全文
摘要：1.el有2种写法 (1).new Vue时候配置el属性。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>el和data的两种写法</title> <script type="text/javascript" src="..
阅读全文
摘要：M：模型(Model) ：对应data 中的数据V：视图(View) ：模板VM：视图模型(ViewModel) ： Vue 实例对象 观察发现: 1.data中所有的属性,最后都出现在了vm身上。 2.vm身上所有的属性 及Vue原型上所有属性,在Vue模板中都可以直接使用。 MVVM（Model
阅读全文
摘要：1.效果 2.单向数据绑定 语法：v-bind:href =“xxx” 或简写为 :href 特点：数据只能从data 流向页面 3. 双向数据绑定 语法：v-mode:value=“xxx” 或简写为 v-model=“xxx” 特点：数据不仅能从data 流向页面，还能从页面流向 data 4.
阅读全文
摘要：1. 效果 2. 模板的理解 html 中包含了一些JS 语法代码，语法分为两种，分别为： 插值语法（双大括号表达式）指令（以v-开头） 3. 插值语法 功能: 用于解析标签体内容 语法: {{xxx}}, xxx是js表达式,且可以直接读取到data中的所有属性。 4. 指令语法 功能: 用于解析
阅读全文
摘要：1. 官网 英文官网: https://vuejs.org/ 中文官网: https://cn.vuejs.org/ 2. 介绍与描述 动态构建用户界面的渐进式 JavaScript 框架 作者: 尤雨溪 3. Vue 的特点 遵循 MVVM 模式 编码简洁, 体积小, 运行效率高, 适合移动/PC
阅读全文
