内容简介:1. Vue下载(1)网址:(2)点击开发版本,下载完成是一个 Vue.js
1. Vue下载
(1)网址: https://cn.vuejs.org/v2/guide/installation.html
(2)点击开发版本,下载完成是一个 Vue.js
2. 使用
(1)创建文件夹
文件夹:html
文件夹:js
把 Vue.js放到 这个文件夹中
文件夹:01-Vue
在这个文件夹中写 html代码:01.html
(2) 引入 Vue.js
<script src="../js/vue.js"></script>
完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script src="../js/vue.js"></script><!-- 就是这一行--> </body> </html>
(3)初体验,打印:HelloVue -- 注意体会与JS的不同
- 创建<div>
< div id ="app" ></ div >
- 创建 Vue对象
const app = new Vue({ el: '#app',//用于挂载要管理的元素 data:{//定义数据 message :"HelloVue" } })
- 完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 数据与界面分离--> <div id="app"> <h1> {{message}}</h1> </div> <script src="../js/vue.js"></script> <script> //编程范式:声明式编程 const app = new Vue({ el: '#app',//用于挂载要管理的元素 是 l 不是 1 data:{//定义数据 message :"HelloVue", } }) </script> </body> </html>
(4)响应式编程:数据发生改变的时候,界面自动改变
- 运行html,打开控制台
- 输入 app.message :显示HelloVue
- 修改HelloVue:在控制台输入 app.message = "你好啊" 回车 页面会立即发生变化
3. 浏览器执行代码的流程
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 <div id="app"> 11 <h1> {{message}}</h1> 12 </div> 13 <script src="../js/vue.js"></script> 14 <script> 15 //编程范式:声明式编程 16 const app = new Vue({ 17 el: '#app',//用于挂载要管理的元素 18 data:{//定义数据 19 message :"HelloVue" 20 } 21 }) 22 //响应式:数据发生改变的时候,界面自动改变 23 </script> 24 </body> 25 </html>
- 执行到10-13行时,显示出对应的 html
- 执行到16行,创建Vue实例,并且对HTML进行解析和修改
4. 创建Vue时,传入的options: el 和 data
- el:该属性决定了这个Vue对象挂载到哪一个元素上,这里我们挂在到了id为app的元素上
- data:该属性通常会存储一些数据,这些数据可以是上面那样我们直接定义的,还可以是从网络、服务器加载的
5. 源码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 数据与界面分离--> <div id="app"> <h1> {{message}}</h1> </div> <script src="../js/vue.js"></script> <script> //let 变量 const 常量 //let name = "why" //name = "tom" //编程范式:声明式编程 const app = new Vue({ el: '#app',//用于挂载要管理的元素 data:{//定义数据 message :"HelloVue" } }) //响应式:数据发生改变的时候,界面自动改变 </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 一文读懂监督学习、无监督学习、半监督学习、强化学习这四种深度学习方式
- 学习:人工智能-机器学习-深度学习概念的区别
- 统计学习,机器学习与深度学习概念的关联与区别
- 混合学习环境下基于学习行为数据的学习预警系统设计与实现
- 学习如何学习
- 深度学习的学习历程
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。