接上篇《3. Vue目录结构分析》

上一篇我们主要讲解了Vue的目录分析，本篇我们主要来介绍Vue的基础语法，绑定数据、对象，以及如何循环数组和渲染数据。

前几篇我使用的代码编辑器是HBuilder：

HBuilder主要用来开发手机APP端的前端页面比较方便，但由于我们主要目的是开发Web端，暂时不以Web app为主。所以目前比较好用的还是Visual Studio Code：

Visual Studio Code它里面有终端窗口，可以启动项目或者使用其它的npm指令，不用额外打开cmd控制台，然后还有很多其它前端的便捷工具，所以后面的教程不再使用HBuilder，改用VS。

这里我用vs打开之前的项目后，vs就很智能的告诉我，需要下载vue的解析插件，因为不下载插件的话，标签什么的编译器无法识别，也不能给提示：

安装完之后，再看代码，所有的标签和样式就有颜色了，而且可以给提示：

废话不多说，开始本篇的学习。

一、vue代码结构整体介绍

对于前一篇介绍的我们自行搭建的vue-demo1工程， 我们最终要开发的部分，其实也就是组件部分（子组件可扩展开发）：

我们先不去关心其它的文件到底什么意思，怎么来用起来，我们先从主组件App.vue入手，去了解vue的一些基本语法，它会让我们后面更好理解整个Vue的结构。我们打开App.vue，可以看到其中的代码结构：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h2>你好！Vue</h2>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

我们简化一下内容：

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

<script>
</script>

<style>
</style>

可以看到整个文档包含了三大内容，分别是<template>模板区域、<script>脚本区域和<style>样式区域，分别起到内容显示、逻辑控制、样式渲染的功能。

而在<template>模板区域中有一个div，这个div是必须有的，因为vue要求模板中所有的内容都要被一个根节点包含起来。根节点中我们就可以写需要的Html代码了。

二、绑定数据和对象

我们把上面的App.vue文件中的三大区域的数据清空，然后编写一个简单的数据绑定内容：

<template>
  <!-- vue的模板里面，所有的内容都需要被一个根节点包裹起来 -->
  <div id="app">
     <h2>{{msg}}</h2>
     <br/>
     这是一个根组件
     <h3>姓名：{{userObj.name}}  性别：{{userObj.sex}}</h3>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
      return {
        msg: '你好，vue',
        userObj:{
          name:"张三",
          sex:"男"
        }
      }
  }
}
</script>

<style></style>

在Visual Studio Code中运行vue程序，不用再打开cmd，我们选择“终端->新终端”：

这里就会帮我们在下面创建一个终端窗口，和cmd效果一样，默认为我们打开了该项目文件所在的文件夹，我们直接输入“npm run dev”指令就可以以dev模式运行项目了：

运行之后的效果：

在<script>区域，编写了数据逻辑：

<script>
export default {
  name: 'app',
  data () {
      return {
        msg: '你好，vue',
        userObj:{
          name:"张三",
          sex:"男"
        }
      }
  }
}
</script>

这里的“export default”的意思是表示把这个组件暴露出去。其中的name为这个组件的名称，这里是app（如果整个文档只有一个app组件，这个name可以不要）。
其中的“data (){}”表示业务逻辑中定义的数据，可以理解为在上面的html文档中植入的动态数据。这里我们定义了一个叫“msg”的数据，那么在上面我们使用双花括号，就可以引用在“data”中定义的msg的值信息：

<h2>{{msg}}</h2>

如果换做以前，我们是需要在<script>区域中进行dom操作的。

然后下面还可以绑定一个对象（如上面定义的userObj对象），在对象中可以定义该对象的很多属性，此时我们在上面的<template>区域就可以使用双花括号调用对象，然后就想使用普通js对象一样，用“.”点获取其对象属性：

<h3>姓名：{{userObj.name}}  性别：{{userObj.sex}}</h3>

三、循环数组和渲染数据

vue除了能进行上面的数据和对象绑定的操作，对于数组的循环和数据的渲染也有强大的功能。例如我们需要循环一个list数组，首先在data中定义该数组对象:

<script>
export default {
  name: 'app',
  data () {
      return {
        msg: '你好，vue',
        userObj:{
          name:"张三",
          sex:"男"
        },
        list:['111','222','333']
      }
  }
}
</script>

然后在<template>区域中使用“v-for”指令进行数组的遍历：

<ul>
   <li v-for="item in list" :key="item">
      {{item}}
   </li>
</ul>

这里v-for指令需要使用“item in list”形式的特殊语法，其中“list”是源数据数组，而“item”则是被迭代的数组元素的别名。
而“key”的意义，是为了给Vue一个提示，以便它能跟踪每个节点的身份。使用key的主要原因是有相同父元素的子元素必须有独特的key，重复的key会造成渲染错误。
如果我们用对象，可以更明白key的作用。这里定义一个对象数组：

<script>
export default {
  name: 'app',
  data () {
      return {
        msg: '你好，vue',
        userObj:{
          name:"张三",
          sex:"男"
        },
        list:['111','222','333'],
        items: [
          { id: '1', message: 'Foo' },
          { id: '2', message: 'Bar' }
        ]
      }
  }
}
</script>

然后遍历它：

<ul>
   <li v-for="item in items" :key="item.id">
      {{item.id}},{{item.message}}
   </li>
</ul>

这里就告诉vue，使用id属性来区分每一个元素，以便它能跟踪每个节点的身份，从而可以重用和重新排序现有元素。

注意：以前的版本中，v-for可以不需要指定key，但是在Vue 2.2.0以上的版本里，当在组件中使用v-for时，key是必须的，如果不加key值，则会报Elements in iteration expect to have 'v-bind:key' directives"的错误。

上面两个样例的运行结果：

我们还可以循环一个更加复杂的数组，该数组里面有对象成员，每个对象成员自己的结构中又有数组成员，例如下面的一个新闻分类的数据结构（items2）：

<script>
export default {
  name: 'app',
  data () {
      return {
        msg: '你好，vue',
        userObj:{
          name:"张三",
          sex:"男"
        },
        list:['111','222','333'],
        items: [
          { id: '1', message: 'Foo' },
          { id: '2', message: 'Bar' }
        ],
        items2:[
          {
            "cate":"国内新闻",
            "list":[
              {id:'11',title:'国内新闻111111'},
              {id:'22',title:'国内新闻222222'}
            ]
          },
          {
            "cate":"国际新闻",
            "list":[
              {id:'11',title:'国际新闻111111'},
              {id:'22',title:'国际新闻222222'}
            ]
          }
        ]
      }
  }
}
</script>

此时我们如何循环？在<template>区域中可以这样编写：

<ul>
    <li v-for="item in items2" :key="item.cate">
      {{item.cate}}
      <ol>
        <li v-for="news in item.list" :key="news.title">
          {{news.title}}
        </li>
      </ol>
    </li>
</ul>

其实大家到这里应该明白了，每个v-for的标签对，其实可以看做之前for循环的花括号体，在里面我们可以嵌套内循环体，有多少层我们就可以嵌套多少层。

最终效果：

以上就是Vue的基础语法，绑定数据、对象，以及如何循环数组和渲染数据的全部内容。下一篇我们继续介绍Vue如何绑定属性、Html、class、style。

参考：
https://cn.vuejs.org/v2/guide/list.html
https://cn.vuejs.org/v2/api/#key
《IT营：itying.com-2018年Vue2.x 5小时入门视频教程》

转载请注明出处：https://blog.csdn.net/acmman/article/details/107444998