Vue2和Vue3的语法区别

qq_53318302

已于 2023-11-10 10:05:36 修改

阅读量238

点赞数 1

文章标签： arcgis vue 前端框架 javascript 开发语言

于 2023-11-08 17:08:36 首次发布

本文链接：https://blog.csdn.net/qq_53318302/article/details/134263261

版权

1.创建Vue2项目

---此处使用@vue/cli脚手架快速创建项目（打包方式webpack) ---Vetur 插件（VS code）

>>>npm create 项目名

---npm run serve 项目启动命令

项目结构如下

Vue2基本页码结构如下 HTML-js-CSS

<template>
  <div id="app">
    <span>这是一个vue2页面</span><br/>
    <span>年龄是{{age}}岁</span><br/>
    <button @click="ageChange">Button</button>
  </div>
</template>

<script>
export default{
  name: "HomeView",
  //定义数据
  data(){
    return{
      age:1
    }
  },
  //定义方法
  methods:{
    ageChange(){
      this.age += 1
    }
  },
  //计算属性
  computed:{ 

  },
  //监听属性
  watch:{

  }
 }
</script>


<style>
</style>

-------------------------------------------------页面元素如下-------------------------------------------------------------

---展示数据的三种情况

v-html
v-text
{{ }}

snippet generator snippet generator

自定义代码生成模版快捷键

2.Vue2的相关语法

2.1计算属性

在插值表达式中利用运算符进行计算属性
在方法中进行计算属性
在计算属性中运算

面试题---方法和computed的区别

computed有缓存，而且是一个属性
方法，是函数，使用需要调用 FUN()

<template>
  <div id="app">
    <span>这是一个vue2页面</span><br/>
    <span>测试计算属性的两种方法</span><br/>
    {{ name1 + name2}}<br/>
    {{ changeName() }}<br/>
    {{Name}}<br/>
     
  </div>
</template>

<script>
export default{
  name: "HomeView",
  data(){
    return{
      name1:"lihua",
      name2:"zhangwei"
    }
  },
  methods:{
    //方法一：定义方法
    changeName(){
      return this.name1 + this.name2
    }

  },
  computed:{ 
    //方法2：计算属性
    Name(){
      return this.name1 + this.name2
    }
  },
  watch:{

  }
 }
</script>


<style>
</style>

2.2监听属性

v-model 数据双向绑定

v-model可以监听data（）中数据，也可以监听computed的计算属性数据

但不可以监听方法

<template>
  <div id="app">
    <span>这是一个vue2页面</span><br/>
    <span>测试属性监听</span><br/>
    <input type="text" v-model="name">
  </div>
</template>

<script>
export default{
  name: "HomeView",
  data(){
    return{
      name:"hello"
    }
  },
  methods:{
  },
  watch:{
    name(newValue,oldValue) {
       console.log(newValue,oldValue);
    }
  }
 }
</script>


<style>
</style>

----------------------------------------------------------控制台结果----------------------------------------------------

2.3相关指令

v-bind：xx = " " 动态绑定xx属性

v-bind：title ---> 动态绑定title属性 ---> 简写：title

<template>
  <div id="app">
    <span>vue2-测试动态绑定css样式</span><br/>
    <div v-bind:style="s1">大连市</div>
    
  </div>
</template>

<script>
export default{
  name: "HomeView",
  data(){
    return{
     s1:{color:"green"}
    }
  }
 }
</script>


<style>
</style>

---页面效果如下---

v-on 给HTML元素绑定事件监听器简写 @

2.4定义属性

var-let-const---定义属性的关键字

var：属性可以重复声明，let和const属性不可以重复声明

var和let声明变量，const声明常量

const声明的常量不能改变的（内存固定)，可以改变其内部属性

2.5条件渲染

v-if 为true 渲染元素，false反之

可以配合 v-else-if 和 v-else 使用

注意：v-else必须跟在v-else-if后面使用，v-else-if 必须跟在 v-else-if 或者 v-if后面使用（紧挨）

v-show 为true 渲染元素，false反之

二者的区别

v-if：每次都会重新生成或者创建元素
v-show：被渲染的元素始终保存在DOM中，只是切换元素的dispaly：none样式

v-if 切换消耗高，v-show 初始渲染消耗高

---------------------------------------------------------------------------------------------------------------------------------

v-for指令

<template>
  <div id="app">
    <span>vue2-测试循环指令</span><br/>
    <ul>
       <li v-for="(item, index) in arr" :key="index">
          {{ item }}
       </li>
    </ul>
  </div>
</template>

<script>
export default{
  name: "HomeView",
  data(){
    return{
     arr:[123,456,789]
    }
  }
 }
</script>


<style>
</style>

网页效果如下

3.Vue2的组件

3.1 父组件引入子组件

父组件引入（import）子组件
父组件中注册子组件 component：{ childrenComponent }
父组件使用子组件

3.2 父组件传值子组件

子组件通过 props 属性进行接收

type:传值属性的类型
default：未接收到父组件时的默认值

......

<script>
export default{
  props:{
    mes:{
        type:String,
        default:'子组件默认值',
    },
  },
  data(){
    return{
    }
  },
  methods:{

    }
  }
</script>

......

