【Vue】条件渲染与列表渲染 条件渲染v-if<h1 v-if="awesome">Vue is awesome!</h1><h1 v-if="awesome"> Vue!</h1><h1 v-else>//使用v-else来表示v-if的else块 Oh no!</h1>因为v-if是一个指令,因此必须将其添加到一个元素上。若想切换多个元素,则可以把一个<template>元素当作不可见的包裹元素,并在上面使用v-if
【Vue】Class 与 Style 绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。绑定HTMLclass对象语法传给v-bind:class一个对象以动态切换class.<div v-bind:class="{active:i
【Vue】计算属性与侦听器 计算属性与监听器计算属性模板内尽量使用简单的表达式,而不要做复杂的函数转换。对于任何复杂逻辑,都可以使用计算属性实现。<div id="example"> <p> Original message:"{{message}}" </p> <p> Computed reversed message:"{{reversedMassage()}}" </p></div>
【Vue】模板语法 模板语法插值文本数据绑定最常见的形式就是使用双大括号进行文本插值。使用v-once指令能够进行一次性插值而不能继续更新视图。<span v-once>{{msg}}</span>原始HTML双大括号不会解释数据,只会解释为普通文本,因此需要使用v-html属性<p>Using mustaches:{{rawHtml}}</p><p>Using v-html directive:<span v-html:"rawHtml"&
【Vue】Vue实例初步 创建第一个vue应用vue代码分为两部分,视图与脚本。创建标签->左右双大括号声明变量(文本插值)->创建vue对象数据与方法响应式系统当Vue实例被创建时,将data对象中的所有property加入响应式系统,当property的值发生改变时,视图会产生响应。值得注意的是只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。也就是说如果你添加一个新的 propertyvar data={a:1}var vm=new Vue({ data:data
【JS】事件部分知识 浏览器事件简介事件:是某事发生的信号。所有的 DOM 节点都生成这样的信号(但事件不仅限于 DOM)。事件处理程序handler:一个事件发生时运行的函数。分配handler的方法HTML特性<input value="Click me" onclick="alert('Click')" type="button"><input type="button" onclick="countRabbits()" value="Count rabbits">DOM属性
【JS】文档树部分知识 DOM树简介根据DOM,每个HTML标签都是一个对象,嵌套的标签是闭合标签的子标签,标签内的文本也是一个对象。标签被称为元素节点,元素内的文本形成文本节点,特殊之处:DOM中表格永远有注释也会成为DOM的一部分与控制台的交互,详情查看:https://zh.javascript.info/dom-nodes遍历DOM对DOM的所有操作都是以document对象开始,它是DOM的主入口点,从它可访问任何结点。最顶层:<html>=document.documentEle
【JS】对象部分知识 javaScript对象对象对象用来存储键值对和更复杂的实体。创建let user=new Object();//构造函数的语法let user={};//字面量的语法用点号或方括号访问属性值,方括号比点符号更强大。它允许任何属性名和变量,但写起来也更加麻烦delete 操作符移除属性用多字词语作为属性名,必须加上引号属性名会被自动转换成字符串列表中的最后一个属性以都好结尾,叫做尾随或悬挂逗号,便于添加、删除和移动属性。使用ocnst声明的对象可以被修改其中的内容,而不能
【JS】基础知识 变量 声明 let message;massage='hello'; var与let 常量const myBirthday='122121'; 大写形式的常数 const COLOR_RED='#F00';数据类型可以将任何类型的值存入变量:动态类型。 Number类型 Infinity:无穷大 NaN:计算错误,会被传播到最终结果。最坏的情况下,我们会得到 NaN 的结果。 BigInt类型 .