1. el：挂载点
1.1 Vue实例的作用范围
- Vue会管理el选项命中的元素及其内部的后代元素
- 完整代码
1. <!DOCTYPE html> 2. <html lang="en"> 3. <head> 4. <meta charset="UTF-8"> 5. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6. <title>Document</title> 7. </head> 8. <body> 9. <!-- 开发环境版本，包含了有帮助的命令行警告 --> 10. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 11. 12. <div id='app'> 13. <!-- el选择命中内部及后代元素有效--> 14. {{message}} 15. <span >{{message}}</span> 16. </div> 17. <!-- 外部无效 --> 18. {{message}} 19. 20. 21. <script> 22. var app= new Vue({ 23. el:'#app', 24. data:{ 25. message:'我是测试小白' 26. } 27. 28. }) 29. </script> 30. 31. </body> 32. </html>
1.2 其他选择器
- 可使用其他的选择器如 class ，标签，但是建议使用ID选择器
- 完整代码
1. <!DOCTYPE html> 2. <html lang="en"> 3. <head> 4. <meta charset="UTF-8"> 5. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6. <title>Document</title> 7. </head> 8. <body> 9. <!-- 开发环境版本，包含了有帮助的命令行警告 --> 10. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 11. 12. <div id='app' class="app"> 13. <!-- el选择命中内部及后代元素有效--> 14. {{message}}1 15. <span >{{message}}2</span> 16. </div> 17. <!-- 外部无效 --> 18. {{message}}3 19. 20. 21. <script> 22. var app= new Vue({ 23. // el:'#app', // id 选择器 24. // el:'.app', // class 选择器 25. el:'div', 26. data:{ 27. message:'我是测试小白' 28. } 29. 30. }) 31. </script> 32. 33. </body> 34. </html>
1.3 可设置的dom元素
- 可以使用其他的双标签，不能使用HTML和BODY
- 完整代码
1. <!DOCTYPE html> 2. <html lang="en"> 3. <head> 4. <meta charset="UTF-8"> 5. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6. <title>Document</title> 7. </head> 8. <body> 9. <!-- 开发环境版本，包含了有帮助的命令行警告 --> 10. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 11. 12. <p id='app' class="app"> 13. <!-- el选择命中内部及后代元素有效--> 14. {{message}}1 15. <span >{{message}}2</span> 16. </p> 17. <!-- 外部无效 --> 18. {{message}}3 19. 20. 21. <script> 22. var app= new Vue({ 23. el:'#app', // id 选择器 24. // el:'.app', // class 选择器 25. // el:'div', 26. data:{ 27. message:'我是测试小白' 28. } 29. 30. }) 31. </script> 32. 33. </body> 34. </html>
2. data 数据对象
- Vue中用到的数据定义在data中
- data中可以写复杂类型的数据,如：数组，字典
- 渲染复杂类型数据时，遵守js的语法即可，如：数组通过下标取值 city[0]，字典通过key取值 info.name
- 完整代码
1. <!DOCTYPE html> 2. <html lang="en"> 3. <head> 4. <meta charset="UTF-8"> 5. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6. <title>Document</title> 7. </head> 8. <body> 9. <!-- 开发环境版本，包含了有帮助的命令行警告 --> 10. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 11. 12. 13. <div id='app'> 14. {{message}} 15. <h2>{{info.name}} {{info.age}} {{info.sex}}</h2> 16. <ul> 17. <li>{{city[0]}}</li> 18. <li>{{city[1]}}</li> 19. </ul> 20. </div> 21. 22. <script> 23. var app= new Vue({ 24. el:'#app', 25. data:{ 26. message: '你好 测试小白!', 27. info:{ 28. name: '小白', 29. age: 26, 30. sex: 'man' 31. }, 32. city:['辽宁','大连'] 33. } 34. }) 35. </script> 36. </body> 37. </html>
