(一)、利用Vscode开发Vue
1.在桌面创建文件夹code
2.使用Vscode进行打开这个文件夹
3.在Vscode的右键创建文件夹
4.右键创建.html文件
(二)、第一个Vue程序
1.下载并引入Vue.js
下载之后的效果
程序中引入vue,新建一个文件夹，文件夹的名字叫做 js,把下载的vue.js放入文件夹中。
2.引入vue.js
<script type="text/javascript" src="../js/vue.js"></script>
3.创建视图层
- div 是一个容器,容器中写的是Vue模板代码，并不是html代码
- 所谓的模板代码类似于React中的jsx,是html+js的混合体。
- {{xxxx}},xxxx会自动读取data中的xxxx属性。
<div id="root"> <h1>{{message}}</h1> </div>
4.创建Model层
el :通过id选择器进行绑定视图层。data 存数据的容器，为root容器提供数据，值是一个对象。
- new Vue不是vue不能小写，小写会出错。
- Vue里面的参数，我们传输的是对象。
- el 只能绑定一个容器
<script type="text/javascript"> // 创建一个vue的实列 const vm=new Vue({ el:'#root', // el用于指定当前Vue实列为哪个容器服务，值是选择器字符串，选择的写法类似于 jQuery data :{ //data 是存储数据的地方，为root容器提供数据，值为一个对象，相当于React中的state message : '你好呀，吉士先生!' } }); </script>
5.获取Vue实列中的数据
ResultFul风格
{{message}}
6.效果展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>初始Vue</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器， --> <div id="root"> <h1>{{message}}</h1> </div> <script type="text/javascript"> // 创建一个vue的实列 const vm=new Vue({ el:'#root', // el用于指定当前Vue实列为哪个容器服务，值是选择器字符串，选择的写法类似于 jQuery data :{ //data 是存储数据的地方，为root容器提供数据，值为一个对象，相当于React中的state message : '你好呀，吉士先生!' } }); </script> </body> </html>
⭐为什么要使用new 关键字来创建?
1.进行测试
我们通过测试调用x的对象，发现了this再经过new之后，就会发生变化。目的是为了符合源码的需求。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> /* 在这里我们进行创建一个demo方法，然后把x等于obj的属性a 1.我们利用普通方法传递: demo(对象),这里的this是window 2.new demo(),之后我们这里的this就变成 demo的实列了。 */ function demo(obj){ this.x=obj.a //在这里调用对象 this 指window } demo({a:1}) // 传入一个对象 console.log(this.x) //这里我们需要使用window进行调用 x const d=new demo({a:1}) //使用new调用demo时，demo中的this是demo的石烈对象 console.log(this.x) </script> </body> </html>
2.Vue源码
function Vue(options) { if (!(this instanceof Vue)) { warn$2('Vue is a constructor and should be called with the `new` keyword'); } this._init(options); }
3.效果:
⭐一个Vue就为一个容器服务
1.问题描述
在这里我们对容器root进行Vue绑定服务，对于root2不进行Vue绑定服务。这里就会发现root会被Vue解析，root2不会进行Vue解析
2.代码展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>初始Vue</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器， --> <div id="root"> <h1>{{message}}</h1> </div> <div id="root2"> <h1>{{message}}</h1> </div> <script type="text/javascript"> // 创建一个vue的实列 const vm=new Vue({ el:'#root', // el用于指定当前Vue实列为哪个容器服务，值是选择器字符串，选择的写法类似于 jQuery data :{ //data 是存储数据的地方，为root容器提供数据，值为一个对象，相当于React中的state message : '你好呀，吉士先生!' } }); </script> </body> </html>
