vue 3.0 初识

vue.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
  <script src="vue.js"></script>
</head>
<body>

<div id="cp">
    {
  {msg}}
    <p>{
  {msg}}</p>
    <p>姓名:{
  {use.name}}</p>
    <p>年龄:{
  {use.age}}</p>
    <p>性别:{
  {use.gender}}</p>
</div>

<!--//vue数据层-->
<script>
  const app = {
      data(){
        return{
          //   返回vue对象不需要加双引号
          msg:"hello world !!!!",
        //   不光是键值对,还支持类似go里面结构体类型
            use:{
             name:"yuan",
             age:18,
             gender:"男"
            }
        }
      }
  }
  // 将app这个模板,挂载给cp这个元素及其子元素,【数据层】  --加载到--> 【模板层】
   ve = Vue.createApp(app).mount('#cp')
</script>

</body>
</html>

在Vue应用中,使用const来声明变量或常量是一种常见的做法,但不是必须的。Vue的配置项,如组件的定义、数据对象、计算属性、观察者、方法等,都是定义在Vue实例或组件实例的配置对象中的,并不直接依赖于const。例如,你可以使用varlet(另外两种JavaScript变量声明关键词)来声明一个变量,然后在Vue配置中使用这个变量。

示例对比

使用const声明Vue应用配置对象:

const appConfig = {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
};
const app = Vue.createApp(appConfig).mount('#app');

使用var声明Vue应用配置对象:

var appConfig = {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
};
var app = Vue.createApp(appConfig).mount('#app');

两个示例在功能上是等效的,区别仅仅在于如何声明appConfig变量。选择constlet还是var主要取决于你想给这个变量赋予的特性(是否允许重新赋值,作用域等),而不是Vue的要求。

总结

Vue的所有配置都不是从const开始的。const只是用于在JavaScript中声明变量的一种方式,而在Vue中,最重要的是配置对象本身,以及它包含的属性和方法,而不是如何声明这个对象。在实际开发中,建议根据变量或常量的使用场景和需求选择合适的声明方式(constletvar)。

相关推荐

  1. <span style='color:red;'>初</span><span style='color:red;'>识</span><span style='color:red;'>VUE</span>

    VUE

    2024-01-30 09:48:03      37 阅读
  2. vue 3.0

    2024-01-30 09:48:03       35 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-01-30 09:48:03       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-30 09:48:03       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-30 09:48:03       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-30 09:48:03       18 阅读

热门阅读

  1. MySQL入门篇(3)-数据库的基本概念与术语

    2024-01-30 09:48:03       36 阅读
  2. 安装Hive

    2024-01-30 09:48:03       36 阅读
  3. -webkit-line-clamp 是什么?

    2024-01-30 09:48:03       36 阅读
  4. 龙哥风向标 20230620~20230627 GPT拆解

    2024-01-30 09:48:03       52 阅读
  5. 1.7 SBFD

    1.7 SBFD

    2024-01-30 09:48:03      28 阅读
  6. 一键配置ssh免密登录脚本

    2024-01-30 09:48:03       28 阅读
  7. ARM/CM3/CM4:读写内核寄存器和内核特殊寄存器

    2024-01-30 09:48:03       28 阅读
  8. 第二百九十四回

    2024-01-30 09:48:03       28 阅读