如何将data中的文本数据,插入到HTML中呢?
但是,在某些情况下,我们可能不希望界面随意的跟随改变
这个时候,我们就可以使用一个Vue的指令
v-once:
某些情况下,我们从服务器请求到的数据本身就是一个HTML代码,如果我们直接通过{{}}来输出,会将HTML代码也一起输出。
但是我们可能希望的是按照HTML格式进行解析,并且显示对应的内容。
如果我们希望解析出HTML展示
v-pre用于跳过这个元素和它子元素的编译过程,用于显示原本的Mustache语法。
比如下面的代码:
不需要表达式
用法:
示例:
[v-cloak] {
display: none;
}
{{ message }}
前面介绍的几个命令都是将我们的数据插入到模板当中,有时候我们需要的是动态的决定渲染的数据,这个应该怎么办呢??
比如:
这个时候,我们可以使用v-bind指令:
作用:动态绑定属性
缩写::
预期:any (with argument) | Object(without argument)
参数:attrOrProp (optional)
下面就来具体的分析一下v-bind的使用
那么在平时的开发中,有哪些属性需要动态绑定呢??
<!-- 绑定一个 attribute -->
<img v-bind:src="imageSrc">
<!-- 动态 attribute 名 (2.6.0+) -->
<button v-bind:[key]="value"></button>
<!-- 缩写 -->
<img :src="imageSrc">
<!-- 动态 attribute 名缩写 (2.6.0+) -->
<button :[key]="value"></button>
<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 绑定一个全是 attribute 的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- 通过 prop 修饰符绑定 DOM attribute -->
<div v-bind:text-content.prop="text"></div>
<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>
<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>
比如通过Vue实例中的data绑定元素的src和href,代码如下:
v-bind有一个对应的语法糖,也就是简写方式
在开发中,我们通常会使用语法糖的形式,因为这样更加简洁。
简写方式如下:
很多时候,我们希望动态的来切换class,比如:
绑定class有两种方式:
使用对象语法的基本示例:
用法一:直接通过{}绑定一个类
<h2 :class="{'active': isActive}">Hello World</h2>
用法二:也可以通过判断,传入多个值
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>
用法三:和普通的类同时存在,并不冲突
注:如果isActive和isLine都为true,那么会有title/active/line三个类
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>
用法四:如果过于复杂,可以放在一个methods或者computed中
注:classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>
使用数组语法示例
绑定方式:数组语法
用法一:直接通过{}绑定一个类
<h2 :class="['active']">Hello World</h2>
用法二:也可以传入多个值
<h2 :class=“[‘active’, 'line']">Hello World</h2>
用法三:和普通的类同时存在,并不冲突
注:会有title/active/line三个类
<h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>
用法四:如果过于复杂,可以放在一个methods或者computed中
注:classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>
在开发中个人更推荐使用对象语法.
有如上图所示的一个列表,我们需要实现的是默认情况下第一个的颜色为橘色,点击哪个哪个的颜色就变成橘色
<style>
.actived{
color : orangered
}
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div id="app">
<ul v-for = '(item,index) in movies'>
<li :class = '{actived :currentIndex === index}' @click = 'changeColor(index)'>{{item}}</li>
</ul>
</div>
<script>
const app = new Vue({
el : '#app',
data : {
movies : ['海蒂和爷爷','小鞋子','亲爱的','被光抓走的人'],
currentIndex : 0,
},
methods: {
changeColor(index) {
this.currentIndex = index;
}
}
})
</script>
这里有一个很简单第一次接触却不容易想到的思路,在我们的data中定义一个变量currentIndex
默认为0 ,默认情况下index
也为0 ,所以就可以设置默认情况下第一个就会显示橘色,然后设置了点击事件,点击的时候把当前项目的下标传过去,然后给我们自己的currentIndex
重新赋值,这样就可以实现我们想要的效果了.
我们可以利用v-bind:style来绑定一些CSS内联样式。
绑定class有两种方式:
绑定方式一对象语法示例
:style="{color: currentColor, fontSize: fontSize + 'px'}"
//style后面跟的是一个对象类型
//对象的key是CSS属性名称
//对象的value是具体赋的值,值可以来自于data中的属性
绑定方式二数组语法示例
<div v-bind:style="[baseStyles, overridingStyles]"></div>
//style后面跟的是一个数组类型
//多个值以,分割即可
在前端开发中,我们需要经常和用于交互。
v-on介绍
作用:绑定事件监听器
缩写:@
预期:Function | Inline Statement | Object
参数:event
这里,我们用一个监听按钮的点击事件,来简单看看v-on的使用
<div id="app">
<h2>{{counter}}</h2>
<button v-on:click = 'increament'>点击+1</button>
<button v-on:click = 'discreament'>点击-1</button>
</div>
<script>
const app = new Vue({
el : '#app',
data : {
counter : 1,
},
methods: {
increament() {
this.counter += 1;
},
discreament() {
this.counter -= 1;
}
}
})
</script>
在某些情况下,我们拿到event的目的可能是进行一些事件处理。
Vue提供了修饰符来帮助我们方便的处理一些事件:
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为,没有表达式 -->
<form @submit.prevent></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符,键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符,键代码 -->
<input @keyup.13="onEnter">
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>
<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
我们来做一个简单的小案例:
<div id="app">
<span v-if="isUser">
<label for="username">用户账号</label>
<input type="text" id="username" placeholder="用户账号">
</span>
<span v-else>
<label for="email">用户邮箱</label>
<input type="text" id="email" placeholder="用户邮箱">
</span>
<button @click="isUser = !isUser">切换类型</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
isUser: true
},
})
</script>
小问题:
问题解答:
解决方案:
v-show的用法和v-if非常相似,也用于决定一个元素是否渲染:
v-if和v-show对比
- v-if和v-show都可以决定一个元素是否渲染,那么开发中我们如何选择呢?
- v-if当条件为false时,压根不会有对应的元素在DOM中。
- v-show当条件为false时,仅仅是将元素的display属性设置为none而已。
开发中如何选择呢?
- 当需要在显示与隐藏之间切片很频繁时,使用v-show
- 当只有一次切换时,通过使用v-if
<div id="app">
<button @click = 'change'>点击切换隐藏显示</button>
<h2 v-show = 'isShow'>我可以显示也可以隐藏哦</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
isShow: true
},
methods: {
change() {
this.isShow = !this.isShow;
}
}
})
</script>
当我们有一组数据需要进行渲染时,我们就可以使用v-for来完成。
v-for的语法类似于JavaScript中的for循环。
格式如下:item in items的形式。
我们来看一个简单的案例:
如果在遍历的过程中不需要使用索引值
v-for="movie in movies"
依次从movies中取出movie,并且在元素的内容中,我们可以使用Mustache语法,来使用movie
如果在遍历的过程中,我们需要拿到元素在数组中的索引值呢?
语法格式:
v-for=(item, index) in items
其中的index就代表了取出的item在原数组的索引值。
<div id="app">
<ul v-for = 'item in movies'>
<li>{{item}}</li>
</ul>
-------------------
<ul v-for = '(item,index) in movies'>
<li>{{index+1}}.{{item}}</li>
</ul>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
movies : ['只有芸知道','大话西游','幸福来敲门','疯犬少年的天空']
},
methods: {
change() {
this.isShow = !this.isShow;
}
}
})
</script>
v-for可以用户遍历对象:
<div id="app">
<ul >
<li v-for = '(value,key,index) in info'>
{{index}} {{key}}-{{value}}
</li>
</ul>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
info : {
name : 'why',
age : 18,
sex : '女'
}
},
})
</script>
官方推荐我们在使用v-for时,给对应的元素或组件添加上一个:key属性。
为什么需要这个key属性呢(了解)?
当某一层有很多相同的节点时,也就是列表节点时,我们希望插入一个新的节点
所以我们需要使用key来给每个节点做一个唯一标识
所以一句话,key的作用主要是为了高效的更新虚拟DOM。
表单控件在实际开发中是非常常见的。特别是对于用户信息的提交,需要大量的表单。
Vue中使用v-model指令来实现表单元素和数据的双向绑定.
看下面的示例代码:
<div id="app">
<input type="text" v-model = 'message'>
<h2>{{message}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message :' '
},
})
</script>
案例的解析:
所以,通过v-model实现了双向的绑定。
v-model其实是一个语法糖,它的背后本质上是包含两个操作:
- v-bind绑定一个value属性
- v-on指令给当前元素绑定input事件
也就是说下面的代码等同于下面的代码:
<input type="text" v-model="message">
等同于
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">
存在多个单选框
<div id="app">
<label for="male">
<input type="radio" id="male" value="男" v-model="sex">男
</label>
<label for="female">
<input type="radio" id="female" value="女" v-model="sex">女
</label>
<h2>您选择的性别是: {{sex}}</h2>
</div>
<script>
//默认情况下显示女性
const app = new Vue({
el: '#app',
data: {
sex: '女'
},
})
</script>
选框分为两种情况:单个勾选框和多个勾选框
单选框案例:
我们经常会见到一种的情况,那就是在注册软件时需要勾选同意用户协议,只有同意了,才能点击下一步,否则不可以进行下一步,下面就展示一个简单的类似功能的案例
<div id='app'>
<!--1.checkbox单选框-->
<label for="agree">
<input type="checkbox" id="agree" v-model="isAgree">同意协议
</label>
<h2>您选择的是: {{isAgree}}</h2>
<button :disabled="!isAgree">下一步</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
isAgree: false, // 单选框
}
})
</script>
<div id='app'>
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<input type="checkbox" value="足球" v-model="hobbies">足球
<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
<h2>您的爱好是: {{hobbies}}</h2>
<label v-for="item in originHobbies" :for="item">
<input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
</label>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
isAgree: false, // 单选框
hobbies: [], // 多选框,
originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球']
}
})
</script>
和checkbox一样,select也分单选和多选两种情况。
单选:只能选中一个值。
多选:可以选中多个值。
<div id="app">
<!--1.选择一个-->
<select name="abc" v-model="fruit">
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
<option value="葡萄">葡萄</option>
</select>
<h2>您选择的水果是: {{fruit}}</h2>
<!--2.选择多个-->
<select name="abc" v-model="fruits" multiple>
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
<option value="葡萄">葡萄</option>
</select>
<h2>您选择的水果是: {{fruits}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
fruit: '香蕉',
fruits: []
}
})
</script>
默认情况下,v-model默认是在input事件中同步输入框的数据的。
也就是说,一旦有数据发生改变对应的data中的数据就会自动发生改变。
lazy修饰符可以让数据在失去焦点或者回车时才会更新:
默认情况下,在输入框中无论我们输入的是字母还是数字,都会被当做字符串类型进行处理。
但是如果我们希望处理的是数字类型,那么最好直接将内容当做数字处理。
number修饰符可以让在输入框中输入的内容自动转成数字类型
如果输入的内容首尾有很多空格,通常我们希望将其去除
trim修饰符可以过滤内容左右两边的空格
<div id="app">
<!--1.修饰符: lazy-->
<input type="text" v-model.lazy="message">
<h2>{{message}}</h2>
<!--2.修饰符: number-->
<input type="number" v-model.number="age">
<h2>{{age}}-{{typeof age}}</h2>
<!--3.修饰符: trim-->
<input type="text" v-model.trim="name">
<h2>您输入的名字:{{name}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
age: 0,
name: ''
}
})
</script>