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

1.vue概述

vue作者尤雨溪

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

2014年 Vue.js发布

2016年 Vue2.x发布

2022年 Vue3.x发布

2.vue的安装与使用

1.直接引用script

<script src="https://unpkg.com/vue@next"></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标签动态的绑定属性。

<button v-bind:disabled="canUse">按钮</button>

3.属性渲染简写

v-bind可以简写为

<button :disabled="canUse">按钮</button>

<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