本文最后更新于：10 个月前 前端三件套-后端必备Previous slideNext slideToggle fullscreenOpen presenter view 前端学习笔记 AwesomeMarp_blue 1 JS 前端学习笔记 1.1 JavaScript-导入导出 JS 提供的导入导出机制，可以实现按需导入。 命名导出： //showMessage.js //简单的展示信息 function simpleMessage(msg){ console.1og(msg) } //复杂的展示信息 function complexMessage(msg){ console.log(new Date()+":"+msg) } //批量导出一批方法或变量，也可以在方法头导出 export {simpleMessage,complexMessage} //支持别名导出 //export {simpleMessage as sm,complexMessage as cm} 前端学习笔记 命名导入： <!-- message.html --> <body> <div> <button id="bn">点我展示信息</button> </div> <script type="module"> import {complexMessage} from './showMessage.js' <!-- import {complexMessage as cm} from './showMessage.js' --> document.getElementById("btn").onclick function(){ complexMessage('bbbbb'); <!-- cm('aaa') --> } </script> </body> 导入和导出的时候，可以使用 as 重命名 前端学习笔记 当 js 中的方法过多时可以采用默认导出导入方式。 默认导出（导出一个 js 对象，通过对象的方式调用方法）： //showMessage.js //简单的展示信息 function simpleMessage(msg){ console.1og(msg) } //复杂的展示信息 function complexMessage(msg){ console.log(new Date()+":"+msg) } //默认导出 export default {simpleMessage,complexMessage} 导入默认： <!-- message.html --> <body> <div> <button id="bn">点我展示信息</button> </div> <script type="module"> import messageMethods from './showMessage.js' messageMethods.simpleMessage('aaa'); messageMethods.complexMessage('bbb'); } </script> </body> 前端学习笔记 2 Vue 前端学习笔记 2.1 快速入门 准备工作 引入 Vue 模块 创建 Vue 的应用实例 定义元素(div),交给 Vue 控制 构建用户界面 准备数据 用插值表达式渲染 前端学习笔记 2.1.1 渐进式用法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <h1>{{message}}</h1> <p>点击次数：{{count}}</p> <p>得分：{{double()}}</p> <button @click="increment">+</button> </div> <!-- 引入vue模块 --> <script type="module"> import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js' // 创建一个vue实例 const app = createApp({ // 组合式写法 setup() { // 定义一个数据 const message = ref('hello world') const count = ref(0) // 定义一个方法 const increment = () => { count.value++ } // 定义一个计算属性 const double = () => { return count.value * 2 } return { message, count, increment, double } } }) // 挂载到id为app的元素上 app.mount('#app') </script> </body> </html> 前端学习笔记 前端学习笔记 2.2 常用指令 指令：HTML 标签上带有 V-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能。 常用指令： 指令 作用 v-for 列表渲染，遍历容器的元素或者对象的属性 v-bind 为 HTML 标签绑定属性值，如设置 href,css 样式等 v-if/v-else-if/v-else 条件性的渲染某元素，判定为 true 时渲染，否侧不渲染 v-show 根据条件展示某元素，区别在于切换的是 display 属性的值 v-model 在表单元素上创建双向数据绑定 v-on 为 HTML 标签绑定事件 前端学习笔记 前端学习笔记 2.2.1 v-for 作用：列表渲染，遍历容器的元素或者对象的属性 语法：v-for="(item,ndex)in items" 参数说明： items 为遍历的数组 item 为遍历出来的元素 index 为索引/下标，从 0 开始；可以省略，省略 index 语法：v-for="item in items" [!WARNING] 注意 遍历的数组，选择式必须在 data 中定义，组合式直接定义响应式数据；要想让哪个标签循环展示多次，就在哪个标签上使用 V-for 指令。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <ul> <li v-for="item in list"> {{item}} </li> </ul> <ol> <li v-for="(item,index) in list"> {{index}}-{{item}} </li> </ol> <table border="1" width="100%" align="center" cellspacing="0" cellpadding="0"> <thead> <tr style="text-align: center;"> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody style="text-align: center;"> <tr v-for="(item,index) in objLs"> <td>{{index}}-{{item.name}}</td> <td>{{index}}-{{item.age}}</td> <td>{{index}}-{{item.sex}}</td> </tr> </tbody> </table> </div> <script type="module"> import { createApp, ref, reactive } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js' const app = createApp({ setup () { const list = ref(['a', 'b', 'c']) const objLs = reactive([ { name: 'ruan', age: 12, sex: '' }, { name: 'alleyf', age: 20, sex: '' }, { name: 'wang', age: 21, sex: '' } ]) return { list, objLs } } }) app.mount('#app') </script> </script> </body> </html> 前端学习笔记 前端学习笔记 2.2.2 v-bind 作用：动态为 HTML 标签绑定属性值，如设置 href,src,style 样式等。 语法：v-bind:属性名="属性值" 简化：:属性名="属性值" v-bind 所绑定的数据，必须在 data 中定义。 <body> <div id="app"> <a :href="url" style="text-decoration:solid;color:red;">{{title}}</a> </div> <script type="module"> import { createApp, ref, reactive } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js' const app = createApp({ setup () { const url = ref("https://www.baidu.com") const title = ref("百度一下") return { url, title } } }) app.mount('#app') </script> </script> </body> 前端学习笔记 2.2.3 v-if/v-show 作用：这两类指令，都是用来控制元素的显示与隐藏的 ==v-if== - 语法：v-if="表达式"，表达式值为 true,显示；false,隐藏 - 其它：可以配合 v-else-if/v-else 进行链式调用条件判断 - 原理：基于条件判断，来控制创建或移除元素节点（条件渲染） - 场景：要么显示，要么不显示，不频繁切换的场景 ==v-show== - 语法：v-show="表达式"，表达式值为 true,显示；false,隐藏 - 原理：基于 CSS 样式 display 来控制显示与隐藏 - 场景：频繁切换显示隐藏的场景 <body> <div id="app"> v-if-手串的价格为：<span v-if="customer.level === 0">￥{{price}}</span> <span v-else-if="customer.level === 1">￥{{price+20}}</span> <span v-else>￥{{price+50}}</span><br> v-show-手串的价格为：<span v-show="customer.level === 0">￥{{price}}</span> <span v-show="customer.level === 1">￥{{price+20}}</span> <span v-show="customer.level >= 2">￥{{price+50}}</span> </div> <script type="module"> import { createApp, ref, reactive } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js' const app = createApp({ setup () { const price = ref(100) const customer = reactive({ name: '小王', age: 18, level: 1 }) return { customer, price } } }) app.mount('#app') </script> </script> </body> 前端学习笔记 2.2.4 v-on 作用：为 html 标签绑定事件 语法：v-on:事件名="函数名" 简写为：@事件名="函数名" 选择式函数需要定义在 methods 选项内部，组合式直接定义箭头函数并 return 函数名即可。 <body> <div id="app"> <button type="button" v-on:click="handleClick(1)">按钮</button> <button type="button" @click="handleClick(2)">按钮</button> </div> <script type="module"> import { createApp, ref, reactive } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js' const app = createApp({ setup () { const handleClick = (num) => { console.log('你点击了按钮' + num) } return { handleClick } } }) app.mount('#app') </script> </script> </body> 前端学习笔记 2.2.5 v-model 作用：在表单元素上使用，双向数据绑定。可以方便的获取或设置表单项数据 <body> <div id="app"> <form action="#app" method="get"> <input type="text" placeholder="请输入姓名" v-model="queryForm.name" name="name" id="1"> <input type="text" placeholder="请输入年龄" v-model="queryForm.age" name="age" id="2"> <br> 当前输入的姓名：{{queryForm.name}} 当前输入的年龄：{{queryForm.age}} <br> <button type="submit">搜索</button> <button type="reset" @click="resetForm">重置</button> </form> <br> <table border="1" width="100%" align="center" cellspacing="0" cellpadding="0"> <thead> <tr style="text-align: center;"> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody style="text-align: center;"> <tr v-for="(item,index) in objLs"> <td>{{index}}-{{item.name}}</td> <td>{{index}}-{{item.age}}</td> <td>{{index}}-{{item.sex}}</td> </tr> </tbody> </table> </div> <script type="module"> import { createApp, ref, reactive } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js' const app = createApp({ setup () { const queryForm = ref({ "name": "", "age": null }) const resetForm = () => { queryForm.value = { "name": "", "age": null } } const objLs = reactive([ { name: 'ruan', age: 12, sex: '' }, { name: 'alleyf', age: 20, sex: '' }, ]) return { queryForm, resetForm, objLs } } }) app.mount('#app') </script> </script> </body> 前端学习笔记 2.2.6 生命周期 每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。 生命周期：指一个对象从创建到销毁的整个过程。 生命周期的八个阶段 ：每个阶段会自动执行一个生命周期方法（钩子），让开发者有机会在特定的阶段执行自己的代码 状态 阶段周期 beforeCreate 创建前 beforeMount 载入前 beforeUnmount 组件销毁前 beforeUpdate 数据更新前 created 创建后 mounted 挂载完成 unmounted 组件销毁后 updated 数据更新后 前端学习笔记 3 参考 实战篇-38_vue指令_v-bind_哔哩哔哩_bilibili Java程序员用学前端么？java开发所需的前端技术全教程（HTML/CSS/js/vue2/vue3/react）_哔哩哔哩_bilibili 快速上手 | Vue.js 前端开发 https://alleyf.github.io/2024/01/b87d14108aff.html 作者 alleyf 发布于 2024年1月2日 更新于 2024年1月2日 许可协议 Explainability for large language models A survey 上一篇 前端三件套-后端必备 下一篇 Please enable JavaScript to view the comments