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里的数据一变 全部都变.