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自己都识别不出自己了 会出错,这个写法也是我刚学的时候写的,典型的错误点.
其实不仅单单是数组 里面还可以是JSNO数据,其次呢名字也不一定要是movies 也可以自定义的,像这种标签后面还有很多 会逐个介绍。
这个v-for还有很多用法 单独一篇介绍
我们称这种为响应式的,因为data里的数据一变 全部都变.