01-Vue初学习

栏目: IT技术 · 发布时间: 4年前

内容简介:1. Vue下载(1)网址:(2)点击开发版本,下载完成是一个 Vue.js

1. Vue下载

(1)网址: https://cn.vuejs.org/v2/guide/installation.html

(2)点击开发版本,下载完成是一个 Vue.js

01-Vue初学习

2. 使用

(1)创建文件夹

文件夹:html

文件夹:js

把 Vue.js放到 这个文件夹中

文件夹:01-Vue

在这个文件夹中写 html代码:01.html

01-Vue初学习

(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

01-Vue初学习

  • 修改HelloVue:在控制台输入 app.message = "你好啊" 回车  页面会立即发生变化

01-Vue初学习

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

创新公司

创新公司

[美]艾德·卡特姆、埃米·华莱士 / 靳婷婷 / 中信出版社 / 2015-2 / 49.00元

●《玩具总动员》《海底总动员》《机器人瓦力》《飞屋环游记》等14部脍炙人口的动画长片, 近30次奥斯卡奖, 7部奥斯卡最佳动画长片,7次金球奖; ●几乎每一部电影一上映都位居票房榜首,所有电影都曾进入影史票房总榜前50,每一部电影都是商业与艺术的双赢。 ●即便新兴动画公司不断涌现,皮克斯始终保持动画界的王者之位,这一切背后的秘密就在于:不断推动创新的创意管理方式。 你可以从本书......一起来看看 《创新公司》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

在线进制转换器
在线进制转换器

各进制数互转换器

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换