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 =500
function 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
});
// 定义事件处理函数，直接访问userInfo
function addScore() {
console.log(userInfo.score);
userInfo.score += 20;
}
return { userInfo, addScore };
}
};
</script>
<style scoped></style>简洁写法
