vue参考---vue基本实例

一、总结

一句话总结：

vue基本实例：vue中的el是element的缩写，也就是选择器（选择作用元素）的意

二、vue基本实例

博客对应课程的视频位置：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>01_HelloWorld</title>
 6 </head>
 7 <body>
 8 
 9 <!--
10   1. 引入Vue.js
11   2. 创建Vue对象
12     el : 指定根element(选择器)
13     data : 初始化数据(页面可以访问)
14   3. 双向数据绑定 : v-model
15   4. 显示数据 : {{xxx}}
16   5. 理解vue的mvvm实现
17 -->
18 
19 <!--模板-->
20 <div id="test">
21   <input type="text" v-model="msg"><br><!--指令-->
22   <input type="text" v-model="msg"><!--指令-->
23   <p>hello {{msg}}</p><!--大括号表达式-->
24 </div>
25 
26 <script type="text/javascript" src="../js/vue.js"></script>
27 <script type="text/javascript">
28   const vm = new Vue({ // 配置对象 options
29     // 配置选项(option)
30     el: '#test',  // element: 指定用vue来管理页面中的哪个标签区域
31     data: {
32       msg: 'atguigu'
33     }
34   })
35 </script>
36 </body>
37 </html>