Vue.js入门模板语法[上] 及Vue.js实现购物车---详细讲解

前言

前面我们学习了Vue的基础入门,接下来我们学习有关Vue的模板语法,学习Vue语法能提高我们的前端开发效率

Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。vue将模板编译成虚拟dom,结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少

一,插值

1.1 文本

{{msg}}

html 复制代码
	<body>
		<div  id="wenben">
			<h1>文本</h1>
			 {{msg}}
		</div>
		
	<script >
		new Vue({
		el:'#wenben',
		data(){
			return{
				msg:"Hello Smart!"
			}
		}
		});
	</script>

1.2 html

使用v-html指令用于输出html代码

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div  id="wenben">
			 <p>html解析</p>
		      <h1 v-html="msg2"></h1>
		</div>
		
		
	<script >
		new Vue({
		el:'#wenben',
		data(){
			return {
				msg2:'<span style="color:red;">Hello Smart!</span>'
			}
		}
		});
	</script>
	</body>
</html>

1.3 属性

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	 <style>
		.f40{
			font-size: 100px;
		} 
		 
	 </style>
	
	</head>
	<body>
		<div  id="wenben">
			  <p>属性</p>
			    <h1 :class="msg3" v-html="msg2"></h1>
		</div>
		
		
	<script >
		new Vue({
		el:'#wenben',
		data(){
			return {
				  msg2:'<span style="color:red;">Hello Smart!</span>',
				   msg3:'f40'
			}
		}
		});
	</script>
	</body>
</html>

1.4 表达式

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	 <style>
		.f40{
			font-size: 40px;
		} 
		 
	 </style>
	
	</head>
	<body>
		<div  id="wenben">
			<!-- <h1>文本</h1> -->
			 <!-- {{msg1}} -->
			<!-- <p>html解析</p>
		      <h1 v-html="msg2"></h1> -->
			 <!-- <p>属性</p>
			 <h1 :class="msg3" v-html="msg2"></h1> -->
			 <!--表达式-->
			 {{num+10}},
			 {{warm.substr(9,15)}},
			 <input v-model="ok"/>
			 {{ok==1?'被打了':'不行我要还回去'}}
		</div>
		
		
	<script >
		new Vue({
		el:'#wenben',
		data(){
			return {
				// msg1:'Hello Smart!',
				// msg2:'<span style="color:red;">Hello Smart!</span>',
				   // msg3:'f40'
				   num:10,
				warm:'nishigedashuaige',
				ok:1
			}
		}
		});
	</script>
	</body>
</html>

二,指令

1.v-if&v-else&v-else-if

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>指令的使用</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
			<div id="zz">
				<h1>v-if...的使用</h1>
				<input v-model="yanzhi"/><br/>
				<b v-if="yanzhi<60">丑男</b>
				<b v-else-if="yanzhi>=60 && yanzhi<=70">看得过去</b>
				<b v-else-if="yanzhi>70 && yanzhi<=80">小帅</b>
				<b v-else-if="yanzhi>80 && yanzhi<=90">美男子</b>
				<b v-else=" ">吴彦祖</b>
			
				
			</div>
		</body>
		<script type="text/javascript">
			// 构建vue实例 绑定边界	
			new Vue({
				el:'#zz',
				data(){
					return{
						yanzhi:60,
					}
				},
			})
		</script>
	</body>
</html>

2.v-show

与v-if类似,只是会渲染其身后表达式为false的元素,而且会给这样的元素添加css代码:style="display:none"

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>指令的使用</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
			<div id="zz">
				<h1>v-if|v-else|v-else-if的使用</h1>
				<input v-model="yanzhi"/><br/>
				<b v-if="yanzhi<60">丑男</b>
				<b v-else-if="yanzhi>=60 && yanzhi<=70">看得过去</b>
				<b v-else-if="yanzhi>70 && yanzhi<=80">小帅</b>
				<b v-else-if="yanzhi>80 && yanzhi<=90">美男子</b>
				<b v-else=" ">吴彦祖</b>
			
				 <p v-show="yanzhi>90">>v-show-成为大神的人</p> 
				 <p v-if="yanzhi>90">v-if-成为大神的人<p>

			</div>
		</body>
		<script type="text/javascript">
			// 构建vue实例 绑定边界	
			new Vue({
				el:'#zz',
				data(){
					return{
						yanzhi:60,
					}
				},
			})
		</script>
	</body>
</html>

3 v-for

类似JS的遍历:

遍历数组: v-for="item in items", items是数组,item为数组中的数组元素

遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名,index下标

html代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
    <h1>v-for的使用</h1>
    下拉框:
    <select v-model="hobbySelected">
        <option v-for="h in hobby" :value="h.id">{{h.name}}</option>
    </select><br>
    复选框:
    <div v-for="h in hobby">
        <input :value="h.id" type='checkbox'/>{{h.name}}
    </div>
</div>
</body>
<script type="text/javascript">
    // 绑定边界	
    new Vue({
        el: '#app',
        data() {
            return {
                hobby: [
                    {id: "1", name: "一杀"},
                    {id: "2", name: "二杀"},
                    {id: "3", name: "三杀"},
                    {id: "4", name: "四杀"}
                ]
            };
        }
    })
</script>
 
</html>

4 动态参数:

从2.6.0开始,可以用方括号括起来的JavaScript表达式作为一个指令的参数

<a v-bind:[attrname]="url"> ... </a>

同样地,你可以使用动态参数为一个动态的事件名绑定处理函数

<button v-on:[evname]="dt">点击事件</button>

