| 12345678910111213141516171819202122232425262728293031 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Document</title>
- <!-- 1. 引入Vue框架 -->
- <script src="../../vue.js"></script>
- </head>
- <body>
- <!-- 2. 指定一个容器，用于Vue来构建用户界面 -->
- <div id="app">{{msg}}</div>
- <!-- 3. 通过js代码创建Vue实例，所有使用Vue开发的项目，都必须以创建一个Vue实例开始 -->
- <script>
- // 3.1 完成Vue实例 的 创建
- // 在 第1步 中，由于已经引入了Vue框架源码，因此为在全局作用域中添加一个Vue构造函数
- // 因此 我们可以直接使用Vue构造函数来创建 Vue实例
- // var vm = new Vue(); // 这是创建了一个空的Vue实例，有实际意义，但不多。
- // 在创建Vue实例时，要通过参数对象 来 指定 用户界面的容器以及数据data
- var vm = new Vue({
- el: '#app', // el属性 来指定 容器，一般值为 一个css3-ID选择器
- data: {
- msg: 'hello, world.',
- }, // 指定构建用户界面所需的所有数据
- });
- console.log(vm);
- </script>
- </body>
- </html>
|
