vue基础
一、vue基础指令
1、数据渲染
1:插值表达式
插值表达式:数据绑定【插值表达式中一般指定变量,也可以指定表达式……】
示例代码如下:
<span>Message: {{ msg }}</span>
<span>Message: {{ 1+1 }}</span>
注意一:
插值闪烁:当数据不是预定义的时候,而是通过网络进行获取,那么当网络延迟加载的时候,页面中会显示插值表达式的语法,等网络加载完毕后,数据进行渲染,这种现象称之为——
插值闪烁
测试代码如下:
<div id="app">
{{username}}
</div>
<script>
/* 利用定时器模拟一些网络延迟加载导致的插值闪烁现 */
setInterval(()=>{
new Vue({
el:"#app",
data:{
username:"橙子的代码世界"
}
});
},5000);
</script>
注意二:
插值表达式不能作用在HTML的attribute(属性)上,应该使用
v-bind
指令
2:v-text和v-html
2.1、v-text
v-text : 更新元素的文本内容 ,解决插值闪烁的问题
示例代码如下:
<span v-text='msg'></span>
<span>{{msg}}</span>
2.2、v-html
v-html:可以解析渲染标签,解决插值闪烁的问题
示例代码如下:
<div v-html='html'></div>
<script>
new Vue({
el:'#app',
data:{
html:'<h1>v-html指令</h1>'
}
})
</script>
2、条件渲染
1:v-if
v-if
指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 在切换时元素及它的数据绑定 / 组件被销毁并重建。 (DOM元素的删除和添加)
v-if
相当于JavaScript中的if(){}
语句;
v-else-if
相当于JavaScript中的else if(){}
语句; 前一兄弟元素必须有v-if
或v-else-if
。
v-else
相当于JavaScript中的else{}
语句 ;不需要表达式, 前一兄弟元素必须有v-if
或v-else-if
。
示例代码如下:
<div id='app'>
<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>
<script>
new Vue({
el:'#app',
data:{
type:'A'
}
})
</script>
2:v-show
v-show
指令用于根据条件展示元素,与v-if不同的是,带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show只是根据表达式之真假值,简单地切换元素的 CSS 的display 属性。
示例代码【简单导航切换】如下:
<div id='app'>
<ul>
<li v-for='(item,index) in navs' @mouseenter='isActive=index' @mouseleave="isActive=-1"><span v-text='item.name'></span>
<ol>
<li v-show='isActive==index' v-text='j_navs'></li>
</ol>
</li>
</ul>
</div>
<script>
new Vue({
el:'#app',
data:{
isActive:-1,
navs:[{id:1,name:'美妆',j_navs:['口红','面膜']},{id:2,name:'衣服',j_navs:['男装','女装']},{id:3,name:'家电',j_navs:['电视','电饭煲']}]
}
})
</script>
3:v-if 和v-show的区别(面试要点)
1、
v-if
- 如果条件成立,那么创建该标签,如果条件不成立,那么销毁该标签【创建销毁】
- 创建和销毁,是直接操作DOM进行的
- 运行时,不经常切换或者条件不经常更改,则使用v-if
2、
v-show
- 如果条件成立,那么显示该标签,如果条件不成立,那么隐藏该标签【显示隐藏】
- 显示和隐藏,是通过css属性设置
- 运行时,频繁切换,则使用v-show
3、注意:
v-if
只有当条件成立,才会创建标签,v-show
不管条件成立不成立,第一次都会创建该标签
3、列表渲染
1:v-for
v-for
指令基于源数据多次渲染元素或模板块 。v-for 指令的值需要使用 alias in expression
形式的特殊语法,为当前遍历元素提供别名
1、v-for遍历数组
1:v-for=‘item in array’ item 保存的是数组中的数据,array是数据的名称
2:v-for=‘(item,index) in array’ item 保存的是数组中的数据,index是数组的索引,array是数据的名称
示例代码如下:
<div id='app'>
<ul>
<li v-for="(item,index) in array">数据:{{item.name}}>>>下标:{{index}}</li>
</ul>
</div>
<script>
new Vue({
el:"#app",
data:{
array:[{id:1001,name:'衣服',price:'1200'},{id:1002,name:'鞋子',price:'1100'},{id:1003,name:'美妆',price:'800'}]
}
});
</script>
2、v-for遍历对象
1:v-for=‘o1 in obj’ o1保存的是对象的属性值,obj是对象的名字
2:v-for=‘(o1,o2) in obj’ o1保存的是对象的属性值,o2保存的是属性名,obj是对象的名字
3:v-for=‘(o1,o2,o3) in obj’ o1保存的是对象的属性值,o2保存的是属性名,o3保存的是下标,obj是对象的名字
示例代码如下:
<div id="app">
<ul>
<li v-for="(o1,o2,o3) in obj">o1++++o2+++o3</li>
</ul>
</div>
<script>
new Vue({
el:"#app",
data:{
obj:{
code:200,
msg:'查询成功',
data:[{id:1001,name:'张三',password:'c12345'}]
}
}
});
</script>
2:v-for要点:避免v-if和v-for一起使用(面试会出)
注意:
永远不要把 v-if 和 v-for 同时用在同一个元素上。因为当 Vue 处理指令时,v-for 比 v-if 具有更高的优先级,哪怕我们只渲染出一小部分的元素,也得在每次重渲染的时候遍历整个列表,效率低
解决方法一:
为了过滤一个列表中的项目 (比如 v-for=“user in users” v-if=“user.isActive”)。在这种情形下,请将 列表的 替换为一个计算属性 (比如 activeUsers),让其返回过滤后的列表。
解决方法二: 为了避免渲染本应该被隐藏的列表 (比如 v-for=“user in users”
v-if=“shouldShowUsers”)。这种情形下,请将 v-if 移动至容器元素上 (比如 ul、ol)。
4、属性渲染
1:v-bind
v-bind指令负责渲染数据到属性中【更改属性值】
示例代码如下:
<input type="text" v-bind:value="message">
<!-- 简写方式-->
<input type="text" :value="message">
通过v-bind更改属性值为对象
示例代码如下:
<div id="app">
<h1 :class="{red:className,green:!className}">解封了</h1>
<button @click="className = false">更改为绿色</button>
<button @click="className = true">更改为红色</button>
</div>
<script>
new Vue({
el:"#app",
data:{
className:true
}
});
</script>
5、数据双向绑定
1:v-modal
v-modal指令在表单控件或者组件上创建双向绑定【 指的是:数据渲染到页面【单向】 + 页面更改数据更新【单向】】 : data中的属性和页面中能输入和修改的标签进行绑定 , 通过v-model,这样输入框中的数据【页面发生改变】发生变化,data属性值发生改变
v-model可以绑定的页面标签:input、textarea、select和自定义组件【components】(后期会讲)
示例代码如下:
1、文本输入框
<!--单行文本-->
<input v-model="message" placeholder="输入内容">
<p>Message is: {{ message }}</p>
<br>
<!--文本域-->
<span>描述说明:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="简单描述……"></textarea>
2、单选按钮【可以绑定布尔值】
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
3、选择框【可以绑定布尔值或者绑定数组】
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
4、复选框 【可以绑定布尔值或者绑定数组】
<!--绑定布尔值-->
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<br>
<!--绑定数组-->
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
5、小练习【记事本案例】:
HTML代码:
<div id="app">
<div class="input">
<input type="text" v-model="message" @focus="empty">
<button type="button" class="add" @click="addData">添加</button>
</div>
<ul class="show">
<li v-for="(item,index) in msg">
<span class="serial_num" v-text="index+1"></span>
<p class="content" v-text="item.content"></p>
<div class="operation">
<button class="remove" v-bind:data-id="item.id" @click="remove(index)">删除</button>
</div>
</li>
</ul>
</div>
JS文件:
new Vue({
el:'#app',
data:{
msg:[],
message:''
},
methods:{
//添加
addData(){
let id=this.msg.length
let sentence=this.message
let data1={
id:id,
content:sentence
}
this.msg.push(data1)
},
// 清空
empty(){
this.message=''
},
//删除
remove(id){
this.msg.splice(id,1)
}
}
})
图片:
二、数据和资源
7、计算属性 computed
插值表达式中可以调用有返回值的函数,但是当你的函数中的内容比较复杂时,我们会进行封装函数,函数种类【业务逻辑、运算、事件绑定】
注意:
1、计算属性本质是一个函数,只是用法和使用属性一样
2、 computed计算属性中的函数一般都是运算,较简单的函数 ,而 methods中的函数一般都是:业务逻辑、事件绑定…
代码示例如下:【计算商品总价】
HTML代码:
<div id="app">
<div class="input">
<input type="text" placeholder="商品名称" v-model="prodcutName" @focus="empty">
<input type="number" placeholder="价格" v-model="productPrice">
<input type="number" placeholder="数量" v-model="productNum">
<button type="button" class="add" @click="addData">添加</button>
</div>
<div class="show">
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>商品名称</th>
<th>价格</th>
<th>数量</th>
<th>总价</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in products">
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td><span>{{item.price}}</span>元</td>
<td><span>{{item.num}}</span>个</td>
<td><span>{{item.num*item.price}}</span>元</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总价</td>
<!--computed简写-->
<td colspan="4"><span>{{this.products.reduce((s, o) =>s + o.price * o.num, 0)}}</span>元
</td>
</tr>
</tfoot>
</table>
</div>
</div>
reduce()函数 接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
this.products.reduce((s, o) =>s + o.price * o.num, 0)
复杂写法:
computed:{
handleAllCount(){
/* reduce 接收一个函数作为参数,其中函数中的参数:s,必需。初始值, 或者计算结束后的返回值;参数:c,必需。当前元素。在本函数中保存的是数组products中的对象数据;并且reduce的第二个参数是传递给函数的初始值,相当于s的初始值。*/
return this.products.reduce((s,o)=>{
return s + o.price * o.num, 0
},0)
}
}
js代码
new Vue({
el: '#app',
data: {
prodcutName: '',
productPrice: 1,
productNum: 1,
products: [],
},
methods: {
addData() {
let pro = {
id: this.products.length,
name: this.prodcutName,
price: this.productPrice,
num: this.productNum,
}
this.products.push(pro)
},
empty() {
this.prodcutName = ''
},
}
})
图片:
8、过滤器 filters
过滤器和计算属性类似,计算属性用于运算,过滤器用于转换
示例代码如下:
<div id="app">
<h1>{{message | handleToLowerCase('数据') | handleOther}}</h1>
</div>
<script>
new Vue({
el:"#app",
data:{
message:"HELLO"
},
filters:{
handleToLowerCase(value,data){
<!--value值是要转换的数据;data是传的参数值-->
console.log(value,data)
return value.toLowerCase();
},
handleOther(value){
<!--value值是前面handleToLowerCase()函数转换过的值-->
return value.replace(value[0], value[0].toUpperCase())
}
}
});
</script>
1:toLowerCase()字母转换成小写
2:toUpperCase()字母转换成大写
3:value.replace(value[0], value[0].toUpperCase()) 首字母大写(value是要转换的字符串)
4:value. replace(str[0],str[0].toLowerCase()); 首字母小写
图片:
总结
本文篇幅过长,主要总结了vue的基础指令和vue实例中的计算属性,过滤器等的知识点。重要点还是在于理解,并且灵活运用。下期会总结vue基础进阶版本。本文如果有不足的地方,请多多指教