我的怎么学会vue的01：安装与创建实例、v-for遍历数组或对象

安装

要学习vue，就要先安装它。vue分为开发版本和生产版本，学习和开发的时候使用开发版本；上线的时候使用生产版本。

vue有三种安装方式：

1. cdn引用
2. 本地下载和引入（推荐初学者使用，学习最基本的语法的初期阶段，使用这种方式）
3. NPM安装

创建实例

演示：定义一个div元素的内容

如果内容是一个字符串

1. 使用script标签，引入vuejs

2. 创建一个div元素，用来动态显示vue指定的内容。

   <div id="app"></div> 

3. 用new创建vue实例 const app = new Vue({ })

   （实例里面接收一个对象{ }作为参数）

4. 给实例传入参数：指定要管理元素（刚才创建的那个div）

   const app = new Vue({
      el:'#app'     //el属性：指定要管理的元素
   })

5. 给实例传入参数：定义元素的内容

   <div id="app">
      <h2>{{message}}</h2>
      <h2>{{name}}</h2>
   </div> 

   const app = new Vue({
      el:'#app',
      data:{      //data属性：指定要显示的数据
          message:'您好啊',
          name:'姚凯'
      }
   })

同时在标签里面做一个标记

<div id="app">{{messages}}</div>

这种写法是声明式编程，只需要在div里做一个标记，标记的位置显示什么，由vue实例来决定。vue实例看到这有一个标记{{messages}}，就会去实例里面找到对应的数据来填充。

这种写法的好处是数据和界面完全分离。数据一变，界面自动跟着变。

完整代码：

<div id="app">
    <h2>{{message}}</h2>
    <h1>{{name}}</h1>
</div>

<div>{{message}}</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app', 
        data: { 
            message: '你好啊',
            name: '姚凯'
        }
    })
</script>

如果内容是一个列表（数组）

让内容显示成一个列表的话，先定义数据（使用数组）

data:{
    messages:'你好啊',
    movies:['星际穿越','大话西游','少年派','盗梦空间']
}

我们想要使用ul-li这种形式去展示电影名称的话，需要用到vue的遍历语法v-for，写法如下：

<div id="app">
    <h2>{{message}}</h2>
    <ul>
        <li v-for='item in movies'>{{item}}</li>
    <ul>
</div>

v-for也由vue实例来解析。

在v-for里面创建一个变量叫item，把实例中movies属性那个数组里面的每一项都赋值给变量item，所以{{ }}里面写的不是movies，也不是movies[0]，而是item。有4个item，就会创建4个li。

这就是显示列表的方法。

v-for遍历数组或对象

v-for遍历数组

不使用下标

<ul>
    <li v-for="item in names">{{item}}</li>
</ul>

使用下标

<ul>
    <li v-for="(item, index) in names">
      {{index+1}}.{{item}}
    </li>
</ul>

v-for遍历对象

获取value

<ul>
    <li v-for="item in info">{{item}}</li>
</ul>

获取key和value 格式: (value, key)

<ul>
    <li v-for="(value, key) in info">{{value}}-{{key}}</li></ul>

获取key和value和index 格式: (value, key, index)

 <ul>
    <li v-for="(value, key, index) in info">{{value}}-{{key}}-{{index}}</li>
</ul>