01-Vue初学习

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

内容简介：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>

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

查看所有标签

猜你喜欢:

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

码农书籍

技术元素

[美] 凯文·凯利 / 张行舟、余倩、周峰、管策、金鑫、曾丹阳、李远、袁璐 / 译言·东西文库／电子工业出版社 / 2012-5 / 55.00元

我会将我不成熟的想法、笔记、内心争论、草稿以及对其他文章的回应都写在《技术元素》中，这样我就能知道自己到底在想些什么。——KK “技术元素”（technium)是凯文•凯利专门创造出来的词语。“技术元素不仅仅包括一些具象的技术（例如汽车、雷达和计算机等），它还包括文化、法律、社会机构和所有的智能创造物。”简而言之，技术元素就是从人的意识中涌现出来的一切。KK把这种科技的延伸面看成一个能产生......一起来看看《技术元素》这本书的介绍吧!

码农工具

01-Vue初学习

技术元素

JS 压缩/解压工具

html转js在线工具

HEX HSV 转换工具