01-Vue初学习

1. Vue下载 

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

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

1-Vue初学习"

 

2. 使用 

(1)建立文件夹

文件夹:html

  文件夹:js

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

  文件夹:01-Vue

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

1-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的差别

Swoole 实战:MySQL 查询器的实现(协程连接池版)

  • 建立<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

1-Vue初学习"

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

1-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. 源码1 — 打印单个元素

<!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>

 6. 源码1 — 打印单列表元素

(1)在Vue工具中,界说影戏列表

 const app = new Vue({
        el: '#app',//用于挂载要治理的元素
        data:{//界说数据
            message :"你好啊",
            movies:['海王','妇联','盗梦空间']
        }
    })

(2) 接见:

<div id="app">
    <ul>
        <li >{{movies[0]}}</li>
        <li >{{movies[1]}}</li>
        <li >{{movies[2]}}</li>
    </ul>
</div>

(3)这样接见太贫苦,我们使用 类似 py、java等的 增强for循环

//java
for i in arr:
    System.out.println(i);
//Vue
<div id="app">
    <ul>
        <li v-for="item in movies">{{item}}</li>
    </ul>
</div>

(4)同样是响应式编程

1-Vue初学习"

 

 

(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">
    <ul>
        <li v-for="item in movies">{{item}}</li>
    <!-- <li >{{movies[0]}}</li> <li >{{movies[1]}}</li> <li >{{movies[2]}}</li> --> </ul> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app',//用于挂载要治理的元素 data:{//界说数据 message :"你好啊", movies:['海王','妇联','盗梦空间']//仍然是响应式的 //浏览器:app.movies.push("xxx") } }) </script> </body> </html>

 

原创文章,作者:28x29新闻网,如若转载,请注明出处:https://www.28x29.com/archives/7154.html