黑马JavaWeb企业级开发(知识清单DAY2完结）06——Vue（概述、指令、生命周期）

Cosmos复调

于 2024-08-26 15:28:39 发布

阅读量544

点赞数 11

分类专栏：黑马JavaWeb企业级开发全流程（笔记梳理）文章标签： vue.js 前端 javascript 前端框架 vue vscode

本文链接：https://blog.csdn.net/apple_68589597/article/details/141562132

版权

6 篇文章 1 订阅

订阅专栏

前言

本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单DAY2完结）06：Vue（概述、指令、生命周期）的总结，帮助需要学习Web开发的朋友温故而知新。

第一步：在VS Code中创建名为12. Vue-快速入门.html的文件，并且在html文件同级创建js目
录，将资料/vue.js文件目录下得vue.js拷贝到js目录
第二步：编写< script >标签来引入vue.js文件
第三步：在js代码区域定义vue对象
- 在创建vue对象时，有几个常用的属性：
- el: 用来指定哪儿些标签受 Vue 管理
  - 该属性取值 #app 中的 app 需要是受管理的标签的id属性值
- data: 用来定义数据模型
- methods: 用来定义函数
第四步：在html区域编写视图，其中{{}}是插值表达式，用来将vue对象中定义的model展示到页面上
- v-model是数据绑定指令，使用之后数据模型（message）中的数据就会直接在视图层中展示出来
- 视图层的数据和和message数据是一体的，前者变了后者也会跟着变（相互影响）
- 插值表达式
  - 形式：{{表达式}}
  - 内容：可以是变量、三元运算符、函数调用、算数运算

v-model
- 在表单元素上创建双向数据绑定
- 双向：vue对象的data属性中的数据变化，视图展示会一起变化视图数据发生变化，vue对象的data属性中的数据也会随着变化
- 双向绑定一定是使用在表单项标签上的
  <input type="text" v-model="url">
  
  注意：一旦v-bind或者v-model绑定了某个变量（url），那么这个变量必须要在数据模型中被定义

v-on
为html标签绑定事件。注意：
- v-on语法给标签的事件绑定的函数，必须是vue对象声明的函数
- 完整语法：<input type="button" value="按钮" v-on:click="handle()">
- 简写语法：<input type="button" value="按钮" @click="handle()">
v-if
- 条件性的渲染某元素，判定为true时渲染,否则不渲染

只会渲染符合条件的< span >标签
在这里插入图片描述

v-show
- 根据条件展示某元素，区别在于切换的是display属性的值
  
  所有的< span >标签都会渲染，只是通过display来控制是否展示该渲染标签
v-for
- 列表渲染，遍历容器的元素或者对象的属性
- 语法

本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单DAY2完结）06：Vue（概述、指令、生命周期）的总结，帮助需要学习Web开发的朋友温故而知新。

关注