炽乐清网站建设深圳专业网站制作平台

目录

前言

hello vue

为什么要new Vue(),而不能直接调用Vue()?

Vue构造函数中的形参options

template配置项

$mount()方法

---

前言

从此篇博客开始，将开启vue的学习，查缺补漏。

只要学计算机语言，那么hello xxx那一定是入门第一行代码了，本文就来解析hello vue，Vue的入门代码

hello vue

代码

直接下载的vue.js文件，用script引入

vue2官网

<div id="app"></div><script>const myVue = new Vue({template:'<h1>hello vue!<h1>'})myVue.$mount('#app')</script>

为什么要new Vue(),而不能直接调用Vue()?

如下图，可以看到，vue就是一个构造函数，如果不创建实例的话就会报错，所以需要new一下

Vue构造函数中的形参options

在vue框架中，要求options参数必须是一个纯粹的js对象：{}，而在js对象中可以编写大量的key:value对。一个key:value对就是一个配置项，options这个参数就是来给Vue实例指定多个配置项的

template配置项

template配置项是用来指定模板语句的，而模板语句就是Vue框架自己制定的一些特殊符号，Vue框架有自己的模板语句语法规则，书写时需要遵守其语法规则，模板语句可以是纯粹的html代码，也可以是vue自定义的一些特殊符号+html代码。

在template后面的模板语句会被Vue框架编译器编译成浏览器能够识别出来的html代码

$mount()方法

Vue实例都有一个$mount()方法，其作用是将Vue实例挂载到指定位置