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

本文介绍了Vue.js的发展历程,由尤雨溪于2014年创建并在后续年份发布2.x和3.x版本。讲解了Vue的安装方式,包括直接引用和使用Vue CLI创建项目。接着详细阐述了Vue模板语法,如文本渲染、属性绑定、条件渲染、列表渲染以及事件监听。最后提到了实际案例和学习资源,强调阅读官方文档的重要性。
摘要由CSDN通过智能技术生成

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值