008 前端vue

vue优点之一：元素和数据能同时变化

一、vue2

1.基本框架

基本写法：

<template><div></div></template>
<script lang="ts">
// 以下是vue2的写法
export default{// 所有数据放在data里面data() {return{}},//所有函数都放在这里methods:{}
}
</script>
<style scoped></style>

2.表单控件获取值

3.表单控件获取文本信息

4.绑定事件

5.单选按钮

6.选择多个选项（数组）

7.信息成组出现

8.遍历多个值

9.总汇

10.追加

添加样式和css一样

11.v-if

是否有

12.v-show

是否展示

13.全部代码

<template><div><!-- 单选/多选/下拉框这种表单控件，要获取值，用v-model --><!-- br表示插入一个换行符 --><!-- 获取文本信息用两个花括号 -->姓名:<input type="text" v-model="username" >{{ username }}<br>成绩:<input type="text" v-model="score">{{ score }}<br><!-- 设置按钮成绩提高 --><!-- 给button绑事件，点击之后触发添加成绩的方法 addScore()--><button v-on:click="addScore()" >成绩提高</button><div><!-- <input type="radio"> 表示单选按钮，用于从一组选项中选择唯一的一个选项 --><!-- 想让对象成组出现，v-model="对象名+属性名" -->性别:<input type="radio" value="1" v-model="userInfo.sex">男<input type="radio" value="2" v-model="userInfo.sex">女<br>年龄:<input type="number" v-model="userInfo.age"><br><!-- 多个选项选一个 -->学科：<select v-model="userInfo.obj"><option value="Math">数学</option><option value="Chinese">语文</option><option value="English">英语</option></select><br><!-- 数组用循环实现成组出现 -->爱好:<span v-for="(skill, index) in userInfo.interest" :key="index">{{ skill }}</span><!-- 设置添加选项按钮,点击这个按钮触发新增爱好方法，并且绑定新爱好这个输入框 -->新爱好:<input type="text" v-model="newInterest"><button v-on:click="addInterest()">增加新爱好</button><!-- 总汇 -->个人信息<div>{{ userInfo }}</div></div></div>
</template><script lang="ts">
// 以下是vue2的写法
export default{// 所有数据放在data里面data() {return{username:"张三",score:500,userInfo:{sex:1,age:23,obj:"Math",// 爱好可以有很多个，所以可以用数组interest:['篮球','足球','乒乓球']},// 新增爱好，初始值为空newInterest:""}},//所有函数都放在这里methods:{addScore(){this.score+=10},// 添加方法：新增爱好addInterest(){// 如果不是空的电话，执行下面语句if(this.newInterest)// 增加this.userInfo.interest.push(this.newInterest)}}
}
</script>
<style scoped></style>

二、vue3

只能在控制台打印

<template><div><!-- 单选/多选/下拉框这种表单控件，要获取值，用v-model --><!-- br表示插入一个换行符 --><!-- 获取文本信息用两个花括号 -->姓名:<input type="text" v-model="username" >{{ username }}<br>成绩:<input type="text" v-model="score">{{ score }}<br><!-- 设置按钮成绩提高 --><!-- 给button绑事件，点击之后触发添加成绩的方法 addScore()--><button v-on:click="addScore()" >成绩提高</button></div></template>
<script lang="ts">export default{setup() {let username="李华"let score =500function addScore(){console.log(score)score+=20}return{username,score,addScore}},}</script>
<style scoped></style>

1.双向绑定

ref函数（自动导入）

2.封装

<template><div><!-- 单选/多选/下拉框这种表单控件，要获取值，用v-model --><!-- br表示插入一个换行符 --><!-- 获取文本信息用两个花括号 -->姓名:<input type="text" v-model="username" >{{ username }}<br>成绩:<input type="text" v-model="score">{{ score }}<br><!-- 设置按钮成绩提高 --><!-- 给button绑事件，点击之后触发添加成绩的方法 addScore()--><button v-on:click="addScore()" >成绩提高</button></div></template>
<script lang="ts">
import { ref } from 'vue'export default{setup() {let username=ref("李华")let score =ref(500)function addScore(){console.log(score)score.value +=20}return{username,score,addScore}},}</script>
<style scoped></style>

<template><div>姓名:<input type="text" v-model="userInfo.username">{{ userInfo.username }}<br>成绩:<input type="text" v-model="userInfo.score">{{ userInfo.score }}<br><button v-on:click="addScore">成绩提高</button></div>
</template><script lang="ts">
import { reactive } from 'vue';export default {setup() {// 用reactive创建响应式对象管理用户信息const userInfo = reactive({username: "李华",score: 500});// 定义事件处理函数，直接访问userInfofunction addScore() {console.log(userInfo.score);userInfo.score += 20;}return { userInfo, addScore };}
};
</script><style scoped></style>

简洁写法