什么是插值表达式
- 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，就是指插值表达式
- 表达形式为：{{属性名称}}
- 它的功能类似于模板引擎中的“输出表达式”，主要用于渲染指定的数据
- 在进行解析的时候，插值表达式将会被替代为对应数据对象上指名名称属性的值
- 无论何时，绑定的数据对象上的属性值发生了改变，插值处的内容都会更新。
- 当你需要在页面中渲染指定数据的时候，可以考虑使用插值表达式
<p>{{msg}}</p>
插值表达式的基本使用
<div>
<!-- 1.基本使用:直接渲染指定名称的变量,变量需要先定义好 -->
<p>{{msg}}</p>
<!-- 2.可以在插值中使用api -->
<p>{{msg.toUpperCase()}}</p>
<!-- 3.可以进行字符串的拼接 -->
<p>{{'我想对你说:' + msg}}</p>
<p>我想对你说:{{msg}}</p>
<!-- 4.可以使用三元表达式 -->
<p>{{age>=18?'成年':'未成年'}}</p>
<!-- 不要在插值里面使用自增或自减 -->
<!-- <p>{{age++}}</p> -->
<!-- 不能写js关键字或结构 -->
<!-- <p>{{if(age>=18)}}</p> -->
</div>
vue常用指令
v-text
- 功能：完全更新标签之间的内容
- 使用语法：v-text="变量"
- 特点
- 可以直接指定数据
- 可以拼接字符串
- 可以调用api
- 可以使用三元表达式
<div>
<p>作用:设置标签的文本内容</p>
<p>{{msg}}</p>
<!-- 直接设置变量,变量要先定义好 -->
<p v-text='msg'></p>
<p v-text='msg.toUpperCase()'></p>
<p v-text="'我想对你说:'+msg"></p>
<p v-text="age>=18?'成年':'未成年'"></p>
<p v-text="msg">这里已经有内容了</p>
</div>
v-html
- 功能：完全更新标签之间的内容
- 使用语法：v-text="变量"
- 特性：可以解析网页结构
<template>
<div>
<p>v-html的特点:它可以解析html结构</p>
<p>{{msg}}</p>
<p v-text="msg"></p>
<!-- 直接使用v-html指定数据 -->
<p v-html="msg"></p>
<p v-html="msg.toUpperCase()"></p>
<p v-html="'拼个字符串'+msg.toUpperCase()"></p>
<p v-html="age>=18?'成年':'未成年'"></p>
<p>{{str}}</p>
<p v-text="str"></p>
<p v-html="str"></p>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'hello',
age: 20,
str: '后台返回的内容<hr>'
}
}
}
</script>
v-for
作用：基于源数据多次渲染元素或模板块,说白了，就是对数据进行动态渲染的
语法：
(1).遍历数组：value是数组的成员，index是数组的索引
<元素 v-for='(value,index) in 数组>{{value}}:{{index}}</元素>
(2).遍历对象：value是对象的属性值，key是对象的属性名称，index是索引(一般不用)
<元素 v-for='(value,key,index) in 对象>{{value}}:{{key}}:{{index}}</元素>
v-model
作用：可以实现数据与元素的双向绑定
- 数据变化 会影响dom元素
- dom元素中的内容变化也会影响数据
使用限制：不是任何的元素都能添加v-model,只有input,textarea,select可以使用v-model
语法：<标签 v-model='数据'></标签>，如<input v-model="msg"/>
<template>
<div>
<h2>v-model的作用是实现视图和数据的双向绑定 </h2>
<h3>1.修改数据,视图内容自动更新</h3>
<h3>2.修改视图内容,数据自动更新</h3>
<p v-model="msg">{{msg}}</p>
<input type="text"
v-model="msg">
</div>
</template>
<script>
export default {
data () {
return {
msg: 'hello'
}
}
}
</script>
v-on
作用：为元素绑定事件。表达式可以是一个方法的名字或一个内联语句
- 事件类型由v-on后面的参数决定
- 在普通元素上时，只能监听原生 DOM 事件
- v-on可以简写为@
<template>
<div>
<button v-on:click='dodo'>最简单的事件绑定 </button>
<button @click='dodo("jack",$event)'>简写方式绑定事件</button>
<a href="http://www.baidu.com"
@click.prevent='nojump'>我不要跳转到百度</a>
</button>
</div>
</template>
<script>
export default {
data () {
return {
name: 'jack',
}
},
methods: {
dodo1 (name, e) {
console.log(name, e);
},
nojump (e) {
// e.preventDefault()
console.log('我不跳');
}
}
}
</script>
v-bind
作用：动态地绑定一个或多个 attribute，如果需要为元素的属性动态绑定属性值，则需要用到 v-bind 属性绑定指令
- 可以为元素的任意属性进行动态绑定
- 只要属性的值是动态变化的，就应该使用v-bind
v-bind可以简写为:
语法：<标签 v-bind:属性='值'></标签>，如<img v-bind:src="imgsrc"/> | <img :src="imgsrc"/>
<template>
<div>
<img v-bind:src="imgsrc" alt="">
// 简写
<a :href="'http://127.0.0.1:3002/userDetail?id='+id">给我简单的跳</a</template>
<script>
export default {
data () {
return {
imgsrc: 'https://...881_11.jpeg',
id: 10,
isadd: false,
}
}
}
</script>
v-show
作用：通过为元素设置display样式实现元素的显示和隐藏
- 如果设置的bool值为true,就移除元素的display:none样式
- 如果设置的bool值为false,就为元素设置样式display:none
语法：<标签 v-show='bool值'></标签>，如<p v-show="ishsow">我到底能不能显示呢</p>
<div>
<h2>它的作用是用于控制元素的显示的隐藏，它是通过为元素设置display样式来实现的</h2>
<h2>语法： v-show='bool值' 直接赋值bool值，关系运算符 逻辑运算符 </h2>
<button @click="isshow = !isshow">切换</button>
<p v-show='isshow'>我到底能不能显示呢</p>
</div>
</template>
<script>
export default {
data () {
return {
isshow: true
}
}
}
</script>
v-if
作用：根据所指定的表达式的值有条件地渲染元素
- 如果设置的bool值为true,就创建元素并渲染
- 如果设置的bool值为false,就移除元素
<标签 v-if='bool值'></标签>，如<p v-if="ishsow">我到底能不能创建并显示呢</p>
<template>
<div>
<p>作用：也可以实现元素的显示和隐藏，它是通过创建和移除来实现的</p>
<p>语法： v-if='bool值'</p>
<button @click="isshow = !isshow">切换</button>
<p v-if='isshow'>我到底能不能创建并显示呢</p>
</div>
</template>
<script>
export default {
data () {
return {
isshow: true
}
}
}
</script>
网友评论