一.下载vue文件并引入
当然你也可以不下载文件，直接引入文件，前提是你有网络
下载vue文件
引入vue文件
这里引入的是在线的文件
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
1
2
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
1
2
二、 实例化vue构造函数 new Vue({参数配置})
[JavaScript] 纯文本查看 复制代码 let vm= new Vue({
//el:element元素的意思 作用与页面关联的
el:'#app',
// data: MVVM中的m 专门用来保存每个页面数据
data:{
msg:'hellow word'
}
})
三、 通过el选项配置关联视图层
[JavaScript] 纯文本查看 复制代码 <!--创建视图层-->
<div id="app">
<h1> {{msg}} </h1>
</div>
四、 通过data配置设置参数，储存数据
五.通过{{}}表达式在视图层里渲染数据（像简单的模板引擎）
完整的页面
[JavaScript] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--创建视图层-->
<div id="app">
<h1> {{msg}} </h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
/*1.下载文件并引入
2.实例化vue构造函数 new Vue({参数配置})
3.通过el选项配置关联视图层
4.通过data配置设置参数，储存数据
5.通过{{}}表达式在视图层里渲染数据（像简单的模板引擎）
* */
// VM viewmodel 视图模型
let vm= new Vue({
//el:element元素的意思 作用与页面关联的
el:'#app',
// data: MVVM中的m 专门用来保存每个页面数据
data:{
msg:'hellow word'
}
})
</script>
</body>
</html>
| 
收藏
淘帖
踩
