2023年最新版Vue3（官方文档超细致教程一）

Vue安装

npm安装

官方 CLI 构建项目

Vue.createApp(Counter).mount(‘#conter’) 是有返回值的
在这里插入图片描述执行会输出啥？
0
张三

createApp 是一个 proxy 对象，拥有很多（ num、uname、setup、data、methods、computed、created… ）属性和方法

vue 的数据的双向绑定，可以在网页源码里修改属性数据的值

Vite构建项目

使用npm

# npm 6.x
$ npm init vite@latest <project-name> --template vue

# npm 7+，需要加上额外的双短横线
$ npm init vite@latest <project-name> -- --template vue

$ cd <project-name>
$ npm install
$ npm run dev

要使用 npm，需要先安装 Node.js。将替换成自己的项目的名字。
在项目中打开终端命令行输入：

npm init vite@latest <project-name> -- --template vue 
cd <project-name>
npm install - 安装依赖包
npm run dev - 运行 vue 项目

项目结构

在这里插入图片描述

声明式渲染

在这里插入图片描述

最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：

Message: { { msg }}

双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。

组件

用户定义组件属性的方法：

data，methods，props，computed，inject 和 setup

vue定义内置 property的方法：如 $attrs 和 $emit。
$ 前缀 - 避免与用户定义的 property 名冲突

组件实例的所有 property，无论如何定义，都可以在组件的模板中访问。
{ { msg }} 会被替换为组件实例中的 msg 属性的值

v-once 指令 - 一次性插值 - 最好不要使用

加上 v-html=“” 以后，就不需要 { {msg}} 了
绝对不要价格用户提供的 HTML 内容插值渲染，很容易导致 XSS 网络攻击。所以要谨慎使用 v-html

v-bind

因为 v-bind 非常常用，我们提供了特定的简写语法：

<div :id="dynamicId"></div>

在这里插入图片描述

{
   
   { number + 1 }}

{
   
   { ok ? 'YES' : 'NO' }}

{
   
   { message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

这些表达式都会被作为 JavaScript ，以组件为作用域解析执行。

在 Vue 模板内，JavaScript 表达式可以被使用在如下场景上：

在文本插值中 (双大括号)
在任何 Vue 指令 (以 v- 开头的特殊 attribute) attribute 的值中

v-if 指令会基于表达式 seen 的值的真假来移除/插入该p元素。缩写:字符
v-bind 指令来响应式地更新一个 HTML attribute
v-on 指令，它将监听 DOM 事件,v-on 有一个相应的缩写，即 @ 字符

语法糖 - 语法缩写
v-bind: -> :
v-on: -> @
在这里插入图片描述

动态参数

在这里插入图片描述修饰符 Modifiers
修饰符是以点开头的特殊后缀，表明指令需要以一些特殊的方式被绑定。

计算属性的 Setter

在这里插入图片描述