vue3.0正式版-语法

已于 2022-03-20 16:36:07 修改
阅读量2k 收藏 6
点赞数 2
分类专栏： vue3.0 文章标签： 前端
于 2021-02-22 23:04:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39928481/article/details/113957622
版权

vue3.0正式版-语法

一.vue3.0版本中elementui-plus的安装和使用

引入地址

1.安装：

npm i element-plus

扩展：
vue3.0和antdesign一起使用，ant-design-vue需要v2的版本，否则当行这样的样式就会出现问题。

import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
const app = createApp(App);

app
  .use(Antd)
  .mount("#app");

2.main.js里面

import App from './App.vue'
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

const app = createApp(App)
app.use(ElementPlus).mount('#app')

3.页面的使用

在新版的vue3.x版本中还保留了原有的生命周期函数

created(){
  this.$message("message")
},

4.但在vue3.0 setup中使用

import { setup } from 'vue-class-component'
import { getCurrentInstance } from 'vue'
export default {
  name: 'App',
  components: {

  },
  setup(e){
    const {ctx} = getCurrentInstance()
    ctx.$message("mesage")
  }
}

更新:ctx 打包之后无法调用$message，可以使用proxy

import { getCurrentInstance } from 'vue'
export default {
  name: 'App',
  components: {

  },
  setup(){
    const {proxy} = getCurrentInstance()
    proxy.$message("mesage")
  }
}

二.中英文切换

网址：https://vue-i18n-next.intlify.dev/

下面网上有这个网址，但不支持vue3.0
http://kazupon.github.io/vue-i18n/zh/introduction.html

三.vue.config.js

const path = require("path");
// vue.config.js
module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? '' : './',
    // 构建项目生成的目录
    outputDir: process.env.NODE_ENV === 'production' ? 'dist' : 'devDist',
    // 关闭语法的自动检测
    lintOnSave: false,
    chainWebpack: config => {
        config.module.rules.delete('svg'); //重点:删除默认配置中处理svg,
        config.module
            .rule('svg-sprite-loader')
            .test(/\.svg$/)
            .include.add(path.resolve('src/assets/svg')) //处理svg目录
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]',
            });
    },
    css: {
        loaderOptions: {
            scss: {
                prependData: `@import "./src/styles/main.scss";`
            }
        }
    },
    devServer: {
        open: false,    // 运行项目后是否自动打开
        host: "0.0.0.0",   // 可以让外部访问
        port: 8000,
        proxy: {
            [process.env.VUE_APP_FLAG]: {
                target: process.env.VUE_APP_APIURL,
                ws: false,            // webstock
                changeOrigin: true,    // 是否开启跨域
                pathRewrite: {
                    [`^${process.env.VUE_APP_FLAG}`]: ''        // 查找开头为/api的字符替换成“空字符串”   /api/getCode
                } 
            }
        }
    }
}

四.侧边栏引入svg

1,安装svg-sprite-loader

npm install svg-sprite-loader -D

2.vue.config.js里面添加chainWebpack的配置

vue.config.js具体哪些配置可以直接百度搜索vue(vue -> 开发-> webpck相关)

 chainWebpack: config => {
        config.module.rules.delete('svg'); //重点:删除默认配置中处理svg,
        config.module
            .rule('svg-sprite-loader')
            .test(/\.svg$/)
            .include.add(path.resolve('src/assets/svg')) //处理svg目录
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]',
            });
    },

3）单独的svg组件，引入以后，传入svg文件按的名字即可显示

svg的组件的路径

<template>
    <svg class="svg-class" :class="className">
        <use :href="'#icon-' + iconName"></use>
    </svg>
</template>
<script>
export default {
    name: "SvgIcon",
    props: {
        iconName: {
            type: String,
            default: ""
        },
        className: {
            type: String,
            default: ""
        }
    }
}
</script>

4）svg从局部组件改为全局组件

svg图片的路径

main.js:

import { createApp } from "vue";
import App from "./App.vue";
// svg全局组件
import SvgIcon from "@/components/Svgicon";
// svg文件解析
import "./js/svg";

const app = createApp(App);
app
  .component("svg-icon", SvgIcon)
  .mount("#app");

5)组件内直接使用：

<svg-icon iconName="collapsed" class="collapsed-svg" />

五.vue3.0的router的使用

官方文档：百度搜索vue-router-next，如果每日有官方文档，找github也可以，官网在右边about里面的next.router.vue.js.org/。
1）获取路由

