Vue的基本语法
插值操作
Mustache
也叫作胡子语法，{{message}},此时{{}}为胡须语法。
- {{message}},单值
- {{message + firstname}}多值操作
- {{message +’ s '+ firstname}}多值操作并且可以在其里面加上自定义字符串
- {{counter * 2}} 在里面进行加减乘除操作
v-once
只会在第一次的时候进行元素赋值，无法在后面进行对元素再次赋值。
v-html
展示代码为html代码
v-text
过滤标签
v-pre
本来，message值是1,那么{{message}}显示就是{{message}}
v-cloak
斗篷,挡住字体。这个挺好用的。
加上这个代码，既可以遮住原来的代码:
[v-clock]{
display:none;
}
动态绑定v-bind
动态绑定标签属性指令。基本使用方法如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue指令练习v-bind</title>
</head>
<body>
<div id="calc" style="width: 100px;height: 100px;border-style: solid;border-width: 2px;border-radius: 5px;border-color: rgba(0,0,0,0.3);justify-content: center;display:flex;margin: 0 auto;position: relative;top: 12vw;;">
<!-- 使用v-bind指令来动态更改属性 -->
<img style="width: 100%;height: 100%;box-shadow: 0 0 10px 1px rgba(0,0,0,0.3);" v-bind:src="image" alt="">
</div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
let app = new Vue({
el: '#calc'
,data: {
image:'https://avatar.csdnimg.cn/3/E/9/3_charlinheng_1583548562.jpg'
}
})
</script>
运行截图:
可以看到，原来的src属性是空的，加载后，通过v-bind指令将初始化得到的数据动态绑定到img控件上。但，要是有20多个控件。每个控件都写v-bind感觉会很麻烦。因此为了方便简洁，vue官方定义了简洁语法。此语法等价于v-bind。
v-bind指令的简写(简称 :语法糖),下面的写法跟我们上面的代码等价:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue指令练习v-bind</title>
</head>
<body>
<div id="calc" style="width: 100px;height: 100px;border-style: solid;border-width: 2px;border-radius: 5px;border-color: rgba(0,0,0,0.3);justify-content: center;display:flex;margin: 0 auto;position: relative;top: 12vw;;">
<!-- 使用v-bind指令来动态更改属性(采用语法糖 （:） 形式) -->
<img style="width: 100%;height: 100%;box-shadow: 0 0 10px 1px rgba(0,0,0,0.3);" :src="image" alt="">
</div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
let app = new Vue({
el: '#calc'
,data: {
image:'https://avatar.csdnimg.cn/3/E/9/3_charlinheng_1583548562.jpg'
}
})
</script>
运行截图
发现是一样的能够将image地址绑定到img中。
v-bind绑定标签的Class
通过以下代码，来学习v-bind对象的Class的增减。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue指令练习v-bind</title>
<style>
.active{
color:blue;
}
</style>
</head>
<body>
<div id="calc" style="width: 1000px;height: 300px;border-style: solid;border-width: 2px;border-radius: 5px;border-color: rgba(0,0,0,0.3);justify-content: center;display:flex;margin: 0 auto;position: relative;top: 12vw;;">
<!-- 使用v-bind指令来动态更改属性(采用语法糖 形式) -->
<!-- <img style="width: 100%;height: 100%;box-shadow: 0 0 10px 1px rgba(0,0,0,0.3);" :src="image" alt=""> -->
<!-- 示例v-bind 绑定class -->
<a v-bind:class="{active: use}" v-on:click="beblue">测试ssssssssssssssssss</a>
</div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
let app = new Vue({
el: '#calc'
,data: {
use: false
}
,methods: {
beblue: function(){
this.use = !this.use;
//然后这个变亮
}
}
})
</script>
其中，v-bind:class则是动态绑定class，在双引号里面，{} 语法表示集合，里面装的是各种元素，通过使用
active: true 或者 active: false 这样的形式来动态声明这个名为active的css类要不要使用。通过定义点击事件，点击后，将这个use的值进行反转。运行如下:
使用数组语法(用的比较少):
组件化思想
将单独的组件封装好，优点是可以复用。在组件化实现中，需要用到动态绑定style属性(采用对象方法)。如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue指令练习v-bind</title>
</head>
<body>
<div id="calc" style="width: 1000px;height: 300px;border-style: solid;border-width: 2px;border-radius: 5px;border-color: rgba(0,0,0,0.3);justify-content: center;display:flex;margin: 0 auto;position: relative;top: 12vw;;">
<!-- 示例v-bind 绑定style -->
<a :style="{fontSize:'50px'}">动态Style</a>
</div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
let app = new Vue({
el: '#calc'
,data: {
}
})
</script>
运行结果如下:
设计一个按钮和输入框，输入字体大小，点击确定动态改变a标签的font，如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue指令练习v-bind</title>
<style>
.active{
color:blue;
}
</style>
</head>
<body>
<div id="calc" style="width: 1000px;height: 300px;border-style: solid;border-width: 2px;border-radius: 5px;border-color: rgba(0,0,0,0.3);justify-content: center;display:flex;margin: 0 auto;position: relative;top: 12vw;;">
<!-- 示例v-bind 绑定style -->
<a v-bind:style="{fontSize:fontsize}">动态Style</a>
<input id="size" type="text" style="height:30px;" placeholder="输入字体大小" type="number">
<button v-on:click="change" style="height:30px;">更改</button>
</div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
let app = new Vue({
el: '#calc'
,data: {
fontsize: '20px'
}
,methods: {
change: function(){
this.fontsize = document.getElementById("size").value+'px';
}
}
})
</script>
运行效果如下:
计算属性的基本使用
让我们需要将两个后台传过来的数据，拼接在一起的时候，vue有很多方法，比如后台传过来了订单商品的原价，还有数量，那么我们前端就要算出 原价 * 数量 也就是价格，此时就要用到复合操作。下面列举几个常用的加减乘除等操作方法:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue指令练习v-bind</title>
</head>
<body>
<div id="calc" style="width: 1000px;height: 300px;border-style: solid;border-width: 2px;border-radius: 5px;border-color: rgba(0,0,0,0.3);justify-content: center;display:flex;margin: 0 auto;position: relative;top: 12vw;;">
<!-- 示例 计算属性 -->
<a>绑定的名字:{{add()}}</a>
</div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
let app = new Vue({
el: '#calc'
,data: {
firstName: 'Chung'
,lastName: 'HoCheng'
}
,methods: {
add: function(){
return this.lastName +' '+ this.firstName;
}
}
})
</script>
运行如下:
又或者如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue指令练习v-bind</title>
</head>
<body>
<div id="calc" style="width: 1000px;height: 300px;border-style: solid;border-width: 2px;border-radius: 5px;border-color: rgba(0,0,0,0.3);justify-content: center;display:flex;margin: 0 auto;position: relative;top: 12vw;;">
<!-- 示例 计算属性 -->
<a>绑定的名字:{{lastName + ' ' + firstName}}</a>
</div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
let app = new Vue({
el: '#calc'
,data: {
firstName: 'Chung'
,lastName: 'HoCheng'
}
,methods: {
add: function(){
return this.lastName +' '+ this.firstName;
}
}
})
</script>
运行结果同上，接下来介绍一种后面经常常用的方法来计算compute(计算属性):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue指令练习v-bind</title>
</head>
<body>
<div id="calc" style="width: 1000px;height: 300px;border-style: solid;border-width: 2px;border-radius: 5px;border-color: rgba(0,0,0,0.3);justify-content: center;display:flex;margin: 0 auto;position: relative;top: 12vw;;">
<!-- 示例 计算属性 -->
<a>绑定的名字:{{fullName}}</a>
</div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
let app = new Vue({
el: '#calc'
,data: {
firstName: 'Chung'
,lastName: 'HoCheng'
}
,computed: {
fullName:function(){
return this.lastName + ' ' + this.firstName
}
}
})
</script>
运行结果如下
这里是拿return 的值作为fullName的值。然后再绑定其值在标签上。
现在再来一个比较实际的案例：
现在后台传条数据，这些数据是订单商品详情，我们需要计算
总价格，并且要计算其每件商品的总价格。代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue指令练习v-bind</title>
</head>
<body>
<div id="calc" style="width: 1000px;height: 300px;border-style: solid;border-width: 2px;border-radius: 5px;border-color: rgba(0,0,0,0.3);position: relative;top: 12vw;;">
<!-- 示例 计算属性 -->
<a style="position: relative;">订单总价格:{{totalPrice.totalPrice}}</a>
<ul>
<li>编号: 名称: 价格：数量： 价格 ：</li>
<li v-for="(n,index) in goods">{{n.id +' ' + n.name + ' '+ n.price + ' ' + n.num + ' '+totalPrice.data[index]}}</li>
</ul>
</div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
let app = new Vue({
el: '#calc'
,data: {
goods: [
{id: '100', name: 'Linux',price: 38.3 , num: 3}
,{id: '110', name: 'Unix',price: 68 , num: 10}
,{id: '120', name: 'Windows',price: 10.9 , num: 2}
,{id: '130', name: 'OS',price: 44 , num: 22}
]
}
,computed: {
totalPrice:function(){
let josnData = {};
//订单总价
josnData.totalPrice = 0;
//订单每件商品总价
let eachTotalPrice = [0,0,0,0];
for(let index = 0;index < this.goods.length;index ++){
eachTotalPrice[index] = this.goods[index].price * this.goods[index].num ;
josnData.totalPrice += eachTotalPrice[index];
}
josnData.data = eachTotalPrice;
return josnData;
}
}
})
</script>
运行结果如下:
2237
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
