前端扯犊子之三Vue3（一）

一、概述

1、安装：

可npm可cdn可 script 标签本地引入
注：filters过滤器已从Vue 3.0中删除，不再支持。建议用方法调用或计算属性替换它们

2、指令集：

v-html 指令用于输出 html 代码
v-bind 绑定，可以进行样式绑定【对象（可多个属性、绑定计算属性）、数组（传入多个class、三元表达式、使用对象）、用于组件、内联】
v-on 指令用于监听 DOM 事件
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定
v-if 将根据表达式的布尔值进行操作，如果属性值为 null 或 undefined，则该属性不会显示出来。可以用 v-else 指令给 v-if 添加一个 "else" 块，v-else-if 用作 v-if 的 else-if 块。可以链式的多次使用
v-show 指令来根据条件展示元素
v-for 可以绑定数据到数组来渲染一个列表，可以迭代对象、迭代整数,可以提供第二个的参数为键名，第三个参数为索引
v-once 只渲染一次
v-pre 跳出渲染
v-text innerText输出

3、缩写

v-bind 语法糖为 :
v-on 语法糖为 @

4、简单例子：


  {{ message }}

5、模板

//src/APP.vue 文件代码

二、脚手架工具

Vue CLI / Vite
vite更快，10~100倍。Vue CLI 是构建在 Webpack 之上，Vite 有自己的开发服务器，利用浏览器中的原生 ES 模块。这种架构使得 Vite 比 Webpack 的开发服务器快了好几个数量级。Vite 采用 Rollup 进行构建，速度也更快。与 Webpack/Vue CLI 不同，Vite 无法创建针对旧版浏览器、web components 等的捆绑包。

三、methods方法


    {{ message }}

四、计算属性 computed、监听属性 watch

1、计算属性 computed

与methods比较： computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter

2、监听属性 watch


    千米 : 
    米 :

五、事件

v-on用来监听

1、事件修饰符

由点 . 表示的指令后缀来调用修饰符。

.stop - 阻止冒泡
.prevent - 阻止默认事件
.capture - 阻止捕获
.self - 只监听触发该元素的事件
.once - 只触发一次
.left - 左键事件
.right - 右键事件
.middle - 中间滚轮事件










...

...

2、按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：



//记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

全部的按键别名：
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
系统修饰键：

.ctrl
.alt
.shift
.meta
鼠标按钮修饰符:

.left
.right
.middle

.exact 修饰符

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

六、表单

1、类型：

input
textarea
input type="checkbox" 单/复选框
input type="radio" 单选按钮
select 列表


  
 
  
      选择的网站是: {{selected}}

2、修饰符

input v-model.lazy="msg" 不再实时更新，在失焦和回车时更新
input v-model.number="age" type="number" 将输入转为number
input v-model.trim="msg" 自动过滤输入的首尾空格

参考链接;
https://blog.csdn.net/buduoduoorg/article/details/113462959
https://www.runoob.com/vue3/vue3-tutorial.html