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

代运营怎么判定诈骗长沙seo优化推广

wzjs 2025/7/31 3:30:30

代运营怎么判定诈骗,长沙seo优化推广,Wordpress 报表的插件,做无障碍浏览网站一、Vue背景 1. 为什么学Vue 1.前后端开发就业必备技能 2.岗位多，绝⼤互联⽹公司都在使⽤Vue，还可以助⼒SpringBoot、C等项⽬开发 3.提⾼开发效率更少的时间,干更多的活,提高项目开发速度原生JS做法 Vue做法总而言之: 使用Vue能够赋能、提升就业竞争…

一、Vue背景

1. 为什么学Vue

1.前后端开发就业必备技能
2.岗位多，绝⼤互联⽹公司都在使⽤Vue，还可以助⼒SpringBoot、C++等项⽬开发
3.提⾼开发效率
更少的时间,干更多的活,提高项目开发速度
原生JS做法

Vue做法

总而言之: 使用Vue能够赋能、提升就业竞争、做出更优质的项目

2. 什么是Vue

Vue 是一套 构建用户界面 的 渐进式 JavaScript 框架

Vue官网: https://cn.vuejs.org/

2.1 什么是构建用户界面

基于数据生成标签结构, 配合CSS样式, 可以渲染出好看的用户界面(UI)

2.2 什么是渐进式

循序渐进的学, 学多少用多少

局部改造: Vue 的部分功能

整站开发: Vue3 + VueRouter + Pinia + 工程化 + 模块化

2.3 什么是框架

框架: 一种规则, 学习 Vue 就是学习语法, 运用规则的阶段, 它是程序员必须遵守的规则/规范

3. Vue 的学习内容

数据渲染: 插值+指令+计算属性+监听器...

组件及组件化: 生命周期+组件+组件化(开发大型网站,可以分成一小块一小块进行局部开发)+组件通信+插槽...
路由: 配置+跳转+传参+嵌套+守卫...

状态管理: Pinia 不同的页面共享数据,而Pinia就可以管理共享的数据

ElementPlus: 核心组件 Form, Table, Dialog, Menu..

阶段实战: Vue3全家桶+ElementPlus.

4. 准备Vue代码编写环境

4.1 安装VSCode

直接去官网进行下载: Visual Studio Code - Code Editing. Redefined

4.2 必备插件

1. Vue-Offical

◦ 提供 Vue ⽂件的语法⾼亮

◦ ⽀持 Vue ⽂件的智能感知和⾃动完成

◦ 提供了 Vue ⽂件的格式化⼯具

2. Vue 3 Snippets

◦ 提供 Vue 3 相关的代码⽚段，⽅便快速输⼊常⻅代码结构

3. Path Intellisense

◦ 路径⾃动补全

4. Auto Import

◦ ⾃动导⼊插件，可帮助⾃动完成和⾃动导⼊模块

5. Auto Close Tag

◦ ⾃动闭合HTML标签

6. Auto Rename Tag

◦ ⾃动重命名HTML标签。

4.3 Vue代码写哪里?

传统开发模式：基于html⽂件开发Vue,类似jQuery的使⽤, <script src="vue.js"></script>

⼯程化开发⽅式: 在构建⼯具(Vite/Webpack 等)环境下开发Vue, 这是最推荐的、也是企业采⽤的⽅式

总结:

1. 传统开发⽅式，直接⽤script引⼊vue.js⽂件

2. 在⼯程化环境下，借助Vite对Vue代码进⾏打包

我们先用传统方式来上手, 后续再用工程化

二、声明式渲染

1. 编写第一个 Hello Word 程序

1> 引入Vue3的源代码(本地或者在线)

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

2> 准备容器把Hello Word 渲染到div里面

<div id="app">
</div>

3> 创建应用并提供数据

<script>// 3. 创建 vue3 应用并提供数据// console.log(Vue) 可以查看Vue的方法Vue.createApp({//vue3的入口函数setup() {const msg = 'Hello World!'return {// msg: msg//简写msg}}}).mount('#app')//告诉程序是渲染到哪个div里面, 此时是把内容渲染到 id = app的 容器里面</script>

4> 渲染数据 {{ 数据名 }}

<div id="app">
<h1>{{ msg }}</h1>
</div>

具体的流程: 根据mount()指定数据放在哪个容器里面

完整代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- 1. 引入 vue3 源代码 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><!-- 2. 准备容器 --><div id="app"><!--4. 渲染数据  -->{{ msg }}</div><div id="another">{{ msg }}</div><script>// 3. 创建 vue3 应用并提供数据// console.log(Vue) 可以查看Vue的方法Vue.createApp({//vue3的入口函数setup() {const msg = 'Hello World!'return {// msg: msg//简写msg}}}).mount('#app')//告诉程序是渲染到哪个div里面, 此时是把内容渲染到 id = app的 容器里面</script>
</body></html>

