Vue.js基础教程：实例化、模板语法与MVVM-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44875230/article/details/123062936

本文介绍了Vue.js的基础知识，包括如何删除生产提示、创建Vue实例，深入讲解了模板语法中的插值语法及其限制。讨论了`el`和`data`属性，展示了它们的不同写法，并解释了MVVM模型在Vue中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

删除生产提示

生产提示默认是开启的状态，可以通过Vue.config查看

在这里插入图片描述

Vue.config.productionTip = false

创建Vue实例

new Vue({})

实例化对象时只能传递一个对象，称该对象为配置对象

实例的存在是为了接管容器的

new Vue({
  el:"xxx",
  data:{key,value}
})

配置对象中el属性是为了指定该实例是为了谁而工作，里面的值通常是css选择器。eg：“#app”。当然，也可以直接用原生js选择容器，eg：el:document.querySelector(“#app”)，但在Vue中不推荐直接操作dom。

注：el是element的简称

data属性是存数据的，data的数据类型通常是一个对象，可以给el指定的容器传数据。

模板语法

插值语法

用法：可用在标签体中，不可用在标签属性中。即可绑定内容，但不可绑定属性

<body>
    <!--容器 -->
    <div id="root">
      <h1>你好，{{name}}</h1>
      
      <!--函数调用表达式-->
      <h1>你好，{{name.toUpperCase()}}</h1>
    </div>
</body>

<script>
    Vue.config.productionTip = false;
//这是一个Vue实例
    new Vue({
      el: "#root",
      data: {
        name: "Penrose",
        sex: "male",
        
        //如果data中的数据重名，可以为data中的属性值设置不同的层级
        school:{
          name:"university"
        }
      },
    });
</script>

容器中的内容被称为vue模板，vue会根据此模板内容生成一个新的id为root的容器。如果插值语法中的数据发生变化，vue就会重新解析，生成一个新的容器。

插值语法不能用在元素属性上。如果想要想属性上进行数据绑定，就需要使用v-bind指令。简单来说，vue中mustache语法不能绑定属性，只能绑定标签体的内容。

容器与实例是一一对应的关系，一个容器只为一个实例存放模板，一个实例只接管一个容器。

{{xxx}}，moustache语法中可以写表达式（js表达式，函数调用表达式），moustache语法可以读取到data属性中的值。而标签属性需用通过v-bind才可以读取到data中的值。

同时，只要是Vue实例对象身上的属性以及Vue原型身上的属性都可以。之所以{{xxx}}中可以读取到data中的值，是因为data中的属性最终都出现在了Vue实例对象身上，其实质还是访问了Vue实例对象身上的属性，这中间有一个数据代理的过程。

简单来说，{{表达式/vm身上的属性/Vue原型身上的属性}}

el和data

el的两种写法

直接写在配置对象中

new Vue({el:"#app"})

将实例对象挂载到容器上

const vm = new Vue({
  data:{
    name:"Penrose"
  }
})
vm.$mount("#root")

将对象挂载到容器上时，也就意味着实例对象可以操作DOM元素
$mount属性是Vue原型身上的属性（$开头的属性程序员都是可以使用的）

data的两种写法

属性式

data:{key:value}

函数式（只能是普通函数，不能是箭头函数。使用组件时，必须采用函数式写法，return返回一个对象）

data(){
  return{key:value}
}

//上述是简写形式
data: function(){
  return{key:value}
}

上述两种情况，this指向的都是Vue实例对象

如果将data函数写为箭头函数，则this就会指向window，因为箭头函数没有自己的this，它只能去找它所在作用域的this，即window对象

data:() => {
  return{key:value}
}

MVVM模型

Vue的设计受到了MVVM架构模型的启发

M代表Model，模型，对应data中的数据

V代表View，视图，对应页面

VM代表ViewModel，视图模型，对应vue实例对象，所以一般Vue实例对象的变量名为vm

//View

 <div id="root">
      <h1>姓名：{{name}}</h1>
 </div>

//VM

const vm = new Vue({
        el: "#root",
        
//Model
        data: {
          name: "Penrose",
        },
      });

vm相当于一个桥梁，将页面和模型连接在一起。通过vm，将data中的数据绑定到页面上，页面上的变化映射到数据的变化