Vue3的使用

1.简单的vue实例

Vue3的使用_第1张图片

 Vue3的使用_第2张图片

1.data函数介绍

Vue3的使用_第3张图片

 Vue3的使用_第4张图片

 

也可以修改data里的数据

2.自定义函数

Vue3的使用_第5张图片

 调用函数

 3.Vue模板语法

(1).V-html

Vue3的使用_第6张图片

  (2)三目运算符的支持

Vue3的使用_第7张图片

 (3)对函数的支持

Vue3的使用_第8张图片

 (4)v-bind 值动态修改

Vue3的使用_第9张图片

 4.指令

(1).v-if和v-else的使用

Vue3的使用_第10张图片

(2).v-for

Vue3的使用_第11张图片

 4.传参数

(1)v-href

Vue3的使用_第12张图片

 (2)双向数据绑定

Vue3的使用_第13张图片(3)v-show

Vue3的使用_第14张图片

 5.组件的定义

(1)全局组件的定义

Vue3的使用_第15张图片

(2)局部组件

Vue3的使用_第16张图片

(3)Prop可以完成子组件,与父组件的值的传递

Vue3的使用_第17张图片

 (4)computed方法使用,以及和methods的区别

Vue3的使用_第18张图片

这两者的区别如下

5)$watch事件监听

    注意使用之前请先挂载好

Vue3的使用_第19张图片

 6.钩子函数

 Vue3的使用_第20张图片

 Vue3的使用_第21张图片

 7,Vue的路由

1.先导入脚本

8.Axios基本使用

1.get请求

Vue3的使用_第22张图片

 2.post请求

Vue3的使用_第23张图片

你可能感兴趣的:(html,vue.js)