vue3 基础知识

vue3创建一个项目

复制代码
PS D:\code> npm init vue@latest

Vue.js - The Progressive JavaScript Framework

√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? >> No
√ Add ESLint for code quality? ... No / Yes
Scaffolding project in D:\code\vue-demo1...

Done. Now run:

  cd vue-demo1
  npm install
  npm run dev
PS D:\code> cd .\vue-demo1\

 
PS D:\code\vue-demo1> npm install

added 25 packages, and audited 26 packages in 33s

3 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
PS D:\code\vue-demo1> npm run dev

> vue-demo1@0.0.0 dev
> vite


  VITE v4.4.9  ready in 453 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

1.模板语法

数据绑定最常见的形式就是使用"双大括号" 语法在HTML中插入文本:

复制代码
<p>Message: {{ msg }}</p>

{{msg}}将被替代对应组件实例中msg属性的值。无论何时,绑定的组件实例上msg属性发

生改变,插值处内容都会更新

复制代码
<template>
<h1>{{ msg }}</h1>
</template>

<script>
export default{
   data(){    //data函数
    return {   //return 方法
      msg:"1234567"
    }
   }
}
</script>

2.Vue 常用指令

• 指令介绍

• v-text

• v-html

• v-bind

• v-on

• 指令缩写

指令:带有 v- 前缀的特殊属性。

指令的作用:当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM

v-text作用与双大花括号作用一样,将数据填充到标签中。但没有闪烁问题!

某些情况下,从服务端请求的数据本身就是一个HTML代码,如果用双大括号会将数据解

释为普通文本,而非HTML代码,为了输出真正的HTML,需要使用v-html指令。

在前端开发中,我们经常监听用户发生的事件,例如点击、拖拽、键盘事件等。

在Vue中如何监听事件呢?使用v-on指令,v-on: 冒号后面是event参数,例如click、change

示例:监听按钮的点击事件

相关推荐
专注API从业者3 分钟前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile6 分钟前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639979 分钟前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊14 分钟前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火14 分钟前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月4 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀4 小时前
html初学者第一天
前端·html
速易达网络7 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘7 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家7 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能