写在开篇
在学习任何语言，一切都是从hello world开始，本篇也是。放弃前戏，直奔主题。
安装Vscode Live Server插件
- 开始安装插件
Live Server插件主要用于本地开发时使用，它的主要作用时模拟服务器的方式打开页面，代码改动后且还会自动刷新页面。
- 安装完成后，右击红色框处打开
- 成功访问到该页面
注意：访问地址是http://127.0.0.1:5504，这个5504端口就是Live Server插件提供的小型http服务器。
正式从Hello World开始
- 创建div容器，再写个h1标签，div的ID为“pinfo”
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>初识Vue</title> <!--引入开发版Vue--> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!--div容器,ID是pinfo--> <div id="pinfo"> <h1>Hello World!</h1> </div> <script type="text/javascript"> Vue.config.productionTip=false //阻止vue在启动时生成生产提示。 </script> </body> </html>
访问页面
hello World没意思，让Vue实例正式上岗
- 创建vue实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>第一次和Vue的亲密接触</title> <!--引入开发版Vue--> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!--div容器,ID是pinfo--> <div id="pinfo"> <h1>Hello！{{type}}:{{name}}</h1> </div> <script type="text/javascript"> Vue.config.productionTip=false //阻止vue在启动时生成生产提示。 //创建Vue实例 new Vue({ el:"#pinfo", //选择div容器ID，表示管理id为pinfo的div容器 data:{ //定义数据，给el指定的div使用 type:'微信公众号', name:'TtrOpsStack' } }) </script> </body> </html>
注意，前端显示的东西是由Vue实例给它的。
- 访问页面
进一步简单剖析vue实例和div容器的关系
案例1
- 创建两个div容器，id均为pinfo，且只有一个Vue实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>第一次和Vue的亲密接触</title> <!--引入开发版Vue--> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!--div容器,ID是pinfo--> <div id="pinfo"> <h1>Hello！{{type}}:{{name}} A</h1> </div> <div id="pinfo"> <h1>Hello！{{type}}:{{name}} B</h1> </div> <script type="text/javascript"> Vue.config.productionTip=false //阻止vue在启动时生成生产提示。 //创建Vue实例 new Vue({ el:"#pinfo", //选择div容器ID，表示管理id为pinfo的div容器 data:{ //定义数据，给el指定的div使用 type:'微信公众号', name:'TtrOpsStack' } }) </script> </body> </html>
- 访问页面看看，奇怪的事情发生了
总结和注意：多个div容器不能被同1个vue实例接管。
案例2
- 创建2个vue实例，只有1个div容器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>第一次和Vue的亲密接触</title> <!--引入开发版Vue--> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!--div容器,ID是pinfo--> <div id="pinfo"> <h1>Hello！{{type}}:{{name}}</h1> </div> <script type="text/javascript"> Vue.config.productionTip=false //阻止vue在启动时生成生产提示。 //创建Vue实例1 new Vue({ el:"#pinfo", //选择div容器ID，表示管理id为pinfo的div容器 data:{ //定义数据，给el指定的div使用 type:'微信公众号', name:'TtrOpsStack' } }) //创建Vue实例2 new Vue({ el:"#pinfo", //选择div容器ID，表示管理id为pinfo的div容器 data:{ //定义数据，给el指定的div使用 type:'你好', name:'TtrOps' } }) </script> </body> </html>
- 访问页面，发现Vue实例2的数据没有被显示
总结和注意，多个vue实例，不能同时管理1个div容器
- 上面两个案例可以总结出：
vue实例必须和div容器一一对应。
当div容器渲染vue实例中不存在的数据时
- 下面的div容器中，{{url}}是不存在于vue实例中的data
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>第一次和Vue的亲密接触</title> <!--引入开发版Vue--> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!--div容器,ID是pinfo--> <div id="pinfo"> <h1>Hello！{{type}}:{{name}}，{{url}}</h1> </div> <script type="text/javascript"> Vue.config.productionTip=false //阻止vue在启动时生成生产提示。 //创建Vue实例 new Vue({ el:"#pinfo", //选择div容器ID，表示管理id为pinfo的div容器 data:{ //定义数据，给el指定的div使用 type:'微信公众号', name:'TtrOpsStack' } }) </script> </body> </html>
- 访问页面，F12查看控制台发现有错误提示
[Vue 警告]：属性或方法“url”未在实例上定义，但在渲染期间被引用。
- 现在让vue实例的data加上url数据
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>第一次和Vue的亲密接触</title> <!--引入开发版Vue--> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!--div容器,ID是pinfo--> <div id="pinfo"> <h1>Hello！{{type}}:{{name}}，{{url}}</h1> </div> <script type="text/javascript"> Vue.config.productionTip=false //阻止vue在启动时生成生产提示。 //创建Vue实例 new Vue({ el:"#pinfo", //选择div容器ID，表示管理id为pinfo的div容器 data:{ //定义数据，给el指定的div使用 type:'微信公众号', name:'TtrOpsStack', url:'https://mp.weixin.qq.com/s/e4zB2w8hA0j3XHkuKppPuA' } }) </script> </body> </html>
- 再次访问
结果显而易见，正常渲染。
- 再通过F12打开开发者工具，在vue按钮中可以看到vue实例中的data
使用开发版的vue和生产版的vue的对别
- 使用开发版本的vue，下面的代码，创建vue实例中，去掉new关键字
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>第一次和Vue的亲密接触</title> <!--引入开发版Vue--> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!--div容器,ID是pinfo--> <div id="pinfo"> <h1>Hello！{{type}}:{{name}}，{{url}}</h1> </div> <script type="text/javascript"> Vue.config.productionTip=false //阻止vue在启动时生成生产提示。 //创建Vue实例 Vue({ el:"#pinfo", //选择div容器ID，表示管理id为pinfo的div容器 data:{ //定义数据，给el指定的div使用 type:'微信公众号', name:'TtrOpsStack', url:'https://mp.weixin.qq.com/s/e4zB2w8hA0j3XHkuKppPuA' } }) </script> </body> </html>
发现它非常友好的提示你了，你没有使用new关键字
- 使用生产版本的vue（引入vue.min.js），下面的代码，创建vue实例中，同样去掉new关键字，
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>第一次和Vue的亲密接触</title> <!--引入开发版Vue--> <script type="text/javascript" src="../js/vue.min.js"></script> </head> <body> <!--div容器,ID是pinfo--> <div id="pinfo"> <h1>Hello！{{type}}:{{name}}，{{url}}</h1> </div> <script type="text/javascript"> Vue.config.productionTip=false //阻止vue在启动时生成生产提示。 //创建Vue实例 Vue({ el:"#pinfo", //选择div容器ID，表示管理id为pinfo的div容器 data:{ //定义数据，给el指定的div使用 type:'微信公众号', name:'TtrOpsStack', url:'https://mp.weixin.qq.com/s/e4zB2w8hA0j3XHkuKppPuA' } }) </script> </body> </html>
- 访问页面
发现没有友好的提示了，只是报了底层错误，而且很难看出到底是哪里代码有问题
最后来个对Vue的小总结
- 想要使用vue，就需要引入vue.js或者vue.min.js
- 想让Vue工作，需要创建vue实例，而且要指定需要接管的容器ID；
- pinfo容器里的代码还是原来的html规范，只不过加入了vue的语法；
- vue实例和div容器的关系是一一对应的
- 在实际开发中，一般只有一个Vue实例，且配合组件使用（组件的知识点后面会研究）；
- {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
- div容器是vue的模板，比如：pinfo容器里的代码被称为vue模板；
- vue实例data中的数据发生改变，那么模板中用到该数据的地方也会跟着更新；