<template v-for="item in rotuers"></template>

import { useRoute, useRouter } from "vue-router";

setup(){
        const { options } = useRouter();
        // 路由
        const rotuers = options.routes;
        return {
            data,
            rotuers,
            selectMenu,
            openMenu,
            hasOnlyChildren
        }
    }

六.子级传值给父级

import {getCurrentInstance } from "vue";
setup(props){
    const { ctx } = getCurrentInstance();
    ctx.$axios.post("getSms")

更新:ctx 打包之后无法调用$message，可以使用proxy

import { getCurrentInstance } from 'vue'
export default {
  name: 'App',
  components: {

  },
  setup(){
    const {proxy} = getCurrentInstance()
    proxy.$message("mesage")
  }
}

1)父组件传值给子组件（使用vue-property-decorator装饰器 @Prop）

在这里插入图片描述

2)子组件传值给父组件（使用vue-property-decorator装饰器 @Emit）

在这里插入图片描述
注：@Emit其他写法
在这里插入图片描述

3)侦听器watch（使用vue-property-decorator装饰器 @Watch）

在这里插入图片描述

注：handler，immediate和deep

  • 如下写的函数其实就是在写这个handler方法里面的；
watch: {
    firstName (val) {
      this.fullName = val + ' ' + this.lastName
    }
  }
  • 当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性为true。
  • 当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。

七.vue 中使用 TS 的 class-style代码风格

1.前言：vue-property-decorator 与 vue-class-component 的关系

vue class component 是vue 官方出的，vue property decorator 是社区出的

  • vue class component 提供了 vue component 等等
  • vue property decorator 深度依赖了 vue class component 拓展出了很多操作符 @Prop @Emit @Inject 等等 可以说是 vue class component 的一个超集

正常开发的时候 你只需要使用 vue property decorator 中提供的操作符即可 不用再从vue class componen 引入vue component

2. 如何使用导入npm 包

npm i -S vue-property-decorator

3.主要有以下一些装饰器和一个方法

@Prop
@PropSync
@Model
@ModelSync
@Watch
@Provide
@Inject
@ProvideReactive
@InjectReactive
@Emit
@Ref
@VModel
@Component (provided by vue-class-component)
Mixins (the helper function named mixins provided by vue-class-component)

@Component

注： 该属性完全继承于vue-class-component
属性参数：@Component(options: ComponentOptions = {})
参数说明：@Component 装饰器可以接收一个对象作为参数，可以在对象中声明 components ，filters，directives, beforeRouteLeave等未提供装饰器的选项，也可以声明computed，watch等

js写法：
<script>
import Home from './Home.vue'
import About from './About.vue'
export default {
    data() {
        return {
            title: '父组件中的值'
        }
    },
    components: {
        Home,
        About
    }
}
</script>
ts写法：
<script lang='ts'>
    import Home from './Home.vue'
    import About from './About.vue'
    import { Component, Vue } from 'vue-property-decorator';
    @Component({
        components: {
            Home,
            About
        }
    })
    export default class  extends Vue {
        private title: string = '父组件中的值'
    }
</script>

@Emit

属性参数：@Emit(event?: string)
参数说明：
@Emit 装饰器接收一个可选参数，充当事件名。如果没有提供这个参数，@Emit会将回调函数名的camelCase转为kebab-case，并将其作为事件名；
@Emit的回调函数的参数，会在回调函数没有返回值的情况下，被 e m i t 当 做 第 二 个 参 数 使 用 。 @ E m i t 会 将 回 调 函 数 的 返 回 值 作 为 第 二 个 参 数 ， 如 果 返 回 值 是 一 个 P r o m i s e 对 象 ， emit当做第二个参数使用。 @Emit会将回调函数的返回值作为第二个参数，如果返回值是一个Promise对象， emit当做第二个参数使用。@Emit会将回调函数的返回值作为第二个参数，如果返回值是一个Promise对象，emit会在Promise对象被标记为resolved之后触发；

js写法：

export default {
  data() {
    return {}
  },
  mounted() {
    this.$on('trigger-emit', data => {
      alert(data)
    })
  },
  methods: {
    triggerEmit(val) {
      this.$emit('trigger-emit', val)
    }
  }
}

ts写法：

<script lang="ts">
import { Component, Vue, Emit } from 'vue-property-decorator';

