vue
关注
分享
扫一扫
文章平均质量分 72
小张哎！
这个作者很懒，什么都没留下…
展开
-
【vue】实训总结
2021年12月31日 一、vue：前端框架 其特性体现：数据驱动试图、双向数据绑定 二、vue的指令： ①{{}}语法-插值表达式：优点是不会覆盖元素中默认的文本内容 ②属性绑定指令（v-bind）：为元素属性动态绑定属性值，其简写形式（：） ③事件绑定指令（v-on）：用来辅助程序员为 DOM 元素绑定事件监听 通过 v-on 绑定的事件处理函数，需要在 methods 节点中进行声明 其简写形式为（@） 事件修饰符：.prevent阻止默认行为：（例如：阻止原创 2022-01-07 23:42:05 · 6818 阅读 · 0 评论 -
【vue】购物车案例+登录界面(实训1.7）
效果如下： 登录成功过后跳转如下： //Login.vue <template> <div class="login-container"> <div class="login-box"> <!-- 头像区域 --> <div class="text-center avatar-box"> <img src="./assets/login.jpg" class="img-thumbnail avatar" alt原创 2022-01-07 15:38:04 · 1844 阅读 · 0 评论 -
【vue】组件基础-下（实训1.3）
props 验证 1. 什么是 props 验证 指的是：在封装组件时对外界传递过来的props 数据进行合法性的校验，从而防止数据不合法的问题。 2. 对象类型的 props 节点 使用对象类型的 props 节点，可以对每个 prop 进行数据类型的校验。 3.1 基础的类型检查 可以直接为组件的 prop 属性指定基础的校验类型，从而防止组件的使用者为其绑定错误类型的数据： 3.2 多个可能的类型 如果某个 prop 属性值的类型不唯一，此时可以通过数组的形式，为其指定多个可能的类型，示例代码如下：原创 2022-01-05 21:48:58 · 119 阅读 · 0 评论 -
【vue】购物车案例（实训1.6）
0. 实现步骤 ① 初始化项目基本结构 ② 封装 EsHeader 组件 ③ 基于 axios 请求商品列表数据 ④ 封装 EsFooter 组件 ⑤ 封装 EsGoods 组件 ⑥ 封装 EsCounter 组件 1. 初始化项目结构 1. 运行如下的命令，初始化 vite 项目： npm init vite-app code-cart cd code-cart npm install 2. 清理项目结构： 把 bootstrap 相关的文件放入 src/assets 目录下 在 main.js 中导原创 2022-01-05 17:12:10 · 2724 阅读 · 3 评论 -
【vue】组件高级-watch侦听器等（实训1.5）
watch 侦听器的基本语法 <template> 用户名：<input type="text" class="form-control" v-model.trim="username" /> </template> <script> export default{ name:'MyWatch', data(){ return{ username:'', } }, watch:{ //侦听username的变原创 2022-01-05 15:43:05 · 1070 阅读 · 0 评论 -
【vue】任务列表案例（实训1.4）
1. 初始化项目 1.在终端运行以下的命令，初始化 vite 项目： npm init vite-app mytodolist2 2.切换路径 cd mytodolist2 3.使用 vscode 打开项目，并安装依赖项 npm install 4.启动项目 npm run dev 测试一下：结果如下 2.梳理项目结构 重置 index.css 中的全局样式如下： /*所有元素*/ :root { font-size: 12px; } body { padding: 8px; } 重置原创 2022-01-04 11:30:26 · 1138 阅读 · 0 评论 -
【vue】组件基础-上（实训1.2）
vite 的基本使用 注意：每次运行程序之前，都要在该文件夹下，按住shift然后点击右键，进入之后输入npm run dev之后才进行以后的操作。 代码运行的结果在google浏览器查看。 输入网址：localhost:3000 1. 创建 vite 的项目 按照顺序执行如下的命令，即可基于 vite 创建 vue 3.x 的工程化项目： npm init vite-app 项目名称 cd 项目名称 npm install npm run dev 2.vite 项目的运行流程 在工程化的项目中，vue原创 2022-01-03 23:19:08 · 671 阅读 · 0 评论 -
【vue】品牌列表案例（1.1实训）
基于 vue 渲染表格数据 步骤1：使用 v-for 指令循环渲染表格的数据 <tr v-for="brand in brandlist" :key="brand.id"> <td>{{brand.id}}</td> <td>{{brand.brandname}}</td> <td>{{brand.state}}</td> <td>{{brand.addtime}}</td> <td&原创 2022-01-01 16:47:03 · 737 阅读 · 0 评论 -
【vue】插值表达式、v-bind、v-on（12.31上午实训）
1、{{ }} 语法 vue 提供的 {{ }} 语法，专门用来解决 v-text 会覆盖默认文本内容的问题。这种 {{ }} 语法的专业名称是插值表达式 2、 属性绑定指令 v-bind 由于 v-bind 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的 : ）。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title&原创 2021-12-31 22:22:07 · 712 阅读 · 0 评论 -
【vue】v-model、v-if、v-for、过滤器（12.31下午实训）
双向绑定指令 v-model vue 提供了 v-model 双向数据绑定指令，用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据。 注意：v-model 指令只能配合表单元素一起使用！ 为了方便对用户输入的内容进行处理，vue 为 v-model 指令提供了 3 个修饰符，分别是： ①.number 自动将用户的输入值转为数值类型 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &原创 2021-12-31 16:46:07 · 727 阅读 · 0 评论