【Vue】- Vue表达式

文章目录

  • 知识回顾
  • 前言
  • 源码分析
    • [1. 项目结构介绍(单页面应用程序)](#1. 项目结构介绍(单页面应用程序))
    • [2. 项目运行流程图(单页面应用程序)](#2. 项目运行流程图(单页面应用程序))
    • [3. 选项式和组合式api](#3. 选项式和组合式api)
    • [4. 插值表达式 {{}} 胡子语法](#4. 插值表达式 {{}} 胡子语法)
    • [5. reactive函数](#5. reactive函数)
    • [6. ref表达式](#6. ref表达式)
  • 拓展知识
  • 总结

知识回顾

前言

Vue项目介绍

源码分析

1. 项目结构介绍(单页面应用程序)

c 复制代码
VUE-DEMO
│─node_modules	          第三包文件夹
├─public                	放html文件的地方
| └─favicon.ico 	      	网站图标
├─src 			              源代码目录 → 以后写代码的文件夹
│  └─assets 	           	静态资源目录 → 存放图片、字体等
│  └─components         	组件目录 → 存放通用组件
│  └─App.vue   		        App根组件 → 项目运行看到的内容就在这里编写  
│  └─main.ts   		        入口文件 → 打包或运行,第一个执行的文件 
└─.eslintrc.cjs     	  	eslint配置文件
└─.gitignore     	      	git忽视文件
└─.prettierrc.json     		prettierrc配置文件
└─env.d.ts     		        ts代码智能提示使用
└─index.html          		index.html 模板文件
└─package.json		        项目配置文件 → 包含项目名、版本号、scripts、依赖包等
└─pnpm-lock.yaml 	      	pnpm锁文件,由pnpm自动生成的,锁定安装版本
└─README.md 	          	项目说明文档
└─tsconfig.app.json     	ts项目配置文件
└─tsconfig.json 	      	ts配置文件
└─tsconfig.app.json     	ts的node环境配置文件
└─vite.config.js 		      create-vue配置文件

2. 项目运行流程图(单页面应用程序)

项目运行后执行main.ts

main.ts中会执行app.vue文件,导入createapp方法,导入app.vue , 创建app实例对象

最后渲染到index.html容器中

3. 选项式和组合式api

  • 选项式
c 复制代码
<template>
  <button @click="toggle">显示隐藏图片</button>
  <img v-show="show" alt="Vue logo" src="./assets/logo.png" />
  <hr />
  计数器:{{ count }} <button @click="increment">累加</button>
</template>
<script>
export default {
  data() {
    return {
      show: true,
      count: 0
    }
  },
  methods: {
    toggle() {
      this.show = !this.show
    },
    increment() {
      this.count++
    }
  }
}
</script>
  • 组合式
c 复制代码
<template>
  <button @click="toggle">显示隐藏图片</button>
  <img v-show="show" alt="Vue logo" src="./assets/logo.svg" />
  <hr />
  计数器:{{ count }} <button @click="increment">累加</button>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const show = ref(true)
const toggle = () => {
  show.value = !show.value
}
const count = ref(0)
const increment = () => {
  count.value++
}
</script>

4. 插值表达式 {{}} 胡子语法

插值表达式是一种Vue的模板语法, 我们可以用插值表达式渲染出Vue提供的数据

  • 作用:利用表达式进行插值,渲染到页面中
  • 表达式:是可以被求值的代码,JS引擎会讲其计算出一个结果

注意事项:

  1. 在插值表达式中使用的数据 必须在setup函数中进行了提供
  2. 支持的是表达式,而非语句,比如:if for ...
  3. 不能在标签属性中使用 {{ }} 插值 (插值表达式只能标签中间使用)
c 复制代码
<template>
  <div>{{ title }}</div>
  <div>{{ sum(100, 200) }}</div>
  <p>{{ array[1] }}</p>
</template>

<script setup lang="ts">
const title = 'test'
const sum = (num1: number, num2: number) => {
  return num1 + num2
}
const array = [1, 2, 3]
</script>

5. reactive函数

c 复制代码
<template>
  <button @click="onClick">点击我</button>
  <button @click="addAge">增加年龄</button>
  <button @click="addHobbies">新增爱好</button>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
const person = reactive({
  name: '张三',
  age: 18,
  friend: {
    name: '李四',
    age: 20,
    hobbies: ['打游戏', '看电影']
  }
})
const onClick = () => {
  console.log('点击了')
  alert('点击了我')
}
const addAge = () => {
  person.age++
  console.log(person.age)
}
const addHobbies = () => {
  person.friend.hobbies.push('看书')
  console.log(person.friend.hobbies)
}
</script>

6. ref表达式

c 复制代码
<template>
  <div>年龄{{ age }}</div>
  <button @click="changeAge">修改年龄</button>
  <div>{{ person }}</div>
  <button @click="changePersonAge">修改person中年龄</button>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'

const age = ref(18)
const changeAge = () => {
  age.value++
}
const person = ref({ name: '张三', age: 18 })
const changePersonAge = () => {
  person.value.age++
}
</script>

拓展知识

reactive和ref的选择

  1. 开始分析
    ● reactive 可以转换对象成为响应式数据对象,但是不支持简单数据类型。
    ● ref 可以转换简单数据类型为响应式数据对象,也支持复杂数据类型,但是操作的时候需要 .value 。
    ● 它们各有特点,现在也没有最佳实践,没有明显的界限,所有大家可以自由选择。
  2. 推荐用法
    ● 如果能确定数据是对象且字段名称也确定,可使用 reactive 转成响应式数据,其他一概使用 ref 。这样就没有心智负担 。

总结

相关推荐
运维-大白同学5 分钟前
将django+vue项目发布部署到服务器
服务器·vue.js·django
Myli_ing35 分钟前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
I_Am_Me_1 小时前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
℘团子এ1 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z1 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
星星会笑滴1 小时前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
前端百草阁2 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜2 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
Backstroke fish2 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
zwjapple2 小时前
typescript里面正则的使用
开发语言·javascript·正则表达式