@Component({})
export default class Home extends Vue {
  private mounted() {
    this.$on('trigger-emit', (data: any): void => {
      alert(data)
    })
  }
  @Emit()
  triggerEmit(n: any) {
    console.log('hhh')
  }
}
</script>

@Prop

属性参数：@Prop(options: (PropOptions | Constructor[] | Constructor) = {})
参数说明：@Prop装饰器接收一个参数，这个参数可以有三种写法：
PropOptions，可以使用以下选项：type，default，required，validator;
Constructor[]，指定 prop 的可选类型；
Constructor，例如String，Number，Boolean等，指定 prop 的类型；

js写法：

export default {
  props: {
    propA: {
      type: Number
    },
    propB: {
      default: 'default value'
    },
    propC: {
      type: [String, Boolean]
    },
  }
}

ts写法：

<script lang="ts">
    import {Vue, Component, Prop} from 'vue-property-decorator';

    @Component
    export default class "组件名" extends Vue{
        @Prop(Number) propA!: number;
        @Prop({default: 'default value'}) propB!: string;
        @prop([String, Boolean]) propC: string | boolean;
    }
</script>

七.变量挂载在全局

（vue3.0官网 -> api参考 -> 应用配置 -> globalProperties）

import Axios from "axios";
const app = createApp(App);
app.config.globalProperties.$axios = Axios;

app
  .mount("#app");

在页面通过getCurrentInstance()获取

import {getCurrentInstance } from "vue";
setup(props){
    const { ctx } = getCurrentInstance();
    ctx.$axios.post("getSms")
    }

但一般建议使用proxy作为上下文的引用。

八.跨域

官网的配置参考-> devServe.proxy
baseUrl设为"/api"->axios就会自动八baseUrl和后面的其他请求路径凭借起来->请求的路径就是:本地的ip+baseUrl+请求接口。
设置跨域以后，’/api’的target指向另外一个地址，你们请求的地址的ip就不是本地的了，就是这个新地址+/api+请求的接口。然后通过正则匹配/api，把/api转为空字符串.
但这一段代码只有开发环境才会运行，线上环境是不会运行的。

九.环境变量

百度搜索：vue cli

一个vue脚手架有三种模式：
development：开发模式
test：测试模式
production：生产模式

1.定义三个环境变量的文件

开发环境 .env.development 运行npm run dev
生产环境 .env.production 运行npm run build
测试环境 .env.test 没有对应的命令，但可以在package.json里面自定义

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build-test": "vue-cli-service build --mode test",
    "lint": "vue-cli-service lint"
  },

2.三个环境变量分别定义内容

.env.development：

# 本地环境联调接口的标记匹配
VUE_APP_FLAG = '/devApi'

#跨域地址
VUE_APP_APIURL = 'http://www.web-jshtml.cn/api/vue3'

#帐户体系
VUE_APP_ACCOUNT_APIURL = ''

#用户体系
VUE_APP_USER_APIURL = ''

.env.production：

VUE_APP_FLAG = ''

#帐户体系
VUE_APP_ACCOUNT_APIURL = 'http://account.web-jshtml.cn'

#用户体系
VUE_APP_USER_APIURL = 'http://user.web-jshtml.cn'

.env.test

VUE_APP_FLAG = ''

#帐户体系
VUE_APP_ACCOUNT_APIURL = 'http://account-test.web-jshtml.cn'

#用户体系
VUE_APP_USER_APIURL = 'http://user-test.web-jshtml.cn'

3.在request.js里面封装axios的baseUrl里面只需要是process.env.变量名称

import axios from "axios";
import { message } from "ant-design-vue";
const service = axios.create({
    baseURL: process.env.VUE_APP_FLAG,
    timeout: 5000
});

4.在vue.config.js里面

const path = require("path");
// vue.config.js
module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? '' : './',
    // 构建项目生成的目录
    outputDir: process.env.NODE_ENV === 'production' ? 'dist' : 'devDist',
    // 关闭语法的自动检测
    lintOnSave: false,
    devServer: {
        open: false,    // 运行项目后是否自动打开
        host: "0.0.0.0",   // 可以让外部访问
        port: 8000,
        proxy: {
            [process.env.VUE_APP_FLAG]: {
                target: process.env.VUE_APP_APIURL,
                ws: false,            // webstock
                changeOrigin: true,    // 是否开启跨域
                pathRewrite: {
                    [`^${process.env.VUE_APP_FLAG}`]: ''        // 查找开头为/api的字符替换成“空字符串”   /api/getCode
                } 
            }
        }
    }
}

