Vue
1.指令
1.v-mode
v-model 多用于表单元素实现双向数据绑定(同angular中的ng-model)
<input type="text" v-model="nnn">
<button @click="rever">反转</button>
rever:function(){
this.content = this.content.split("").reverse().join("")
},
2. v-for
v-for 格式: v-for="字段名 in(of) 数组json" 循环数组或json(同angular中的ng-repeat),需要注意从vue2开始取消了$index
v-for = “(item,index) in 数组名”
Item 代表数组中的每一项 index 代表索引 Key 代表对应的键名(1、key来给每个节点做一个唯一标识2、key的作用主要是为了高效的更新虚拟DOM)
案例——选项卡
1.HTML结构
<div id="app">
<div class="tab">
<!-- tab栏 -->
<ul>
<li class="active">apple</li>
<li class="">orange</li>
<li class="">lemon</li>
</ul>
<!-- 对应显示的图片 -->
<div class="current"><img src="img/apple.png"></div>
<div class=""><img src="img/orange.png"></div>
<div class=""><img src="img/lemon.png"></div>
</div>
</div>
2.数据准备
list: [{
id: 1,
title: 'apple',
path: 'img/apple.png'
}, {
id: 2,
title: 'orange',
path: 'img/orange.png'
}, {
id: 3,
title: 'lemon',
path: 'img/lemon.png'
}]
3.v-for数据渲染
div id="app">
<div class="tab">
<ul>
<!--
1、绑定key的作用 提高Vue的性能
2、 key 需要是唯一的标识 所以需要使用id, 也可以使用index ,
index 也是唯一的
3、 item 是 数组中对应的每一项
4、 index 是 每一项的 索引
-->
<li :key='item.id' v-for='(item,index) in list'>{{item.title}}</li>
</ul>
<div :key='item.id' v-for='(item, index) in list'>
<!-- : 是 v-bind 的简写 绑定属性使用 v-bind -->
<img :src="item.path">
</div>
</div>
</div>
<script>
new Vue({
// 指定 操作元素 是 id 为app 的
el: '#app',
data: {
list: [{
id: 1,
title: 'apple',
path: 'img/apple.png'
}, {
id: 2,
title: 'orange',
path: 'img/orange.png'
}, {
id: 3,
title: 'lemon',
path: 'img/lemon.png'
}]
}
})
</script>
3.v-show / v-hide
v-show 显示内容 (同angular中的ng-show)
v-hide 隐藏内容(同angular中的ng-hide)
<p v-show>12345456677</p>
<p v-hide>1234545</p>
4.v-if
v-if 显示与隐藏 (dom元素的删除添加 同angular中的ng-if 默认值为false)
v-else-if 必须和v-if连用
v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误
<p v-if='flag==0'>asdaavdsf</p>
<p v-else-if='flag==1'> 56861</p>
<p v-else>vjjhh</p>
data:{ flag:0, }
5.v-bind
v-bind 动态绑定 作用: 及时对页面的数据进行更改
***注意**:v-bind:class指令可以与普通的class特性共存
v-bind 中支持绑定一个对象 ,如果绑定的是一个对象则键为对应的类名,值为对应data中的数据*
绑定class
v-bind支持绑定一个数组,数组中的ClassA和ClassB对应为data中的数据。
绑定对象和绑定数组的区别{
绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据
- 绑定数组的时候数组里面存的是data 中的数据 }
绑定style
有些时候我们需要绑定内置样式,这个时候我们可以使用v-bind:style绑定属性。
<ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}">
<li>学习Vue</li>
<li>学习Node</li>
<li>学习React</li>
</ul>
<script>
var vm= new Vue({
el:'.box',
data:{
isColor:true,
isSize:true,
}
})
</script>
<style>
.box{
border:1px dashed #f0f;
}
.textColor{
color:#f00;
background-color:#eef;
}
.textSize{
font-size:30px;
font-weight:bold;
}
</style>
<ul class="box" :class="[classA, classB]">
<li>学习Vue</li>
<li>学习Node</li>
<li>学习React</li>
</ul>
<script>
var vm= new Vue({
el:'.box',
data:{
classA:‘textColor‘,
classB:‘textSize‘
}
})
</script>
<div v-bind:style="styleObject">绑定样式对象</div>'
<!-- CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用单引号括起来) -->
<div v-bind:style="{ color: activeColor, fontSize: fontSize,background:'red' }">内联样式</div>
<!--组语法可以将多个样式对象应用到同一个元素 -->
<div v-bind:style="[styleObj1, styleObj2]"></div>
<script>
new Vue({
el: '#app',
data: {
styleObject: {
color: 'green',
fontSize: '30px',
background:'red'
},
activeColor: 'green',
fontSize: "30px"
},
styleObj1: {
color: 'red'
},
styleObj2: {
fontSize: '30px'
}
</script>
v-on
v-on:click 给标签绑定函数,可以缩写为@,例如绑定一个点击函数 函数必须写在methods里面
案例——简单计算器
<div id="add">
<h1>简单计算器</h1>
<p>数值A:<input type="text" v-model="num1"></p>
<select v-model="flag">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<p>数值B:<input type="text" v-model="num2"></p>
<button @click="sum">计算</button>
<p>计算结果:<span v-text='num'>{{num}}</span></p>
</div>
```## 标题
```javascript
<script>
var vm = new Vue({
el:'#add',
data:{
num1:'',
num2:'',
num:'',
flag:''
},
methods:{
sum(){
this.num = eval(this.num1+this.flag+this.num2);
}
}
})
</script>
v-text / v-html
v-text 解析文本
v-html 解析html标签
v-bind:class 三种绑定方法 1、对象型 '{red:isred}' 2、三元型 'isred?"red":"blue"' 3、数组型 '[{red:"isred"},{blue:"isblue"}]'
v-once 进入页面时 只渲染一次 不在进行渲染
v-cloak 防止闪烁
v-pre 把标签内部的元素原位输出