安装 Vue 非常的简便,只需下载好 Vue 对应的 .js 文件,在 html 中引入 vue.js 即可使用 Vue
下载好了 vue.js 我们便可以编写我们的第一个 vue 程序了
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>first-vue</title>
<!-- 加载vue -->
<script src = "js/vue.js"></script>
</head>
<body>
<!-- 指定挂载位置 -->
<div id = "app"></div>
<!-- Vue 程序 -->
<script>
// 创建 Vue 的实例对象
const myVue = new Vue(
//可变参数,opting -> 选项,其中可以编写大量的配置项
{
// 配置项1:模版语句
template : '<h1>hello vue!</h1>'
})
// 将 myVue 这个实例挂在在 app 上
myVue.$mount('#app')
</script>
</body>
</html>
在浏览器运行这个 html 文件
对于第一个程序,我们需要知道以下几点基础知识
1.我们通过 new vue() 这个对象来调用 vue 组件中的内容
2.对于 vue 对象的创建,我们需要对其指定可选项 options
即 :
let options = {
template : '<h1>hello vue!</h1>'
}
对于options , 里面是许多的可选项 option ,以键值对的形式存在,当我们需要使用某些特定功能时添加 option,在 new vue() 时指定 options 时,参数名可省略
const myVue = new Vue({
template : '<h1>hello vue!</h1>'
key1 : value1
key2 : value2
})
3.template 配置项:用于指定模版语句
模版语句可以是 html 代码,也可以是 Vue 指定的一些特殊规则
4.Vue 对象的实例都有一个 $mount() 方法
$mount() 的作用是将实例挂载到指定位置,将其挂载后方便对其进行管理