Vue3基础+代码语法+例子大全（一）——应用组件和语法

大奎子

已于 2022-09-09 12:08:55 修改

阅读量1.5k

点赞数

分类专栏： vue.js基础知识点、语法、例子文章标签：前端 vue.js

于 2022-09-04 18:46:05 首次发布

本文链接：https://blog.csdn.net/m0_46610349/article/details/126683806

版权

本文是Vue3的基础教程，详细介绍了Vue3的应用组件和语法，包括根组件的创建、文本插值、原始HTML处理、Attribute绑定、JavaScript表达式及各种指令的使用，如v-bind、v-once、v-html、v-if等，帮助读者快速掌握Vue3的使用。

摘要由CSDN通过智能技术生成

参考官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

一、应用与组件：

1、根组件：

二、语法（举例说明）：

1、文本插值：“Mustache”语法、v-once指令

一、应用与组件：

1、根组件：

我们传入 createApp 的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。

import { createApp } from 'vue'
// 从一个单文件组件中导入根组件
import App from './App.vue'

const app = createApp(App)

传递给 createApp 的选项用于配置根组件，挂载应用时，该组件被用作渲染的起点。

应用实例必须在调用了 .mount() 方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串：

如果想把一个Vue应用挂载到 <div id="app"><div>，应该传入 #app：

const RootComponent = {
  /*选项*/
}
const app = Vue.createApp(RootComponent)
const vm = app.mount("#app")

二、语法（举例说明）：

1、文本插值：“Mustache”语法、v-once指令

最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)。双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。

<span>Message: {
  { msg }}</span>

使用v-once指令，也能一次性地插值，当数据改变时，插值处的内容不会更新。但注意这会影响到该节点上的其他数据绑定。

<span v-once>这个将不会改变: {
  { msg }}</span>

举个例子：

<script>
//声明式渲染，可以提高开发效率
export default{  //导出对象
  data(){  //data会默认进行解析
    return{
      num:0,
      uname:"张三"
    }
  }
}
</script>

<template>
  <!-- 组件实例的所有property，无论如何定义，都可以在模板中访问 -->
  <div>
    <p>{
  {num}}</p>
    <p>{
  {uname}}</p>
    <!-- v-once ：当数据改变时，插值处的内容不会更新 -->
    <p v-once>{
  {uname}}</p>
  </div>
</template>

添加一个按钮，可以更直观方便的看到变化：

<script>
//声明式渲染，可以提高开发效率
export default{  //导出对象
  data(){  //data会默认进行解析
    return{
      num:0,
      uname:"张三"
    }
  },
  methods:{
    //给vue定义方法
    changeUname:function(){
      // this指向vue实例
      this.uname='李四'
    }
  }
}
</script>

<template>
  <!-- 组件实例的所有property，无论如何定义，都可以在模板中访问 -->
  <div>
    <p>{
  {num}}</p>
    <p>{
  {uname}}</p>
    <!-- v-once ：当数据改变时，插值处的内容不会更新 -->
    <p v-once>{
  {uname}}</p>
    <!-- 写一个点击事件，后面接上函数：changeUname -->
    <button @click="changeUname">点击改变名字</button>
  </div>
</template>