3.3 子组件传值父组件

自定义事件 emit 传值

---子组件

<template>
 <div>
    <button @click="transfor">子组件向父组件传值按钮</button>
 </div>
</template>

<script>
export default{
  props:{

  },
  data(){
    return{
    }
  },
  methods:{
      transfor(){
                   //第一个参数是自定义事件的名字，第二个参数是子向父传值的数据
        this.$emit('transforFather','子组件向父组件传值的数据')
      }
    }
  } 
</script>


<style>
</style>

---父组件

<template>
  <div id="app">
    <span> {{title}}</span><br/>
    <Children  @transforFather="jieshou"></Children>
  </div>
</template>

<script>
import Children from './components/Children.vue'
export default{
  data(){
    return{
      title:"vue2-测试子向父传值"
    }
  },
  components:{
    Children
  },
  methods:{
    jieshou(value){
      this.title = value;
    }
  }
 }
</script>

<style>
</style>

---页面样式

---点击按钮事件后页面样式

4.创建Vue3项目

>>>npm init vite@latest （打包方式vite） ---Volar插件（VS code）

启动Vue3项目命令

>>>npm run dev

4.1Vue3的组件结构

<template>
  <div id="app">
    {{title}}<br>
    <button @click="change">Vue3点击按钮事件</button>
  </div>
</template>

<script setup>
//定义属性
const title = "这是一个Vue3页面"
//定义方法
const change = ()=>{
  console.log(123)
}
</script>

<style>
</style>

4.2Vue3的响应式变量

面试题： ref和reactive的异同

--->let title = ref("这是一个Vue3页面")

--->let obj = reactive({
   name:"zhiping",
   age:18,
   phone:123
})

同：ref和reactive都是用来定义响应式变量的关键字
异：ref一般用来定义基本数据类型 ，但也可以定义复杂数据类型
reactive一般只能用来定义对象，数组等引用型数据类型


<template>
  <div id="app">
    {{title}}<br>
    <button @click="changeRef">ref点击按钮事件</button><br>
    name:{{ obj.name }}<br>
    age:{{ obj.age }}<br>
    phone:{{ obj.phone }}<br>
    <button @click="changeReactive">reactive点击按钮事件</button><br>
  </div>
</template>

<script setup>
import {reactive, ref} from 'vue'
//定义属性
let title = ref("这是一个Vue3页面")

let obj = reactive({
  name:"zhiping",
  age:18,
  phone:123
})
//定义方法
const changeRef = ()=>{
 title.value = "响应式变量的值"
}
const changeReactive=() =>{
  obj.age = 123,
  obj.name = "xinyi",
  obj.phone = 456
}
</script>

<style>
</style>

点击按钮页面效果如下--------------------------------------------------------------------------------------------------

4.3Vue3的箭头函数

普通函数 function fn(){ }

箭头函数 function fn = （）=>{ }

箭头函数和普通函数的区别

1.写法区别

箭头函数：若没有参数，括号不可以省略；若参数只有一位，括号可以省略

普通函数：若函数体只有一行，那么{}（花括号）可以省略，retrun可以省略

2.this指向区别

箭头函数：箭头函数的this指向定义时，外层第一个普通函数的this

普通函数：this指向的是外层的第一个对象

4.4Vue3的插槽

子组件Test.vue如下

---子组件的标签处采用插槽 待填充

父组件App.vue 如下

---父组件中引入子组件并填充插槽（默认填充)

---页面

---具名插槽的使用

name绑定插槽的作用域

填充插槽时绑定作用域时可以简写

默认情况 v-slot --- #default

具体插槽 v-slot：xx --- #xx

4.4Vue3的生命周期

创建前（setup）：beforeCreate（），created（）
渲染时：beforeMount（）,mounted（）
更新时：beforeUpdate（），updated（）
销毁时：beforeUnmount（），unmounted（）

beforeMount（）组件挂载到节点时执行的函数

mounted（）页面开始渲染后执行，可用来进行页面初始化

4.6Vue3的前后端联结

什么是同源策略？

协议，域名，端口号一致 --- 可以接收请求

跨域的解决措施

1.配置跨域

1.1 注解

@CrossOrigin

1.2 全局配置

2.反向代理

---前端配置信息

---后端配置文件（application.properties）

server.port:XX(具体端口号)
server.servlet.context-path=/api

--------------------------------------------------------测试-------------------------------------------------------------------

页面效果如下---

前端代码---

<template>
  <div id="">
    <button @click="get">get</button>
    <button @click="post">post</button>
  </div>
</template>

<script setup>
import axios from 'axios'
const get = () => {
  axios.get("http://localhost:8080/get").then((res)=>{
    console.log(res)
  })
}
const post = () => {
  axios.post("http://localhost:8080/post").then((res)=>{
    console.log(res)
  })
}
</script>

<style>
</style>

后端代码---

package com.example.demo.controller;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * @author xiaozhuang
 * @create 2023-11-08-21:45
 */
@RestController
@CrossOrigin
public class AxiosController {

    @GetMapping("/get")
    String get(){
        return "这是一个get请求";
    }

    @PostMapping("/post")
    String post(){
        return "这是一个post请求";
    }

}

按钮点击页面效果