一，vue3 解构 获取值 双向绑定
复制代码
<template>
<nav>
<!-- 按钮 -->
<!-- 绑定事件的弹框 v-on @-->
<button @click="submit">弹出</button><br>
<!-- 、双向绑定 -->
<input v-model="num" placeholder="请输入zi" >
<!-- 文本留言框 -->
<textarea placeholder="请输入" v-model="numm"></textarea>
<p>{{num}}---{{numm}}</p>
<!-- 引用变量 ！取反 -->
<p v-if="isFalse">我是pt</p>
<p v-show="!isFalse">我是ps</p>
<ul v-for="(item,index) in userList" :key="index">
<!-- 进行遍历 userList 在后边插入值-->
<!-- :key="index" 唯一标识 必须加 -->
<li>年龄：{{item.userage}}</li><br>
<li>名字：{{item.username}}</li><br>
<li>引用num值--{{num}}</li><br>
<li>引用msg值--{{msg}}</li><br>
</ul>
</nav>
</template>
<script>
// import { continueStatement, } from '@babel/types'
import {reactive,toRefs, onMounted,} from 'vue'
export default {
name:'HomeView',
setup(){
const data = reactive({
isRed:false,
isTrue:true,
isFalse:false,
msg:'msg初始值',
num:'',
numm:'',
// userpone:'',
userList:[
{
username:'小红',
userage:10
}
]
})
// 生命周期
// 渲染后
onMounted(()=>[
// 定时器
setTimeout(()=>{
//渲染之后修改数据
data.msg='msg 修改值',
// 渲染之后加一
data.num+="num初始值"
data.numm+="numm初始值"
},8000)
])
// onBeforeUpdated(()=>{
// // console.log('onBeforeUpdated')
// data.num +=1
// })
// 另一种方法的写法
// const submit =()=>{
// alert('nskdh ')
// }
function submit(){
const sub = data.num + data.numm
alert(`${data.num} +${data.numm}`)
console.log(sub,'打印')
// return sub
}
return{
data,
...toRefs(data), //结构数据
submit,
}
}
}
</script>
<style>
</style>
二。数据监听 双向绑定
复制代码
<template>
<div>
个人信息
<!-- 固定值的增删改查 以及显隐状态-->
<h2 v-show="preson.name"> 姓名：{{name }}</h2>
<h2 v-show="preson.age"> 年龄：{{age }}</h2>
<h2 v-show="preson.add">新增: {{ preson.add }}</h2>
<!-- 基础 引用 -->
<h2>工资：{{ preson.job.salarry }}</h2>
<h2>工作：{{ preson.job.type }}</h2>
<h2>爱好： {{ preson.job.a.b.c }}</h2>
<p>{{kk}}</p>
<!-- button 按钮信息 -->
<br/>
<button @click="chenge">修改信息</button>
<button @click="AddSex">添加信息</button>
<button @click="del">删除信息</button>
<button @click="kk++">点击加一</button>
</div>
</template>
<script>
// 引入
import { reactive, ref , watchEffect, toRefs,} from 'vue'
export default {
// 定义文件名称
name: 'App',
setup() {
const kk = ref (0)
// 创建对象reactive类型
let preson = reactive({
name: '周阿狗',
age: 23,
job: {
salarry: '10k',
type: '前端菜狗',
a: {
b: {
c: '滑雪，旅游'
}
}
}
})
// // watch监听 ref
// watch(kk,(newValue,oldValue)=>{
// console.log('kk变化了',newValue,oldValue)
// })
// // watch监听 reactive
// 新数据和旧数据会变得一样 如果非要用旧数据 参考上边的ref
// watch(preson,(newValue,oldValue)=>{
// console.log('preson',newValue,oldValue)
// })
// watchEffect 默认上来就监听数据
watchEffect(()=>{
const newage = preson.age
console.log("监听数据" ,newage)
})
// 修改
function chenge() {
// reactive 类型 直接引用修改即可
preson.job.a.b.c = "修改后爱好 摆烂"
// preson.age='scsdsfs'//变成nan
preson.age='修改后年龄 108岁 '//变成nan
}
// 添加
function AddSex() {
// reactive 类型 直接引用添加
preson.add = '新增值'
}
// 删除
function del() {
delete preson.name
}
return {
preson,
chenge,
AddSex,
del,
kk,
// 减少preson 解构
...toRefs(preson)
}
}
}
</script>
三。冒泡排序
复制代码
<template>
<div>
<p>{{ kla }}</p>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const kla= ref([9, 5, 8, 9, 3, 8, 4, 2, 5, 6, 1, 7])
const kl = ref([9, 5, 8, 9, 3, 8, 4, 2, 5, 6, 1, 7])
// 冒泡排序 从小到大
function kkkkkk(arr) {
for (var i = 0; i <= arr.length - 1; i++) { //外层循环
for (var j = 0; j < arr.length - i - 1; j++) { //内层循环
if (arr[j] > arr[j + 1]) { //判断 当前的j 是否大于 j+1
var temp = arr[j]; //如果大于 那就就把 arr[j] 存在一个新的 temp 队列中
arr[j] = arr[j + 1]; //判断 arr[j] 是否等于 arr[j+1]
arr[j + 1] = temp; //如果 两个数字一样 那就存进 队列
}
}
}
return arr; //返回 arr
}
var arr1 = kkkkkk(kl.value); //带入数组
console.log(arr1); //输出
// 冒泡排序 从大到小
function kkkk(arr) {
for (var i = 0; i <= arr.length - 1; i++) {
for (var j = 0; j < arr.length - i - 1; j++) {
if (arr[j] < arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
return arr;
}
var arr1 = kkkk(kl.value);
console.log(arr1);
return {
kl,
kla,
kkkkkk,
kkkk
}
}
}
</script>
<style></style>
