Vue【第2章】：Vue目录结构分析，常用指令-数据绑定、属性绑定、渲染数据、循环渲染数据

内容概要：

• Vue目录结构分析

• 常用指令：数据绑定、属性绑定、数据渲染

一、Vue目录结构

1.整体目录说明：

2. .vue文件说明：

.vue的文件称为组件，里面有三部分组成：<template>、<script>、<style>

注意：vue的模板里，所有的内容要被一个根节点包含起来，也就是说，所有组件都要放在根组件的根节点里，也就是一个div里。

2.1 <template>标签说明：

该标签内存放的是html代码，HTML5的一个新元素，主要用于保存客户端中的内容，表现为浏览器解析该内容但不渲染出来。

在<template>标签下只能有一个子节点元素，如果写多个如<div>这样的标签则会报错，如下所示：

<template>
    <div></div>
    <div></div>
</template>

2.2 <script>标签说明：

该标签存放的是业务逻辑、一些数据。

该标签中的export default：

　　是ES6新增的模块部分的语法，采用模块的方式，每个文件都自成一个模块，采用export和import来暴露和引用接口。一个文件或模块中，export和inport可以有多个，但是export default只能有一个，使用该命令之后别的模块引用时就可以不需要知道所要加载的模块变量名。

export defalut下可以写什么：

　　可以写很多东西，包括变量和方法，对象等，只要是想作为开放的接口都可以写，在.vue文件中一般写上 data(){ } 以及method等，data指的是在该组件中定义的模板数据；method里一般写的是一些方法，比如点击事件的方法。

二、常用指令

1.数据绑定  {{ }}  或 v-text

说明：在script标签的data里定义，然后在template标签里通过两个花括号来绑定。或者使用v-text 指令来绑定数据

示例1：使用花括号{{}}方式来绑定。

#在template里调用return中定义的数据
<template>
  <div>
    <h2>{{msg}}</h2>
    <h3>{{obj.name}}</h3>

  </div>
</template>


#在script里定义数据
<script>
  export default {
    name: "app",
    data() {
      return {
        msg:"绑定数据",
        obj:{
          name:"zjk"
        }
      }
    }
  }
</script>


#输出结果
绑定数据
zjk

示例2：使用 v-text 指令来绑定

<template>
  <div>
    <div v-text="msg"></div>
    <div v-text="obj.name"></div>

  </div>
</template>


<script>
  export default {
    name: "app",
    data() {
      return {
        msg:"绑定数据",
        obj:{
          name:"zjk"
        }
      }
    }
  }
</script>

#输出结果
绑定数据
zjk

2. 循环渲染数据（列表渲染） v-for

说明：用v-for指令把一个数组对应为一组元素，进行渲染，v-for 指令需要使用 item in items 形式的特殊语法，items是源数据组，item是数组元素迭代的别名。

示例1：

#template标签
<template>
  <div>
    <h2>{{msg}}</h2>
    <h3>{{obj.name}}</h3>
    <ul>
      <li v-for="item in list">
        {{item}}
      </li>
    </ul>
  </div>
</template>


#script标签
<script>
  export default {
    name: "app",
    data() {
      return {
        msg:"绑定数据",
        obj:{
          name:"zjk"
        },
        list:["偏偏","喜欢","你"],
      }
    }
  }
</script>


#输出结果
绑定数据
zjk
·偏偏
·喜欢
·你

示例2：

#
<template>
  <div>
    <ul>
      <li v-for="item in list1">
        {{item.title}}
      </li>
    </ul>
  </div>
</template>

#
<script>
  export default {
    name: "app",
    data() {
      return {
        list1:[
          {"title":"111"},
          {"title":"222"},
          {"title":"333"},
        ],
      }
    }
  }
</script>

#输出结果
·111
·222
·333

示例3：嵌套

#
<template>
  <div>
    <ul>
      <li v-for="item in list2">
        {{item.user}}
          <ol>
            <li v-for="item1 in item.list">
              {{item1.title}}
            </li>
          </ol>
      </li>
    </ul>
  </div>
</template>

#
<script>
  export default {
    name: "app",
    data() {
      return {
        list2:[
          {
            "user":"陈百强",
            "list":[
              {"title":"偏偏喜欢你"},
              {"title":"一生何求"}
            ]
          },{
            "user":"李健",
            "list":[
              {"title":"假如爱有天意"},
              {"title":"贝加尔湖畔"}
            ]
          },
        ],
      }
    }
  }
</script>


#输出结果
·陈百强
    1.偏偏喜欢你
    2.一生何求
·李健
    1.假如爱有天意
    2.贝加尔湖畔

3. 属性绑定（class和style的绑定） v-bind 或 ：

说明：操作元素的class列表和内联样式是数据绑定的一个常见需求，可以用v-bind来处理。

示例1：我们在一个给一个div绑定一个title，内容为“这是一个title”

#
<template>
  <div>
    <div v-bind:title="title1">移动鼠标显示1</div>
    <div :title="title2">移动鼠标显示2</div>
  </div>
</template>


#
<script>
  export default {
    name: "app",
    data() {
      return {
        title1:"这里用的是 v-bind",
        title2:"这里用的是 :",
      }
    }
  }
</script>

输出结果：

               

示例2：给img绑定一个图片地址

#
<template>
  <div>
    <div v-bind:title="title1">移动鼠标显示1</div>
    <div :title="title2">移动鼠标显示2</div>
    <img :src="url" alt="">
  </div>
</template>


#
<script>
  export default {
    name: "app",
    data() {
      return {
        title1:"这里用的是 v-bind",
        title2:"这里用的是 :",
        url:"https://www.luffycity.com/static/img/head-logo.a7cedf3.svg"
      }
    }
  }
</script>

输出结果：

4.绑定html    v-html

说明：双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令。

注意： v-text 指令，和v-html指令的区别就是，v-text 不会解析html代码，是什么就显示什么。

示例：

#
<template>
  <div>
    <div v-text="html"></div>
    <div v-html="html"></div>
  </div>
</template>

#
<script>
  export default {
    name: "app",
    data() {
      return {
        html:"<span>这是绑定html代码</span>"
      }
    }
  }
</script>


#输出结果
<span>这是绑定html代码</span>
这是绑定html代码

5.class绑定