前端框架学习-Vue(一)

Vue简介

百度百科上关于vue的词条,说vue时一款渐进式JavaScript框架,

简单来说,渐进式是一种设计理念,即在不失去当前功能的前提下,逐步添加新的特性。

说明它时一直在进行维护的。

Vue3,中使用*.vue作为文件后缀,html,css和js都可以写在这个文件中

Vue特性

这两天进行了简单的基础学习,对它的特性有了一个浅显的入门的了解

  1. 声明式 的元素使用,可以在html中使用类似JSP中的EL表达式,在js中声明变量,在页面直接使用{``{ 元素名 }}的形式引用
  2. 组件化的开发,可以将页面内容进行封装成为组件,在其他的组件中进行引用,从而减少重复造轮子。
  3. 其他特性,对于有些开发经验的同学,这些式需要特殊关注的。

Vue学习路径

  1. 学习前端开发所必须的知识:html,css,js
  2. 学习vue的核心概念:组件、指令、数据绑定、机算属性
  3. 学习Vue的生命周期、钩子、事件
  4. 掌握Vue的路由和状态管理库
  5. 学习Vue如何与后端服务器进行通信,如ajax
  6. 在实际开发中不断使用Vue和实践开发

创建一个Vue组件可以包含

data(){}- 进行数据初始化,将需要展示的元素,在data中进行return
mounted(){}- 页面进行渲染的时候的会执行的代码块
method():{}- 进行方法声明,可以添加参数
computed:{}- 使用方法的形式,添加一个属性计算的方法,在使用的时候使用方法名进行取值,使用computed的方式(计算属性)进行赋值的时候,会保存一个缓存值。方便大对象的使用。不会频繁调用。提高效率。只有当依赖的元素发生改变的时候才会更新缓存。提供get、set方法会在模型改变后立即更新。

声明式变量使用

  1. 使用{``{ msg }}的方式进行变量绑定(在html文本中)
  2. 使用v-bind:id="dynamicId"的在html元素上进行变量绑定,简写为:id="dynamicId" 在进行元素绑定的时候可以使用表达式进行简单计算,表达式需要是能够写在js定义方法时,写在return后的内容

    除了表达式,还可以调用函数,前提是函数有返回值

常用指令

  1. v-text,更新文本内容
  2. v-html,更新元素的innerHTML
  3. v-show,根据表达式的值来判断是否渲染某个元素
  4. v-if,v-else,v-else-if作用类似于if代码块
  5. v-for,进行列表渲染,<div v-for="item in items">
  6. v-on,给元素绑定事件,可以加修饰符
  7. v-bind,绑定元素属性
  8. v-model,表单元素和组件内容的双向绑定,可以收集表单内容向后端传递
  9. v-propv-slot用来在组件之间传递和接收数据
  10. v-pre元素内容原样输出
相关推荐
苜柠19 分钟前
Wpf学习片段
学习
清风细雨_林木木31 分钟前
Vue 2 项目中配置 Tailwind CSS 和 Font Awesome 的最佳实践
前端·css·vue.js
欢乐熊嵌入式编程1 小时前
智能手表固件升级 OTA 策略文档初稿
嵌入式硬件·学习·智能手表
起床学FPGA1 小时前
异步FIFO的学习
学习·fpga开发
依年南台1 小时前
搭建大数据学习的平台
大数据·学习
小虎卫远程打卡app2 小时前
视频编解码学习10之成像技术原理
学习·计算机视觉·视频编解码
X Y O3 小时前
神经网络初步学习——感知机
人工智能·神经网络·学习·感知机
小王努力学编程3 小时前
高并发内存池(三):TLS无锁访问以及Central Cache结构设计
jvm·数据结构·c++·学习
hnlucky3 小时前
通俗易懂版知识点:Keepalived + LVS + Web + NFS 高可用集群到底是干什么的?
linux·前端·学习·github·web·可用性测试·lvs
懒羊羊我小弟3 小时前
使用 ECharts GL 实现交互式 3D 饼图:技术解析与实践
前端·vue.js·3d·前端框架·echarts