2. setup函数

setup函数

1> vue3特有的, 也是 vue3 代码编写的入口/起点

2> 在标签中用到的数据或函数, 需要在 setup 函数中申明并返回

3> setup中的 this 不指向 Vue实例, 并且在setup中也不会用到this

3. 插值表达式

声明式渲染: 又叫胡子语法, 也叫做插值表达式

语法: {{ 表达式 }}

作用: 把表达式的结果展示/渲染到双标签中

表达式: 任何有结果的运算或者操作都属于表达式, js常见表达式:

1> 变量名/字面量

2> 对象.属性名

3> 三元运算/算数运算等

4> 函数/方法的调用

代码演示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><div id="app"><!-- 调用数据 --><!-- 1. 变量名 --><h1>{{ msg }}</h1><!-- 2. 对象.属性 --><p>我叫{{ obj.name }},今年{{ obj.age }}</p><!-- 3. 三元表达式 --><p> {{ obj.age > 18 ? '已成年' : '未成年' }}</p><!-- 4. 算数运算 --><p>明年我就{{ obj.age +1 }}了</p><!-- 5. 函数的调用 --><p>fn返回值{{ fn() }}</p><!-- 6. 方法的调用 --><p>{{ msg }}由{{ msg.split(' ').length }}个单词组成</p></div><script>Vue.createApp({setup() {//定义变量const msg = "hehihei xiao"//定义对象const obj = {name: 'xiaobai',age: 13}//定义函数/方法const fn = () => {return 666}//把数据返回给容器return {msg,//返回变量obj,//返回对象fn//返回函数}}}).mount('#app')</script>
</body></html>

数据传递过程

三、数据响应式

1. 安装Vue开发者工具(调试用)

直接在这里下载: https://chrome.zzzmh.cn/index

然后在Vue的拓展里面打开开发者模式, 把crx文件直接拖进去,点击详情, 开启允许访问文件网站

最后运行我们的vue代码,然后打开开发者工具, 看见vue就说明成功

2. 什么是数据响应式

数据响应式: 数据变了, 视图就会跟着变

数据: 在setup里面的就是数据

视图: HTML标签就是视图

数据变了, DOM就会变

默认在setuo里面声明的数据不具备响应式特性, 如果要具备的话就要使用 reactive 和 ref 函数 => 实现数据响应式

3. 响应式函数 reactive

reactive函数

1> 作用: 让一个对象具备响应式特性.(不能是其他数据, 数字, 字符串...)

2> 注意: 参数只能是对象

3> 使用:

1. 从 Vue 中解构出 reactive 函数

2. 给 reactive 函数传入对象作为参数(ceactive 会将这个对象变为响应式对象)

3. 在调试工具中进行测试

具体代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><div id="app"><!-- 使用数据 --><p>我是{{ obj.name }},今年{{ obj.age }}了</p></div><script>const { createApp, reactive } = Vue//从Vue中解构出 createApp, reactiveconsole.log(Vue)createApp({setup() {//创建响应式对象//reactive的参数只能是对象const obj = reactive({name: '小白',age: 90})//返回响应式数据return {obj}}}).mount("#app")//一定要指定给的是哪个容器</script>
</body></html>

我们发现由reactive传过来的对象, 改变之后, 视图也会进行改变

4. 响应式函数ref

ref函数:

1. 作用: 用来定义一个响应式数据, 可以是基本类型(数字, 字符串, 布尔等), 也可以是引用类型(数组, 对象等), 这说明ref的适用面更广. 把数据变成响应式数据,这个数据可以是基本类型,也可以是引用类型.

2. 使用

1> 从 Vue 中解构出 ref 函数

2> 给 ref 函数传入指定的数据类型, ref 就可以把传入的数据变成响应式(什么数据都可以)

3. 注意: ref 声明的响应式数据, 在标签中使用无需 .value, 但是在 js 中操作的时候, 需要 .value

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><div id="app"><!-- 在标签中 ref 返回的数据,不需要用.value来把数据表示出来, 标签中自动.value了不需要 {{msg.value}} --><p>{{ msg }}</p><p>我是{{ obj.name }},今年{{ obj.age }}岁</p><button @click = "onClick">修改ref</button></div><script>//从Vue对象中解构出 createApp, ref 函数const { createApp, ref } = VuecreateApp({setup() {//ref 定义响应式字符串const msg = ref('Hello xiaobai')//ref 定义响应式对象const obj = ref({name: "xiao",age: 9})  // 在 js 中需要使用.value来拿到数据//点击事件const onClick = ()=>{// 修改 msgmsg.value = '你好,Vue3'//修改 obj 的 name 和 age 属性//obj.value 才是拿到的 ref 对象 obj.value.name = 'vue3'obj.value.age = 10}return {obj,msg,onClick}}}).mount("#app")</script>
</body></html>