当前位置： 首页 > wzjs >正文

安陆网站建设114啦网址导航官网

wzjs 2025/7/19 18:04:37
安陆网站建设,114啦网址导航官网,绛县网站建设,山东省新闻Vue01 创建项目：（这一指令将会安装并执行 create-vue，） npm create vuelatest：Vue 官方的项目脚手架工具 项目结构介绍： setup组合式编程 export default命令用于指定模块的默认输出，因此在一…

Vue01

创建项目：（这一指令将会安装并执行 create-vue，）

npm create vue@latest：Vue 官方的项目脚手架工具

项目结构介绍：

setup组合式编程

export default命令用于指定模块的默认输出，因此在一个模块中，export default命令只能使用一次

1、setup选项的执行时机在Vue的beforeCreate生命周期之前

<script>
export default{setup(){console.log('setup')},beforeCreate(){console.log('beforeCreate')}
}
</script>

2、setup写代码的特点是

可以在这里面定义数据+函数==》但是所定义的必须以对象形式return进行返回

<!-- 复杂写法 -->
<script>export default{setup(){const msg='hello world'const logMessage=()=>{console.log('msg')}return {msg,logMessage}}
}
</script>

3、<script setup>：让组合式API语法更简单

<script setup>//数据const msg='hello world'//函数const logMessage=()=>{console.log('msg')}
</script>

4、不再有this的调用

reactive和ref函数

1、通过这两个函数的调用都可以生成响应式数据

2、reactive函数不能处理简单类型的数据（可以通过响应式对象去调用对象的属性）

ref函数可以处理简单类型和对象类型的数据

3、ref使用更为简单，但是对应的ref内部调用实现必须通过.value访问修改注意这个.value只是在script中调用的时候需要通过此进行调用

4、ref函数相较于来说更为简单适用

使用流程：reactive({对象})

<script setup>
//导入函数import { reactive } from 'vue';//对象类型的参数通过reactive函数封装成响应式数据对象// 执行函数，传入一个对象格式的参数 ---》返回值是一个响应式数据对象const state =reactive({count: 0})// 函数const setCount =()=>{state.count++}
</script><template><div><button @click="setCount">{{ state.count }}</button> </div>
</template>

ref(基础类型)或者ref（{对象类型}）

<script>
//导入函数
import { ref } from 'vue';//对象类型或者对象类型的数据都可以作为一个参数给ref函数返回一个响应式数据对象
// 执行函数，传入一个普通参数类型或者对象格式的参数 ---》返回值是一个响应式数据对象
const count = ref(0);
const setCount =()=>{//修改ref函数产生的响应式数据对象的值，必须通过.value的形式修改count.value++
}
</script><template><div><button @click="setCount">{{ count }}</button> </div>
</template>
cemputed计算属性函数

1、计算属性的函数只用来计算，不要有多余的操作

2、一般计算属性的值为只读的

<script setup>
// 导入函数
import {ref,computed} from 'vue'
//创建一个原始的响应的数组--》通过ref函数转换为一个响应式的数组
const list =ref([1,2,3,4,5,6,7,8,9,10])
//执行函数，通过computed函数，return 计算得到的数组
const computedList = computed(()=>{// 根据计算得到一个新的数据// 通过.value去获取响应式数据return list.value.filter(item=>item>2)
})//设置一个定时器（setTimeout函数只执行一次）
setTimeout(()=>{// push函数添加一个元素list.value.push(11)
},2000)
</script><template><div>原始数组{{ list }}</div><div>计算之后的数组：{{ computedList }}</div>
</template>

watch侦听函数（其中如果需要监听一个对象的属性的话需要通过精确监听进行实现）

1、侦听单个参数其中在对于watch函数侦听的参数而言，不需要通过.value获取对应的值，watch会自动进行获取

<script setup>
import { ref, watch } from 'vue';// 导入函数
const count = ref(0)
// 定义一个函数
const setCount=()=>{count.value++
}
//通过watch函数监听一个参数 count的变化
// 语法：watch(监听的变量，回调函数)
watch(count,(newValue,oldValue)=>{console.log('newValue',newValue)console.log('oldValue',oldValue)
})
</script><template><div><button @click="setCount">{{ count }}</button>
</div></template>

2、侦听多个参数

<script setup>
import { ref, watch } from 'vue';// 定义两个参数
const count = ref(0)
const name = ref('张三')// 定义一个函数
const setCount=()=>{count.value++
}const setName=()=>{name.value='李四'
}//使用watch函数监听多个参数的变化
//语法：watch([监听的变量，监听的变量],回调函数)
watch([count,name],([newValue1,newValue2],[oldValue1,oldValue2])=>{console.log('newValue1',newValue1)console.log('newValue2',newValue2)console.log('oldValue1',oldValue1)console.log('oldValue2',oldValue2)}
)
</script><template><div><button @click="setCount">改变数值：{{ count }}</button><button @click="setName">改变名字：{{ name }}</button></div>
</template>

