vue
文章平均质量分 72
小张哎!
这个作者很懒,什么都没留下…
展开
-
【vue】实训总结
2021年12月31日一、vue:前端框架 其特性体现:数据驱动试图、双向数据绑定二、vue的指令: ①{{}}语法-插值表达式:优点是不会覆盖元素中默认的文本内容 ②属性绑定指令(v-bind):为元素属性动态绑定属性值,其简写形式(:) ③事件绑定指令(v-on):用来辅助程序员为 DOM 元素绑定事件监听 通过 v-on 绑定的事件处理函数,需要在 methods 节点中进行声明 其简写形式为(@)事件修饰符:.prevent阻止默认行为:(例如:阻止原创 2022-01-07 23:42:05 · 6554 阅读 · 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 · 1735 阅读 · 0 评论 -
【vue】组件基础-下(实训1.3)
props 验证1. 什么是 props 验证指的是:在封装组件时对外界传递过来的props 数据进行合法性的校验,从而防止数据不合法的问题。2. 对象类型的 props 节点使用对象类型的 props 节点,可以对每个 prop 进行数据类型的校验。3.1 基础的类型检查可以直接为组件的 prop 属性指定基础的校验类型,从而防止组件的使用者为其绑定错误类型的数据:3.2 多个可能的类型如果某个 prop 属性值的类型不唯一,此时可以通过数组的形式,为其指定多个可能的类型,示例代码如下:原创 2022-01-05 21:48:58 · 99 阅读 · 0 评论 -
【vue】购物车案例(实训1.6)
0. 实现步骤① 初始化项目基本结构② 封装 EsHeader 组件③ 基于 axios 请求商品列表数据④ 封装 EsFooter 组件⑤ 封装 EsGoods 组件⑥ 封装 EsCounter 组件1. 初始化项目结构1. 运行如下的命令,初始化 vite 项目:npm init vite-app code-cartcd code-cartnpm install2. 清理项目结构:把 bootstrap 相关的文件放入 src/assets 目录下在 main.js 中导原创 2022-01-05 17:12:10 · 2575 阅读 · 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 · 983 阅读 · 0 评论 -
【vue】任务列表案例(实训1.4)
1. 初始化项目1.在终端运行以下的命令,初始化 vite 项目:npm init vite-app mytodolist2 2.切换路径cd mytodolist23.使用 vscode 打开项目,并安装依赖项npm install4.启动项目npm run dev测试一下:结果如下2.梳理项目结构重置 index.css 中的全局样式如下:/*所有元素*/:root {font-size: 12px;}body {padding: 8px;}重置原创 2022-01-04 11:30:26 · 1064 阅读 · 0 评论 -
【vue】组件基础-上(实训1.2)
vite 的基本使用注意:每次运行程序之前,都要在该文件夹下,按住shift然后点击右键,进入之后输入npm run dev之后才进行以后的操作。代码运行的结果在google浏览器查看。输入网址:localhost:30001. 创建 vite 的项目按照顺序执行如下的命令,即可基于 vite 创建 vue 3.x 的工程化项目:npm init vite-app 项目名称cd 项目名称npm installnpm run dev2.vite 项目的运行流程在工程化的项目中,vue原创 2022-01-03 23:19:08 · 597 阅读 · 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 · 638 阅读 · 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 · 631 阅读 · 0 评论 -
【vue】v-model、v-if、v-for、过滤器(12.31下午实训)
双向绑定指令 v-modelvue 提供了 v-model 双向数据绑定指令,用来辅助开发者在不操作 DOM 的前提下,快速获取表单的数据。注意:v-model 指令只能配合表单元素一起使用!为了方便对用户输入的内容进行处理,vue 为 v-model 指令提供了 3 个修饰符,分别是:①.number 自动将用户的输入值转为数值类型 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> &原创 2021-12-31 16:46:07 · 633 阅读 · 0 评论