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>

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

查看所有标签

猜你喜欢:

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

码农书籍

Python Machine Learning

Sebastian Raschka / Packt Publishing - ebooks Account / 2015-9 / USD 44.99

About This Book Leverage Python' s most powerful open-source libraries for deep learning, data wrangling, and data visualization Learn effective strategies and best practices to improve and opti......一起来看看《Python Machine Learning》这本书的介绍吧!

码农工具

随机密码生成器

多种字符组合密码

Markdown 在线编辑器

RGB CMYK 转换工具

RGB CMYK 互转工具