4.接口的调用

import service from "@/utils/request.js";


export function GetCode(data){
    return service.request({
        url: '/error/',
        method: 'post',
        data,
    })
}

/**
 * 帐户体系 - 登录
 */
export function AccountLogin(data){
    return service.request({
        url: process.env.VUE_APP_ACCOUNT_APIURL + 'http://account-test.web-jshtml.cn/login/',
        method: 'post',
        data,
    })
}

/**
 * 用户体系 - 登录
 */
export function UserList(data){
    return service.request({
        url: process.env.VUE_APP_USER_APIURL + '/list/',
        method: 'post',
        data,
    })
}
口袋の的天空
关注
专栏目录
vue技术栈--》从vue2.0到vue3.0 ## 篇一 搭建到操作
ztK63LrD的博客
05-05 868
vue技术栈
vue3.x使用vue-property-decorator + typescript
zngfue的博客
02-28 1661
vue3.x使用vue-property-decorator + typescript
vue3.0 模板语法
m0_60970928的博客
02-24 1730
Vue 使用一种基于HTML的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的DOM上以上就是vue3.0 模板语法的全部内容和基本用法，文章的代码为一个一个的案例感兴趣可以敲一敲看一看。希望本篇文章能够帮助到你，不懂得可以评论区或者私信问我，我也会一 一解答。我的其他文章:https://blog.csdn.net/m0_60970928?type=blog。
【3.0】vue3语法
最新发布
2401_83569627的博客
08-16 313
setup() {//---------------放变量和方法---------------let a=10(不包裹的)//-----------将变量和方法return出去--------return {count,handleAdd,a}}, })
vue3.0中的watch和watchEffect的区别和用法
cjy_fly的博客
06-07 670
vue3.0中的watch和watchEffect的区别和用法
vue3.0基础语法总结
dum_plings的博客
05-11 3417
vue3.0基础语法总结 前言 大家好！我叫椰_季，是一个刚入行不久得前端工程师，本着在提升自我学习能力为前提和认识一些前端方面得朋友为主要任务。准备发布一篇自己学习vue3.0基础语法的总结。学习途径来源于B站张天禹老师。 vue2.0的一些缺陷 我们先来说一说vue2.0存在的一些缺陷，大家都知道vue2.0中数据的代理方式是使用的defineProperty来实现响应式的。那么defineProperty存在什么样的问题呢 不能监听数组的变化 必须遍历对象的每个属性 必须深层遍历嵌套的对象
vue3.0基础语法
赵佳敏的博客
04-15 592
vue的开发模式是单组件模式开发，全部是小的组件 ***.vue 组件的写法格式 < template>< /template> < script>< /script> < style>< /style> 一、vue的指令 1.数据绑定指令 vue的组件上如何声明变量，在js模块内部声明 每个组件都存在data属性 每个组件都有当前指针对象(也就是this问题) 指令 绑定格式 v-bind 属性绑定数据的格式 v-
vue 3.0 基础语法
weixin_46300953的博客
05-26 270
VUE 3.0 compositions API // created 实例被完全初始化之前 setup函数使用 setup禁止使用this 响应式的引用 1. ref 处理基础类型数据： let name = ref（‘dell’）经转换为 proxy( { value: 'dell' } ) 赋值方式为 name.value = ‘xxx’ 2. reactive处理非基础类型的数据： const nameObj =reactive({ name: 'dell' } )经转换为 pr...
全新Vue3.0全家桶 零基础入门到项目实战
06-30
2020年9月底，Vue3.0正式版终于发布了。Vue在全球拥有 130 多万用户 ，它被应用于各种不同的场景中。而在国内，更是最火热的前端框架，2.0与3.0的开发模式有了很大的改变，所以3.0的全新版本势必会引发新的一波学习...
总结vue2.0与vue3.0的区别，让你快速上手
热门推荐
m0_55070913的博客
03-07 1万+
1:vue3.0和2.0的区别 2.0数据双向绑定方面 Vue2.0使用Object.defineProperty 原理：通过使用 Object.defineProperty 来劫持对象属性的 geter 和 seter 操作，当数据发生改变发出通知 // 数据 let data = { title: '', // 备份数据 _data: {} } // 定义特性 Object.defineProperty(data, 'title', { // 定义特性属性或者特性方法 // 取值方法 g
你准备好迎接vue3.0了吗
10-15
开发者可以通过安装`@vue/composition-api`库，在Vue2.x项目中提前尝试Vue3.0的新特性，以便在正式版发布后能快速迁移。同时，学习和理解Proxy、Ref和Reactive等新概念，将是顺利过渡到Vue3.0的关键。
vue3.0初学语法.md
08-04
vue3.0初学语法.md
Vue 3.0中jsx语法的使用
01-21
Vue 3.0 正式发布了，喜大普奔:beaming_face_with_smiling_eyes:。新的语法又要学习一阵阵，不过需要在生产环境下大面积使用，可能需要等到它的周边工具：vuex，vue-router 等等全部升级完毕。 Vue 3.0 中尤大使用的了新的编译工具 vite，革了 webpack 的命:face_with_tears_of_joy:。尝试看了下文档，发现支持 jsx 语法，由于这段时间都是在使用 react 来开发项目，jsx 完全不同的体验，更加的纯粹与灵活。 项目创建 npm init vite-app vite-vue cd vite-vue npm install npm run dev 我们发现创建的目录解构很简单 使用 JSX Vue 3.0 直接支持
基于vue3.0 + typescript + 网易云音乐api 开发的web音乐播放器
05-28
基于vue3.0 + typescript + 网易云音乐api 开发的web音乐播放器 更新 Vue3、Element-plus 版本为正式版本并替换部分新语法； 优化前期未设计好的路由结构； 使用 pinia 代替 vuex4； 全部替换为 vue3.2 的代码为...
vue3.0 性能提升，基本语法，简单deom
weixin_46095200的博客
12-23 525
vue3.0 性能提升 一、diff 算法、静态标记 vue2.0 在进行diff算法的时候会对每一层、每一个元素、进行对比，造成性能浪费。 vue3.0 会在动态绑定的地方加上一个标记例如动态class和styel {{}} 等、会直接对标记的进行对比 标记内容 ...
3.Vue3.0模板语法——《跟老吕学Vue》
Python老吕的博客
07-07 982
Vue3.0 的模板语法在保持简洁和直观的同时，增加了许多新的功能和优化，使得开发者能够更高效地构建用户界面。通过插值表达式、指令、组件、插槽、过渡与动画等特性，Vue3.0 的模板语法为开发者提供了强大的工具和灵活性，帮助开发者构建出更加复杂和动态的用户界面。
VUE3.0(一)：模板语法及指令介绍
chengcheng9876的博客
03-26 1742
VUE3.0(一)：模板语法及指令介绍
VUE3.0语法--1
zhou8023ddw的博客
01-06 680
一、Vue3对象新方法 createApp 应用实例化，该方法返回应用实例。可通过该实例进行一些操作，如全局挂载，插件集成等等。 import { createApp } from 'vue' import App from './App.vue' import router from './router' const app = createApp(App) app.use(router) // 安装路由模块 app.mount('#app')//挂载 app.config.globalPro
Vue3.0----组件高级
08-13
Vue3.0中的组件高级功能包括保持动态组件状态和引用DOM元素。 保持动态组件状态的方法是使用Vue内置的<keep-alive>组件。通过将动态组件包裹在<keep-alive>标签中，可以在切换动态组件时保持组件的状态。例如： ```html <keep-alive> <component :is="comName"></component> </keep-alive> ``` 在这个例子中，comName是一个data属性，用于指定当前要渲染的组件的名称。通过在<component>标签中使用:is属性，可以动态地指定要渲染的组件。 引用DOM元素的方法是使用ref属性。通过给DOM元素添加ref属性，可以在组件中通过$refs属性获取对DOM元素的引用。例如： ```html <template> <h3>MyRef组件</h3> <button @click="getRef">获取$refs引用</button> </template> <script> export default { methods: { getRef() { console.log(this.$refs) // $refs指向一个空对象，需要在DOM元素上添加ref属性 } } } </script> ``` 在这个例子中，点击按钮后，调用getRef方法可以在控制台上输出当前组件实例对象this。通过this.$refs可以访问到DOM元素的引用。 以上就是Vue3.0中组件高级功能的两个示例，分别是保持动态组件状态和引用DOM元素。希望能对你有所帮助。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Vue3.0----组件高级【下】(第五章)](https://blog.csdn.net/QQ675396947/article/details/127486948)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值