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

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

word@tips官方文档和教程@软件界面介绍@功能区自定义@拼写检查@AI润色改进@ 图片顶部上方插入文字
文章目录 word 文档和教程 word软件界面元素字符和标记格式标记段落标记(paragraph marks) 自定义功能区(Ribbon) 自定义功能区要点@层次关系添加自定义选项卡(ta ...
微信小程序联盟：官方文档+精品教程+demo集合（12月更新……）
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
微信小程序导航：官方文档+精品教程+demo集合（5月9日更新)
微信小程序联盟:官方文档+精品教程+demo集合 1:官方工具:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1 ...
八月微信小程序导航：官方文档+精品教程+demo集合（8月25...
2019独角兽企业重金招聘Python工程师标准>>> 1:官方工具: https://mp.weixin.qq.com/debug/w ... tml?t=147643467846 ...
微信小程序导航：官方文档+精品教程+demo集合（5月31日更新)
官方文档 1:官方工具:https://mp.weixin.qq.com/debug/w - tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/d ...
好消息，Vue3官方文档出中文版的啦！
今天在看vue-composition-api文档的时候,突然发现多出来个Languages选项: 咦奇怪,我记得以前好像没有这个选项的呀.赶紧点开看看有没有中文: 太棒了!还是尤大对咱好,感动得我热 ...
阅读vue3官方文档之摘录
基础模板语法动态参数也可以在指令参数中使用 JavaScript 表达式,方法是用方括号括起来: <!-- 注意,参数表达式的写法存在一些约束,如之后的"对动态参数表达式的约束& ...
微信小程序联盟：官方文档+精品教程+demo集合（未完待续，持续更新中……）
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
微信小程序联盟：官方文档+精品教程+demo集合（5月31日更新，持续更新中……）...
2019独角兽企业重金招聘Python工程师标准>>> 微信小程序联盟 1:官方工具: https://mp.weixin.qq.com/debug/w ... tml?t=1476 ...

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