3、侦听参数立即执行

<script setup>
import { ref,watch } from 'vue';const count = ref(0)
// 定义一个函数
const setCount=()=>{count.value++
}// 通过watch函数监听一个参数 count的变化同时立即执行回调函数
// 语法：watch(监听的变量，回调函数，{immediate:true})
watch(count,(newValue,oldValue)=>{console.log('newValue',newValue)console.log('oldValue',oldValue)
},{immediate:true})
</script><template><div><button @click="setCount">count的变化{{ count }}</button></div>
</template>

watch函数的精确侦听(一般不建议使用deep进行深度监听，太消耗性能了)

<script setup>
import { ref, watch } from 'vue';// 定义一个对象类型的变量：
const student=ref({name:'张三',age:18,gender:'男'
})// 定义一个函数
const setName=()=>{student.value.name='李四'
}
const setAge=()=>{student.value.age=20
}// 通过watch函数进行精确的监听
// 语法：watch(()=>监听的对象.对象的属性,回调函数)
watch(()=>student.value.name,(newValue,oldValue)=>{console.log('newValue',newValue)console.log('oldValue',oldValue)}
)
watch(()=>student.value.age,(newValue,oldValue)=>{console.log('newValue',newValue)console.log('oldValue',oldValue)}
)</script><template><div><button @click="setName">将名字改为{{ student.name }}</button><button @click="setAge">将年龄改为{{ student.age }}</button></div>
</template>

watch函数的深度侦听

<script setup>
import { ref, watch } from 'vue';// 定义一个对象类型的变量：
const student=ref({name:'张三',age:18,gender:'男'
})// 定义一个函数
const setName=()=>{student.value.name='李四'
}
const setAge=()=>{student.value.age=20
}// 通过watch函数进行深层次的监听  deep:true(这样的深层侦听是十分的消耗性能的所以一般不建议使用)
// 语法：watch(监听的变量，回调函数，{deep:true})
watch(student,(newValue,oldValue)=>{console.log('newValue',newValue)console.log('oldValue',oldValue)},{deep:true}
)</script><template><div><button @click="setName">将名字改为{{ student.name }}</button><button @click="setAge">将年龄改为{{ student.age }}</button></div>
</template>

组合式API编程中生命周期函数可以多次调用

模版引用：(模版引用必须在挂载完毕了之后才能获取到对应的DOM元素或者组件实例对象)

通过ref标识获取对应的DOM对象或者是组件的实例对象

App.vue:

<script setup>
// 模版引用
import TestCom from './test-com.vue';
// 导入ref函数
import { ref, onMounted } from 'vue';//调用ref函数得到ref对象
const h1Ref = ref(null);
const comRef = ref(null);
// 组件挂载完毕到页面上才能获取ref对象
onMounted(() => {// 打印ref对象console.log(h1Ref.value);console.log(comRef.value);
})</script><template><div><!-- 通过ref属性获取dom元素（获取的为整个标签元素） --><h1 ref="h1Ref">hello</h1><!-- 通过ref属性获取子组件元素（返回的为组件实例） --><TestCom ref="comRef"></TestCom></div>
</template>

test-com.vue:

<script setup>
import { ref } from 'vue';const name = ref('张三')
const setName =()=>{name.value = '李四'
}// 通过defineExpose暴露给父组件使用
defineExpose({name,setName
})</script>
<template><div>test组件</div>
</template>

跨层组件通信（provide传递和inject接收)

**provide(key,value)—》**这个value可以是普通数据，响应式数据，方法

const 变量=inject(key)

顶层组件

<script setup>
// 引入底层组件
import { provide, ref } from 'vue';
import DownCom from './05_provide-inject.vue'// 1、通过provide提供普通数据
provide('msg', '我是顶层组件')// 2、通过provide提供响应式数据
const count =ref(0)
provide('count', count)
// 通过一个定时器修改响应式数据:2s后响应式数据变为100
setTimeout(()=>{count.value = 100
},2000)// 3、通过provide提供方法（谁的数据谁负责）
const addCount = () => {count.value++
}
provide('addCount', addCount)
</script><template><div><h2>顶层组件</h2><DownCom/></div>
</template>

底层组件

<script setup>
import { inject } from 'vue';// 1、接收普通数据从顶层组件
const msgData = inject('msg')
// 2、接收响应式数据从顶层组件
const countData = inject('count')
// 3、接收方法从顶层组件
const addCount = inject('addCount')
</script><template><div><h3>底层组件</h3><p>接收到顶层组件的普通数据：{{msgData}}</p><p>接收到顶层组件的响应式数据：{{countData}}</p><button @click="addCount">通过addCount方法修改响应式数据</button></div>
</template>

