随笔分类 - 前端
包括前端全部笔记
摘要：### 体验 `#page>div.logo+ul#navigation>li*5>a{Item $}` ```html Item 1 Item 2 Item 3 Item 4 Item 5 ``` ### 父子关系 > `div>ul>li` ```html ``` ### 兄弟相邻 + `div
阅读全文
摘要：v-model 用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定； input <input v-model="message" placeholder="edit me" /> <p>Message is: {{ message }
阅读全文
摘要：监听事件 v-on 我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件 <div id="basic-event"> <button @click="counter += 1">Add 1</button> <p>The button above has been clic
阅读全文
摘要：v-for 遍历数组 v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。 <ul id="array-with-index"> <li v-for="(item, index) in items"> {{
阅读全文
摘要：v-if v-else-if v-else <div v-if="type 'A'"> A </div> <div v-else-if="type 'B'"> B </div> <div v-else-if="type 'C'"> C </div> <div v-else> Not A/B/C </
阅读全文
摘要：Class 对象语法 数组语法 在组件上的使用 Style 对象语法 数组语法 自动添加前缀 多重值 Class 对象语法 动态地切换 class： <div :class="{active: isActive}"></div> 表示 active 这个 class 存在与否将取决于 data pr
阅读全文
摘要：计算属性 模板内的表达式非常便利，设计它们的初衷是用于简单运算的。但如果在模板中放入太多的逻辑会让模板过重且难以维护。例如，有一个嵌套数组对象： <div id="computed-basics"> <span>{{ author.books.length > 0 ? 'Yes' : 'No' }}
阅读全文
摘要：Data Property 组件的 data 选项是一个函数。Vue 会在创建新组件实例的过程中调用此函数。它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。为方便起见，该对象(即：createApp的参数)的任何顶级 property 也会直
阅读全文
摘要：插值 <span>Message: {{msg}}</span> 无论何时，绑定的组件实例上 msg property 发生了改变，插值处的内容都会更新。 v-once 执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定： <span v-once>这个将
阅读全文
摘要：每个 Vue 应用都是通过用 createApp 函数创建一个新的 应用实例 开始的： const app = Vue.createApp({ /* 选项 */ }) 该应用实例app是用来在应用中注册“全局”组件的，例如（先看如下demo，后面讲解）： const app = Vue.create
阅读全文
摘要：需要引入： <script src="https://unpkg.com/vue@next"></script> 第一个 Vuejs 3 <div id="counter"> Counter: {{counter}} </div> const Counter = { data() { return
阅读全文
摘要：什么是JQueryJQuery是一个优秀的javascript类库，jQuery以其简洁、快速等优点征服了众多javascript开发者。jQuery使用户能更方便地处理DOM、events、实现动画效果，并且方便地为网站提供Ajax交互。jQuery能够使用户的html页保持代码和html内容分离...
阅读全文
