vue基础知识

vue基础-插值表达式

vue有一个最基本的功能： 数据渲染。 将数据（变量，或者利用ajax从后端获取到的数据）展示到页面上。

这里它不会直接操作dom，而是有自己的语法。

在vue中{{ }}语法，叫做：插值表达式，大白话就是输出{{ }}中的表达式的值的语法。

把{{ }} 理解为一个占位符（一个坑）， {{ msg }} 就是把msg显示在这个占位符中（把msg插到坑里面边去）

{{}}里面放表达式

vue指令v-bind

v-bind用来动态绑定标签上的属性值.(标签上的属性值不能使用插值表达式来设置)

<元素 v-bind:属性名1="值1" v-bind:属性名2="值2"></元素>
// 简写, 省略v-bind
<元素 :属性名1="值1" :属性名2="值2"></元素>
//简写:
<img :src="data数据">

vue指令-v-for

列表渲染, 所在标签结构, 按照数据数量, 循环生成

<标签 v-for="(值, 索引或者属性名) in 目标结构" :key="唯一值"></标签>

• 索引可以省略
• 目标结构可以是：数组 / 对象 / 数字

<template>
<div>
  <h2>v-for</h2>
  <ul>
    <!-- 
        数组
        item 就循环变量，用来指向当前的数组元素
        idx:下标 
        key要是一个在循环的过程中的唯一值
      -->
    <li v-for="(item, idx) in arr" :key="item.id">
      {{idx + 1}}, {{item.name}}, {{item}}, {{idx}}
  </li>
    <!-- {{item}} -->
  </ul>
  <hr>
  <!-- 对象 -->
  <p v-for="(value, propName) in obj" :key="propName">{{value}}-{{propName}}</p>
  <hr>
  <!-- 数字 -->
  <p v-for="idx in 100" :key="idx">{{idx}} I miss you</p>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        obj: {a:1, b: 2},
        arr: [{id:1, name:'小花'}, {id:2, name:'小明'}, {id:3, name:'小白'}]
      }
    }
  }
</script>

<style>
  
</style>

1. v-for的功能是对标签进行循环生成
2. 快速把数据赋予到相同的dom结构上循环生成