vue.js再学习

邓瑞编程

https://www.bilibili.com/video/BV1nV411Q7RX?p=14&spm_id_from=pageDriver&vd_source=92411e1ecf865f3abee8328e2eb907a5

理解

等到我真正去做前后端分离开开发我才知道,vue的作用是什么

vue到底做什么

前后端分离开发,后端只提供数据的json串,前端页面运行在服务武器上,静态资源那里

前端需要操作页面结构,将数据显示在页面上

传统的js操作html非常困难

所以vue要是实现的就是取代jsp功能,并且提供html页面间传递值的功能

创建一个vue应用

使用vue.js文件,来渲染一个html页面

引入js文件

CDN文件

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

或者下载到本地,然后引用本地的文件,这样会快一点

模块化开发

如果想使用ES6的模块开发,可以引入这个文件,但是有些浏览器,或者框架并不支持模块化开发

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

在模块化开发的时候必须将页面运行在服务器上才能正常使用(而传统模式开发本地路径访问即可正常显示)

如何渲染

vue应用应该有两部分,一部分是视图部分,这部分包括固定的html标签和vue的模版标签,可以通过这些查到可视化界面结构

一部分就是控制部分,这部分界面控制数据,与后端做交互,和视图做交互,以及做逻辑控制

所以对vue的知识也基本上可以分为这两种

控制部分

建立联系

控制部分需要和视图模版建立联系,通过下面的代码

1
2
3
4
Vue.createApp({
    
}).mount("#app")
//意思就是调用Vue对象中的createApp创建了一个vue应用(控制部分),将其挂载到标签上(mount到视图)

其中createApp的参数实际上是一个对象,

setup()方法

在开始渲染视图的时候,vue会去传入的对象中调用setup()方法来获得一个对象,使用将这个对象中的对应数据解析到视图中去

所以我们需要传入一个setup()方法

1
2
3
4
5
6
7
createApp({
    setup(){
        return {
            msg : "success"
        }
    }
})

控制部分语法

ref和reactive方法

在vue中,往往需要双向控制, 当控制部分的变量变化,渲染随之响应变化,当渲染部分主动改变,控制部分的变量也要响应变化

所以将变量和渲染双向联系的需要就是ref和reactive的工作

reactive()

适用于复杂的数据类型，reactive（）改造后的数据结构基本没有变化

例如

1
2
3
4
5
6
7
const web = reactive({
    url:"www.baidu.com",
    title:"search chinese konwledge"
})
//我们同样可以直接使用来访问它
web.url
web.title = "覆盖值"

ref()

适用于存储单个基本类型的值,例如数字,字符串等

实际上是将单个基本类型值存储到了一个对象中,这个对象中的value属性

1
2
3
const number = ref(10)
number.value = 20
//必须要使用 .value来读取和修改

必须要使用对象.value来访问和修改值

视图部分语法

视图部分也就是在html标签上的语法,实际上就是标识符,供控制部分理解

比较常用的有v-bind 文本插值 v-on

数据流方向 从控制层到视图

v-bind

文本插值 {{ }}

v-on

v-show

v-if (比v-show更加彻底,不渲染,在最终html标签都不会显示,相当于动态文本)

都是使得视图中的标识符被渲染为控制层的数据

v-for

v-bind:title 和v-bind:key 属于vue的标签,一个是鼠标放上显示提示单词,一个是设置唯一key加速渲染

数据流方向 从视图层到控制层

v-model

不同的标签,v-model所表示的标签值不同

例如input标签,v-model表示的是文本框中的内容

某些可能需要自己设置标签的value值,例如单选框,设置这个单选框的值

对于复选框,可以选中多个值,这个时候v-model中的控制层的变量就应该是一个数组才行

v-model修饰符

v-model还有一些更详细的功能

v-model默认是实时渲染修改,例子就是input中value的change,绑定的值也随之change

有时候我们不需要这么灵敏的响应,我们只需要在确认(或者失去焦点)之后再修改

v-model.lazy

还有一些修饰符,例如v-model.trim 可以去除来自视图修改的value的前后空格

详细标签

v-text和v-html

这两个标签实际上是为了应对不同的情况设计的

有些坏人,故意传递html标签格式的文本进来,当我们进行展示的时侯如果进行了解析,会被入侵这个时候使用v-text来设置显示文本,就可以保证安全

而v-html可以更加灵活的渲染

文本插值默认是不解析的相当于 v-text

高级语法

计算属性compute

也就是这个属性受到其他值的影响

有几种方式来得到计算属性

  1. 要用的时候马上计算
  2. 当计算属性发生改变的时候计算新的值,没变换直接引用不用计算

这里要讲的就是第二种,高性能的使用方式,第一种我们自己设计一个函数直接调用访问即可

1
2
3
let 密度 = computed((质量,体积)=>{
    return 质量/体积
})

注意这里返回的是一个值,而不是一个方法,所以在访问的时候不要加括号

当计算属性所依赖的响应式数据发生变化,计算属性的值会被重新计算

侦听器watch

我们知道,数据可以从视图流向控制层

当这个过程发生的时候,我们的watch就可以发现,并随之进行操作

和js的响应事件相比,侦听器它监听的是响应值的变化,而响应事件更多的是对标签的变化检测

所以侦听器更适用于控制层的设计

监听对象,实际上是为对象中的所有属性创建了监听,叫做深层监听

监听函数实际上是监听函数的返回值是否变化

如果函数返回的对象引用没变,即使对象中的值变了也不会触发监听

所以引用数据的监听是监听引用地址,而不是引用地址指向的内存中的值

1
2
3
4
watch(响应数据,(newValue,oldValue)=>{
    newvalue 就是新的数据 (当为引用类型 对象,数组 之类的那么无法找到oldvalue)
    oldvalue 就是旧的数据
})

监听对象中的某个属性

1
2
3
4
5
6
7
8
9
10
11
可以监听一个getter函数或者数组
watch(()=>obj.count,(new,old)=>{
    
})
注意不能这样
const obj = reactive({ count: 0 })

// 错误，因为 watch() 得到的参数是一个 number,相当于直接写了一个常量数字在这儿
watch(obj.count, (count) => {
  console.log(`Count is: ${count}`)
})

自动监听watchEffect

1
2
3
watchEffect(async () => {
  当任意响应数据改变,就会触发
})

Vite前端构建工具

类似于maven这种,管理前端页面的,甚至是springboot自带服务器

使用vite需要安装node.js

然后使用npm create vite@latest

然后选择javascript

cd 项目目录

npm install

npm run dev

就可以使用自带的服务器运行这个前端项目

组件模式

使用框架搭建的方式,一般都是由很多的组件组成

index.html是最前面的界面

导入了一个main.js

main.js实际上导入了App.vue中的对象APP

1
2
import APP from './APP.vue'
createApp(APP).mount("#app")

所以实际上的控制在APP.vue文件中

vue文件

vue支持一种组件式开发的方式,以.vue结尾的文件就是这种开发方式的载体

每个文件中包含