1.vue概述

vue作者尤雨溪

尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于Colgate University，后在Parsons设计学院获得Design & Technology艺术硕士学位，现任职阿里巴巴Weex团队。

2014年 Vue.js发布

2016年 Vue2.x发布

2022年 Vue3.x发布

2.vue的安装与使用

1.直接引用script

2.安装脚手架

npm install -g @vue/cli

3.创建应用实例

createApp函数创建一个新的应用实例

const app = Vue.createApp({

data() {

return { count: 4 }

}

})

const vm = app.mount('#app')

console.log(vm.count)

3.Vue模板语法-文本渲染

1.文本渲染{{mag}}

const app = Vue.createApp({

data() {return { msg: ‘你好Vue3’ } }

})

const vm = app.mount('#app')

2 v-text和v-html指令

4.Vue模板语法-属性渲染

1.指令参数

指令是带有 v- 前缀的特殊 attribute。指令属性值预期是单个 JavaScript 表达式

一些指令能够接收一个“参数"，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 属性：

<div v-bind:title="title"> 学前端，薪资就是高</div>

2.属性渲染

我们可以使用v-bind指令给html标签动态的绑定属性。

3.属性渲染简写

v-bind可以简写为

<div :title="title"> 学前端，薪资就是高</div>

5.条件渲染

1.条件渲染v-if和条件渲染 v-show

指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值的时候被渲染。

2.条件渲染 v-else-if

6.列表渲染

1.v-for和v-for 索引

我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

2.v-for与v-if一同使用

7.事件

1.监听事件

我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。

<button @click="counter++">{{counter}}</button>

<button v-on:click="counter--">{{counter}}</button>

Vue.createApp({

data() {

return { counter: 1 }

}

}).mount('#app')

2.内联处理器中的方法

8.进步器案列和选项卡案例

补充

Vue官网

https://v3.cn.vuejs.org/

想要学会编程，必须学会看文档api

超简单的vue3.0，必看文档相关推荐

Springboot 超简单实现在线预览,Word文档 doc、xlsx、pdf、txt等
前言 PDF.TXT 只要资源可访问,根本就不需要进行任何处理,直接访问查看就完事了. 也是因为这个PDF可以直接查看(现在浏览器基本支持了),那么我们实现Word文档在线预览,其实也是把WORD文 ...
java程序员开发app使用uni-app必看文档！
文章目录 uni-app的基本使用 uni-app介绍 [官方网页](https://uniapp.dcloud.io/resource) 环境搭建利用HbuilderX初始化项目运行项目介绍项 ...
h5 默认为移动端页面_20条移动前端H5页面开发规范，h5开发必看文档
这是根据腾讯最新公布的<移动页面用户行为报告>来给大家分享的关于移动端H5页面开发一些20条规范和准则.里面大概包含了16种用户操作习惯和注意点. 下面25学堂跟大家先分享一张关于2016 ...
有了docsify神器，从此爱上看文档
有了docsify神器,从此爱上看文档简介一个神奇的文档网站生成工具我们在做完项目的时候经常会写一些项目手册,来记录我们在项目开发过程中的一些开发流程.使用方式以及注意事项,分享给将会使用到这个 ...
Unity Monetization 3.0 部分接入文档内容
GameId 在 Operate Dashboard 左边的导航栏中Monetization --> Platforms 下,IOS和Android都有,是七位数数字. 一定记得,要 Monet ...
看文档学redis以及面试题2(配套发出有docker以及linux两个不同的皆可学习)
看文档学redis以及面试题(配套发出有docker以及linux两个不同的皆可学习) 遇到的坑都会讲到这是配套的第二章内容今天讲的是redis的五大数据类型的使用场景以及五大数据类型的常用命令以 ...
1. ID3 tag version 2.3.0（非正式文档中文翻译）
1. ID3 tag version 2.3.0 1.1 文档情况本文档是一个非正式的标准,取代了id3v2.2.0标准.非正式标准的发布使得实现者可以在正式标准设定之前就有了一个设定的标准.正式标 ...
1015葛芮杉李睿莹|1-圖像处理与人脸识别的结合应用。群里贴图2-每组学会一个新的ffmpeg的命令，用于视音频处理（自学：看文档，搜索等）3-每组学会2个图像处理的函数，贴图
#人脸识别+裁切+粘贴 import cv2 import numpy as np import pandas as pd import os from matplotlib import pyplo ...
搭建去中心化交易所——分享一个简单的DEX项目代码及文档
分享一个简单的DEX项目代码及文档 Dex.top项目源码及文档分享 // DEx.top - Instant Trading on Chain // // Author: DEx.top Teamp ...

超简单的vue3.0，必看文档