Vue3

1.Vue简介

1.Vue的特点

• 采用组件化模式，提高代码复用率、且让代码更好维护。
• 声明式编码，让编码人员无需直接操作Dom,提高开发效率。
• 使用虚拟Dom+优秀的Diff算法，尽量复用Dom节点。

2.入门案例

    
    
    
    
    


    

        
 counter:{{ num }}
    

    

可以用 app.num = 10修改值

2.用 Vite来创建一个vue项目

使用 npm：

npm init vite-app vue3demo03  //vue3demo03 项目名称
cd vue3demo03
npm install
npm run dev    

创建好后生成：

3.Vue声明式语法与数据双向绑定（v-model）

App.vue

运行结果：

改变输入框的值，上面的值就会改变，这就是双向绑定

单击后，会改变值

4.模板语法常用指令

插值

1.文本 （v-once指令）

数据绑定最常见的形式就是使用“Mustache” (双大括号) 语法的文本插值：

Message: {{ msg }}

Mustache 标签将会被替代为对应组件实例中 msg property 的值。无论何时，绑定的组件实例上 msgproperty 发生了改变，插值处的内容都会更新。

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：

这个将不会改变: {{ msg }}

2.原始 HTML Attribute （v-html指令 、v-bind指令）

展示结果：

点击helloword后：

3.使用 JavaScript 表达式

展示结果：

动态指令

5.计算属性和监听器

1.计算属性

展示结果：

2.监听器 (监听数据的变化)

展示结果

6.Class与Style绑定

1.Class类名的多种操作方式

输出结果：

2.Style样式的多种操作方式

展示效果

点击后