综合案例：

App.vue:

<script setup>
import axios from 'axios';
import Edit from './components/Edit.vue'
import { ref,onMounted } from 'vue'// TODO: 列表渲染
// 声明响应式数据list 
const list = ref([]);
// 调用接口获取数据（以同步的形式执行异步的调用）
const getList = async ()=>{// 调用接口const res = await axios.get('/list')// 赋值给listlist.value = res.data
}
// 页面加载时调用接口
onMounted(() => getList())// TODO: 删除功能
const del=async(id)=>{// console.log(id);// 此处是是通过一个 模版字符串进行拼接字符串`用户名：${username}`await axios.delete(`/del/${id}`)getList()
}// 将Edit组件对象引入进来
const editRef = ref(null);
// TODO: 编辑功能（1、打开编辑框）-2、回填数据-3、更新数据
const edit=async(row)=>{// 打开编辑框editRef.value.open(row)
}</script><template><div class="app"><el-table :data="list"><el-table-column label="ID" prop="id"></el-table-column><el-table-column label="姓名" prop="name" width="150"></el-table-column><el-table-column label="籍贯" prop="place"></el-table-column><el-table-column label="操作" width="150"><template #default="{row}"><el-button type="primary" @click="edit(row)" link>编辑</el-button><el-button type="danger" @click="del(row.id)" link>删除</el-button></template></el-table-column></el-table></div><Edit ref="editRef" @on-update="getList"/>
</template><style scoped>
.app {width: 980px;margin: 100px auto 0;
}
</style>

Edit.vue:

<script setup>
// TODO: 编辑
import { ref } from 'vue'
import axios from 'axios'
// 弹框开关
const dialogVisible = ref(false)// 定义响应式数据
const form =ref({name:'',place:'',id:''
})// 封装一个方法用于打开弹框
const open = (row) => {dialogVisible.value = true// 回填数据form.value.name = row.nameform.value.place = row.placeform.value.id = row.id
}
// 将open方法暴露出去
defineExpose({open
})// 子组件向通知父组件更新数据
const emit = defineEmits(['on-update'])
// 更新数据
const onUpdated=async() => {await axios.patch(`/edit/${form.value.id}`, {name: form.value.name,place: form.value.place,
})
//关闭弹窗
dialogVisible.value = false 
//通知父组件进行更新
emit('on-update')
}
</script><template><el-dialog v-model="dialogVisible" title="编辑" width="400px"><el-form label-width="50px"><el-form-item label="姓名"><el-input placeholder="请输入姓名" v-model="form.name"/></el-form-item><el-form-item label="籍贯"><el-input placeholder="请输入籍贯" v-model="form.place"/></el-form-item></el-form><template #footer><span class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="onUpdated">确认</el-button></span></template></el-dialog>
</template><style scoped>
.el-input {width: 290px;
}
</style>

实现效果
查询所有列表信息
在这里插入图片描述
删除列表元素
在这里插入图片描述
编辑更新列表元素
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

http://www.dtcms.com/wzjs/14203.html

相关文章：

  • 辽宁网站开发搜索引擎优化目标
  • 人民政府 网站建设免费微信引流推广的方法
  • 温州市建设局网站百度营销
  • 宣传京津风筝网站的建设目的2021国内最好用免费建站系统
  • 金融企业网站建设公司品牌运营策略有哪些
  • 中国武汉建设信息网首页贵州seo和网络推广
  • 人和动物做愛视频网站湛江seo
  • 传媒公司营销网站优化服务平台
  • 个人网站制作方法上海百度推广平台
  • 产品做网站推广郴州seo快速排名
  • 苏州做网站设计什么是seo站内优化
  • 网站开发顶岗实践总结连接友谊
  • 网站免费做链接网络营销的主要传播渠道是
  • 二级域名网站可以做关键词优化吗黄冈网站推广优化找哪家
  • 网站上传修改限制吗windows 优化大师
  • 博客做资讯类网站seo案例分享
  • nginx反向代理内网网站建设电商运营的基本流程
  • 广东做网站的公司有哪些竞价托管信息
  • 搭建一个购物网站今日热点新闻事件摘抄2022
  • 在线网页代理太太猫乐云seo
  • 让你做一个旅游网站你会怎么做外贸推广有哪些好的方式
  • 徐州泉山区建设局网站免费制作小程序平台
  • asp.net做的网站模板seo综合查询怎么关闭
  • 全椒有做网站的吗西安专业网络推广公司
  • 网站建设 郑州做个公司网站多少钱
  • 做党建需要关注网站个人网站
  • wordpress放视频青岛seo服务
  • 邯郸网站建设最新报价广州网站优化平台
  • 推荐做pc端网站南宁seo网站排名优化公司
  • 百度怎么做网站排名合肥百度搜索排名优化