插值表达式
了解插值表达式的用法
将data中定义的数据显示到模板上。
在vue中{{ }}语法，叫做：插值表达式，大白话就是输出{{ }}中的表达式的值的语法。
把{{ }} 理解为一个占位符（一个坑）， {{ msg }} 就是把msg显示在这个占位符中（把msg插到坑里面边去）
语法
{{ }} 可以：
- 写data数据字段名称
- 对data数据字段进行表达式运算
-
- 拼接
- 算术运算
- 三元运算
{{}}不能：
- 声明变量，分支，循环
- 访问在vue实例之中data之外定义自定义的变量
vue中的指令
{{ }}可以用来把数据显示在视图上，但它的功能还是相当有限的。例如，如果是一个列表数据（数组）希望使用循环来显示，它就做不到了。所以我们需要继续学习vue的指令系统。
指令
vue提供了指令（directive）功能，这些指令都是以v-开头(例如：v-for )，它们从形式上来看是标签的自定义属性（只不过是由vue提供的） 。
示例：
作用
指令必须用在某个标签（或者是组件）上， 用来扩展标签的原有功能。
明细
每个指令都有不同的作用,下面是一下指令 v-on v-model v-for v-text
v-html v-if v-show v-if,v-else-if,v-else v-bind
小结 vue提供指令系统来增强标签的能力 指令都是以v-开头,每个指令都有自己的作用 指令的学习基本没有先后顺序 指令要与具体的 结合一起使用 一个标签上使用多个指令
v-bind 如何使用设置img的src的内容
<img src="{{}}"/>
作用
v-bind用来动态绑定标签上的属性值(标签上的属性值不能使用插值表达式)
格式
bind:绑定,可以用来改变this的指向
<元素 v-bind:属性名1="值1" v-bind:属性名2="值2"></元素>
v-bind指令简写:冒号,例如:
一般是在属性名的=里面写一个data中的数据项, :属性名="数据项" 称之为:把x绑定在y属性上
代码
<template>
<h2>v-bind绑定属性值</h2>
<p>{{name}}</p>
<!-- 绑定属性
v-bind:src 可以简写成 :src
-->
<!-- <img src="{{imgSrc}}"/> -->
<img v-bind:src="imgSrc" v-bind:id="id"/>
</template>
<script>
data () {
return {
name: "尤大大",
id: 'imgHeader',
imgSrc: "https://bkimg.cdn.bcebos.com/pic/4afbfbedab64034f29596c8ba6c379310b551da2"
}
}
</script>
一道是考题 问：如下两种写法的区别是什么？
<div id="myId">写法1</div>
<div :id="myId">写法2</div>
区别答： 上面 就是一个普通的id属性； 下面这个div的id属性值要从data中的定义的myId这个中去找， 如果找不到，就会报错。
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>
- v-for的功能是对标签进行循环生成
