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>