【Vue】模块基本语法「上篇」
Vue基础语法知识
在这篇文章中，我们将介绍Vue.js的基础语法知识。Vue.js是一种用于构建用户界面的现代JavaScript框架，它采用了MVVM（Model-View-ViewModel）的设计模式。本文将详细讨论以下主题：
一、插值
1.1 文本
在Vue中，我们可以使用双大括号{{}}来进行文本插值。例如，{{ message }}可以将message变量的值显示在页面上。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<style type="text/css">
.f30{
font-size: 30px;
}
</style>
</head>
<body>
<div id="app">
<p>文本</p>
{{msg}}
</div>
<script type="text/javascript">
new Vue ({
el:'#app',
data(){
return {
msg:'hello',
};
}
});
</script>
</body>
</html>
1.2 v-html
如果需要在页面中渲染HTML代码，可以使用v-html指令。通过将数据属性中的HTML代码绑定到元素上，Vue会将其解析并渲染出来。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<style type="text/css">
.f30{
font-size: 30px;
}
</style>
</head>
<body>
<div id="app">
<p>文本</p>
{{msg}}
<b :class="msg2" v-html="msg1"></b>
</div>
<script type="text/javascript">
new Vue ({
el:'#app',
data(){
return {
msg:'hello',
msg1:'<span style="color:yellow"> hello 小b</span>'
};
}
});
</script>
</body>
</html>
1.3数据双向绑定(v-model)
- 绑定多个复选框
如果需要绑定多个复选框的选中状态，可以将一个数组作为v-model的值，并使用value属性指定每个复选框的值。
绑定下拉框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<P>v-if/v-else-if/v-else/</P>
<input v-model="score"/><br>
<option v-for="h in hobby" :value="h.id">{{h.name}}</option>
</div>
<script type="text/javascript">
new Vue ({
el:'#app',
data(){
return {
score:69,
isShow:false,
arr: [1, 2, 3, 4],
likes: [{name:'lb',id:1},
{name:'lx',id:2},
{name:'ld',id:3}],
hobby:[{name:'洗浴',id:1},
{name:'洗头',id:2},
{name:'大保健',id:3}],
evname:'click',
};
}
,methoed:{
test(){
alert('点我试试')
}
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="h in hobby">
<input type="checkbox"/ name="hobby":value="h.id">{{h.name}}
</div>
</div>
<script type="text/javascript">
new Vue ({
el:'#app',
data(){
return {
score:69,
isShow:false,
arr: [1, 2, 3, 4],
likes: [{name:'lb',id:1},
{name:'lx',id:2},
{name:'ld',id:3}],
hobby:[{name:'洗浴',id:1},
{name:'洗头',id:2},
{name:'大保健',id:3}],
evname:'click',
};
}
,methoed:{
test(){
alert('点我试试')
}
}
});
</script>
</body>
</html>
二、指令
2.1 v-if|v-else|v-else-if
通过v-if、v-else和v-else-if指令，我们可以根据条件来控制元素的显示和隐藏。根据不同的条件，只会渲染符合条件的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<P>v-if/v-else-if/v-else/</P>
<input v-model="score"/><br>
<b v-if="score <60">不及格</b>
<b v-else-if="score >60 && score <70">及格</b>
<b v-else-if="score >=70 && score <80">一般</b>
<b v-else-if="score >=80 && score <90">良好</b>
<b v-else="">优秀</b>
<b v-if="isShow">展示</b>
<b v-show="isShow">展示</b>
</div>
<script type="text/javascript">
new Vue ({
el:'#app',
data(){
return {
score:69,
isShow:false,
arr: [1, 2, 3, 4],
likes: [{name:'lb',id:1},
{name:'lx',id:2},
{name:'ld',id:3}],
hobby:[{name:'洗浴',id:1},
{name:'洗头',id:2},
{name:'大保健',id:3}],
evname:'click',
};
}
,methoed:{
test(){
alert('点我试试')
}
}
});
</script>
</body>
</html>
2.2 v-show
与v-if类似，v-show指令也可以根据条件来控制元素的显示和隐藏。不同之处在于，使用v-show时，元素始终会被渲染到页面中，只是通过CSS的display属性控制其可见性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<P>v-if/v-else-if/v-else/</P>
<b v-if="isShow">展示</b>
<b v-show="isShow">展示</b>
</div>
<script type="text/javascript">
new Vue ({
el:'#app',
data(){
return {
score:69,
isShow:false,
arr: [1, 2, 3, 4],
likes: [{name:'lb',id:1},
{name:'lx',id:2},
{name:'ld',id:3}],
hobby:[{name:'洗浴',id:1},
{name:'洗头',id:2},
{name:'大保健',id:3}],
evname:'click',
};
}
,methoed:{
test(){
alert('点我试试')
}
}
});
</script>
</body>
</html>
2.3 v-for
通过v-for指令，我们可以遍历数组或对象，并为每个元素生成相应的内容。可以使用v-for="(item, index) in items"的语法，来获取遍历的项和索引。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<br>
<option v-for="h in hobby" :value="h.id">{{h.name}}</option>
<div v-for="h in hobby">
<input type="checkbox"/ name="hobby":value="h.id">{{h.name}}
</div>
</div>
<script type="text/javascript">
new Vue ({
el:'#app',
data(){
return {
score:69,
isShow:false,
arr: [1, 2, 3, 4],
likes: [{name:'lb',id:1},
{name:'lx',id:2},
{name:'ld',id:3}],
hobby:[{name:'洗浴',id:1},
{name:'洗头',id:2},
{name:'大保健',id:3}],
evname:'click',
};
}
,methoed:{
test(){
alert('点我试试')
}
}
});
</script>
</body>
</html>
2.4 动态参数
Vue的指令中，可以使用动态参数来传递变量或表达式。通过使用方括号将指令参数括起来，可以动态地绑定不同的值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
</div>
<input v-model="evname"/>
<button v-on:[evname]="test">点我</button>
</div>
<script type="text/javascript">
new Vue ({
el:'#app',
data(){
return {
score:69,
isShow:false,
arr: [1, 2, 3, 4],
likes: [{name:'lb',id:1},
{name:'lx',id:2},
{name:'ld',id:3}],
hobby:[{name:'洗浴',id:1},
{name:'洗头',id:2},
{name:'大保健',id:3}],
evname:'click',
};
}
,methoed:{
test(){
alert('点我试试')
}
}
});
</script>
</body>
</html>
三、过滤器
3.1 局部过滤器
Vue允许我们定义局部过滤器，用于对数据进行格式化和处理。通过在Vue实例中定义filters对象，我们可以创建自定义的过滤器函数，并在模板中使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="date.js"></script>
<script src="jquery.js"></script>
</head>
<body>
<div id="app">
<P>v-if/v-else-if/v-else/</P>
{{msg}}
<br>
{{msg|fa}}
<br>
{{msg|fa|fb}}
<br>
{{msg|fc(3,10)}}
</div>
<script type="text/javascript">
Vue.filter('filterName', function (value) {
return fmtDate(value)
});
new Vue ({
el:'#app',
filters:{
'fa':function(v){
return v.substring(0,6);
},
'fb':function(v){
return v.substring(2,4);
},
'fc':function(v,begin,end){
return v.substring(begin,end);
},
},
data(){
return {
msg:'你的小狗没有了，你真的该死，本地的大部分。。。',
time:new Date(),
};
}
});
</script>
</body>
</html>
3.2 全局过滤器
除了局部过滤器之外，Vue还提供了全局过滤器的功能。通过在Vue实例的filters属性中定义过滤器函数，可以在整个应用程序范围内使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="date.js"></script>
<script src="jquery.js"></script>
</head>
<body>
<div id="app">
<br>
{{time}}
{{time|filterName}}
</div>
<script type="text/javascript">
Vue.filter('filterName', function (value) {
return fmtDate(value)
});
new Vue ({
el:'#app',
filters:{
'fa':function(v){
return v.substring(0,6);
},
'fb':function(v){
return v.substring(2,4);
},
'fc':function(v,begin,end){
return v.substring(begin,end);
},
},
data(){
return {
msg:'你的小狗没有了，你真的该死，本地的大部分。。。',
time:new Date(),
};
}
});
</script>
</body>
</html>
四、计算属性&监听属性
4.1 计算属性
计算属性是一种利用已有的数据生成新数据的方式。通过在Vue实例中定义计算属性，我们可以根据需要对数据进行处理，并在模板中使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
{{score}}
单价：<input v-model="price">
数量：<input v-model="num">
小计{{count}}
</div>
<script type="text/javascript">
new Vue ({
el:'#app',
data(){
return {
price:79,
num:1,
m:1000,
km:1
};
},
computed:{
count:function(){
return this.price*this.num;
}
},
watch:{
km:function(v){
this.m=parseInt(v)*1000;
},
m:function(v){
this.km=parseInt(v)/1000;
} ,
}
});
</script>
</body>
</html>
4.2 监听属性
当我们需要在数据发生变化时执行一些额外的逻辑时，可以使用监听属性。通过在Vue实例中定义watch属性，我们可以监视数据的变化，并在变化时执行相应的操作。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<br>
千米：<input v-model="km">
<br>
米：<input v-model="m">
</div>
<script type="text/javascript">
new Vue ({
el:'#app',
data(){
return {
price:79,
num:1,
m:1000,
km:1
};
},
computed:{
count:function(){
return this.price*this.num;
}
},
watch:{
km:function(v){
this.m=parseInt(v)*1000;
},
m:function(v){
this.km=parseInt(v)/1000;
} ,
}
});
</script>
</body>
</html>
五、案例实操
5.1 购物车案例
通过以上所学的Vue基础知识，我们可以创建一个简单的购物车页面。在这个案例中，我们将使用插值、指令、过滤器等技术来实现购物车列表的展示、商品数量的增加和减少，以及总价的计算。
<!DOCTYPE html>
<html>
<head>
<title>购物车</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<style>
/* 添加样式表 */
body {
font-family: Arial, sans-serif;
background-color: #f7f7f7;
}
#app {
margin: 20px;
}
h1 {
text-align: center;
color: #333;
margin-bottom: 20px;
}
table {
border-collapse: collapse;
width: 100%;
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
th,
td {
padding: 10px;
text-align: left;
}
th {
background-color: #f7f7f7;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
input[type="number"] {
width: 50px;
padding: 5px;
}
button {
background-color: #4caf50;
color: #fff;
border: none;
padding: 8px 16px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div id="app">
<h1>购物车</h1>
<table>
<thead>
<tr>
<th>商品</th>
<th>价格</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in cartItems">
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td>
<input type="number" v-model="item.shu" min="0" @input="updateSubtotal(item)">
</td>
<td>{{ item.subtotal }}</td>
<td>
<button @click="increaseshu(item)">增加</button>
<button @click="decreaseshu(item)">减少</button>
</td>
</tr>
</tbody>
<tr>
<td colspan="3">总计</td>
<td>{{ total }}</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#app',
data: {
cartItems: [
{ name: '娃娃', price: 10, shu: 1, subtotal: 10 },
{ name: '小熊', price: 20, shu: 2, subtotal: 40 },
{ name: '大熊', price: 30, shu: 3, subtotal: 90 }
]
},
computed: {
total: function() {
return this.cartItems.reduce((sum, item) => sum + item.subtotal, 0);
}
},
methods: {
updateSubtotal: function(item) {
item.subtotal = item.price * item.shu;
},
increaseshu: function(item) {
item.shu++;
this.updateSubtotal(item);
},
decreaseshu: function(item) {
if (item.shu > 0) {
item.shu--;
this.updateSubtotal(item);
}
}
}
});
</script>
</body>
</html>
