2. 第一个Vue程序 - HelloWorld 和 Vue列表展示

VUE 的 HelloWorld:

我们来阅读Vue的JavaScript代码,会发现创建了一个Vue对象。

 创建Vue对象的时候,传入了一些options:{}

 {}中包含了el属性:该属性决定了这个Vue对象挂载到哪一个元素 上。

 {}中包含了data属性:该属性中通常会存储一些数据 ,这些数据可以是我们直接定义出来的,也可能是来自网络,从服务器加载的。

 

HelloWrold.js:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="js/vue.js"></script>   <!--导入Vue的代码-->

<p id="vue">{{message}}</p>

<script>
    <!--  new一个Vue对象  -->
    let app = new Vue({
        el:#vue, //el挂载元素 相当于把p标签托给vue管理了
        data:{  //存储数据的data
            message:"BiHu"  //手动添加数据,数据也可来源于服务器
        }
    })
</script>

</body>
</html>

这就是  声明式编程,如果原生JS写的话 那么就是 命令式编程 要先获得id 然后要修改innerHTML。

 

当message修改,p标签的内容也变,例如:

  

<script>
    app.message = "i love Vue Code!"
</script>

因为app是new了Vue 所以可以这样。

 

 

Vue的列表展示:

比如我们现在从服务器请求过来一个列表 ,我们希望展示到HTML中:

首先我们在 data中添加movies数组,然后我们尝试直接打印:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="js/vue.js"></script>   <!--导入Vue的代码-->

<p id="vue">{{movies}}</p>

<script>
    <!--  new一个Vue对象  -->
    let app = new Vue({
        el:#vue, //el挂载元素
        data:{  //存储数据的data
            movies:[元素1,元素2,元素3,元素4]  //手动添加数据数组。
        }
    })
</script>
</body>
</html>

输出:[ "元素1", "元素2", "元素3", "元素4" ]

我们还可以指定输出特定的元素,直接:

<p id="vue">{{movies[0]}}</p>

 

这不符合我们意思啊,所以他可以遍历:

<div id="vue">
    <ul>
        <li v-for="item in movies">{{item}}</li>    <!--此处遍历movies 中的数据 放入item中 然后打印item-->
    </ul>
</div>

<script>
    <!--  new一个Vue对象  -->
    let app = new Vue({
        el: #vue, //el挂载元素
        data: {  //存储数据的data
            movies: [元素1, 元素2, 元素3, 元素4]  //手动添加数据数组。
        }
    })
</script>

所以看代码会发现 v-for很类似于JavaScript中的增强型for循环。

他可以直接当数组用,比如可以用数组的元素:

<script>
    app.movies.push("元素5【新添加】");
</script>

然之后呢 有一点要注意:

因为他是遍历 我会发现他其实就是复制了元素然后item的值遍历,所以下面的写法是错误的:

<p id="vue" v-for="item in movies"> {{item}} </p>

<div id="vue" v-for="item in movies">
    {{item}}
</div>

因为 id是vue 而且 有 v-for  他会一直遍历很多份自己 ,那时候vue自己都识别不出自己了 会出错,这个写法也是我刚学的时候写的,典型的错误点.

 

 

                

                   我们称这种为响应式的,因为data里的数据一变 全部都变.

2. 第一个Vue程序 - HelloWorld 和 Vue列表展示

上一篇:new-delete


下一篇:ArrayList的removeIf和iterator.remove性能比较