注1:动态参数表达式有一些语法约束,evName无效,evname有效,回避大写

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过滤器</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
		<!-- 定义边界 -->
			<div id="app">
				<h1>动态参数</h1>
				<input v-model="evname" />
				<button v-on:[evname]="test">点击</button>
			</div>
		<script type="text/javascript">
			// 构建vue实例 绑定边界	
			new Vue({
				el:'#app',
				data(){
					return{
					evname:'click'
				};
				},
				methods: {
					test(){
						alert("点一点更棒!");
					}
				}
			})
		</script>
</html>

三,过滤器

3.1 局部过滤器

vue允许自定义过滤器,一般用于常见的文本格式化,过滤器可用的两个地方:双花括号插值v-bind表达式,过滤器应该被添加在js表达式的尾部,使用管道运算符 " | "

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过滤器的使用</title>
				<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="B">
            {{msg}}<br />
			{{msg|single}}<br />
			{{msg|param(0,2)}}
		</div>
		<script type="text/javascript">
			// 绑定边界	ES6具体体现
			new Vue({
				el: '#B',
				data() {
					return {
						msg: "或许就像他们说~"
					};
				},
				filters: {
					'single': function(val) {
						return val.substring(4, 8);
					},
					'param': function(val, start, end) {
						return val.substring(start, end);
					}
				}
			})
		</script>
	</body>
</html>

3.2 全局过滤器

拷入date.js(日期格式化)放入项目js目录中,在页面中引入。

定义全局过滤器

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>全局过滤器</title>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
 
    <script src="date.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="B">
    <h3>全局过滤器</h3>
    {{time}}<br>
    {{time | fmtDateFilter}}
</div>
</body>
<script type="text/javascript">
    // 全局过滤器
    Vue.filter('fmtDateFilter', function (value) {
        return fmtDate(value);
    });
    // 绑定边界	ES6具体体现
    new Vue({
        el: '#B',
        data() {
            return {
                time: new Date()
            };
        }
    })
</script>
</html>

四,计算属性&监听器

4.1 计算属性

计算属性可用于快速计算视图(View)中显示的属性。这些计算将被缓存,并且只在需要时更新。

使用场景:当一个属性需要复杂的逻辑运算之后才能获取其值,可以使用计算属性,在一个计算属性中可以完成各种复杂的逻辑,包括运算,方法调用等,只要最终返回一个结果就可以了

语法:computed:{}

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="B">
    单价:<input v-model="price">
    数量:<input v-model="num">
    总价:<input v-model="count">
</div>
</body>
<script type="text/javascript">
 
    new Vue({
        el: '#B',
        data() {
            return {
                price: 50,
                num: 1
            }
        },
        computed: {
            count: function () {
                return this.price * this.num
            }
 
        }
    })
</script>
</html>

4.2 监听器

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监听属性</title>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="B">
    <p>监听属性</p>
    千米:<input v-model="km"/>
    米:<input v-model="m"/>
</div>
</body>
<script type="text/javascript">
    // 绑定边界	ES6具体体现
    new Vue({
        el: '#B',
        data() {
            return {
                km: 2,
                m: 2000
            };
        },
        watch: {
            // v指的是m变量
            m: function (v) {
                this.km = parseInt(v) / 1000;
            },
            // v指的是km变量
            km: function (v) {
                this.m = parseInt(v) * 1000;
            }
        }
    })
</script>
 
</html>

五、购物车实现

购物车代码:

html 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--引入vue.js-->
 <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title>购物车</title>
<style>
  th, td {
    padding: 15px;
    text-align: center;
  }
</style>
</head>
<body>
<div id="B">
  <div >
    <h1>购物车</h1>
    <table width="80%" border="1"  cellspacing="1" cellpadding="1">
      <thead>
        <tr>
          <th>商品名</th>
          <th>数量</th>
          <th>单价</th>
          <th>小计</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items" :key="item.id">
          <td >
            <h3 class="">{{ item.name }}</h3>
          </td>
          <td class="">
            <button @click="updatetity(item, -1)">-</button><!-- 绑定事件 -->
            <span class="quantity-label">{{ item.quantity }}</span>
            <button @click="updatetity(item, 1)">+</button>
          </td>
          <td class="">{{ item.price }}</td>
          <td>
            <p class="">{{ subtotal(item) }}</p>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3"></td>
          <td>
            <p class="" colspan="4" sty>总计{{ count() }}</p>
          </td>
        </tr>
      </tfoot>
	  </center>
    </table>
	
  </div>
</div>
 
 
<script>
new Vue({
  el: '#B',
  data: {
    items: [
      { id: 1, name: '乒乓球', price: '$2',  quantity: 1 },
      { id: 2, name: '足球', price: '$109', quantity: 2 },
      { id: 3, name: '篮球', price: '$150',  quantity: 1 },
	  { id: 4, name: '羽毛球', price: '$99',  quantity: 2 },
    ]
  },
  methods: {
    updatetity(item, amount) {
      item.quantity += amount;
    },
    subtotal(item) {
      return '$' + (parseFloat(item.price.slice(1)) * item.quantity).toFixed(2);
    },
    count() {
      let total = 0;
      for (let item of this.items) {
        total += parseFloat(item.price.slice(1)) * item.quantity;
      }
      return '$' + total.toFixed(2);
    }
  }
});
</script>
</body>
</html>
相关推荐
Boilermaker19921 小时前
【Java EE】SpringIoC
前端·数据库·spring
中微子1 小时前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上10241 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y2 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁2 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry2 小时前
Fetch 笔记
前端·javascript
拾光拾趣录2 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟2 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan2 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson2 小时前
青苔漫染待客迟
前端·设计模式·架构