6

01-Vue初学习

 4 years ago
source link: http://www.cnblogs.com/mofei1999/p/12819064.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

1. Vue下载

（1）网址： https://cn.vuejs.org/v2/guide/installation.html

（2）点击开发版本，下载完成是一个 Vue.js

AbA7jqy.png!web

2. 使用

（1）创建文件夹

文件夹：html

文件夹：js

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

文件夹：01-Vue

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

juquyiU.png!web

（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

uEvyi2r.png!web

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

r63Mju6.png!web

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>

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK