Vue基础语法（插值、指令、过滤器、计算属性与监听属性）

最新推荐文章于 2024-07-30 10:27:19 发布

懒大王o

最新推荐文章于 2024-07-30 10:27:19 发布

阅读量148

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_74934282/article/details/133017711

版权

插值

1.文本

2.html

3.属性

4.class、style绑定

5.表达式

双大括号插值（Mustache语法）：
双大括号插值是Vue中最常用的插值语法，使用双大括号{{ }}将表达式包裹起来，表达式将会被求值后显示在HTML中。
{{msg}}

案列

源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
			<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.6/vue.js"></script>
			<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<title>插值</title>
		<style type="text/css">
			.f30{
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<p>文本</p>
			{{msg}}
			<p>thml解析</p>
			{{msg2}}<br>
			<b :class="msg3" v-html="msg2"></b>
			<p>表达式</p>
			{{num+1}}
			{{warn.substr(0,2)}}
			<input v-model="ok" />
			{{ok==1?'大聪明':'臭傻逼'}}
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data(){
					return {
						msg:'沸洋洋你个臭傻逼',
						msg2:'<span style="color:yellowgreen">我可是懒大王</span>',
						msg3:'f30',
						num:5,
						warn:'靓仔闪亮登场',
						ok:1
					};
					}
			});
		</script>
	</body>
</html>

指令

在Vue中，指令是用于将特定行为应用于DOM元素的特殊属性。Vue提供了许多内置指令，可以用于处理常见的DOM操作和数据绑定

v-bind插值：v-bind指令用于在HTML属性中插入动态的数据。可以简写为:。
<img :src="imageSrc">
上述代码中，:src将会把imageSrc变量的值作为src属性的值进行插值。

v-on插值：v-on指令用于在HTML事件处理程序中插入动态的方法。可以简写为@。
<button @click="handleClick">Click Me</button>
上述代码中，@click将会将handleClick方法插入到click事件处理程序中。

v-html插值：v-html指令用于将数据作为原始HTML插入到元素中。
<div v-html="htmlString"></div>
上述代码中，htmlString变量的值将会被作为原始HTML插入到<div>元素之中。

v-text插值：v-text指令用于替代双大括号插值，将指定的数据直接作为文本内容插入到元素中。
<p v-text="message"></p>
上述代码中，message变量的值将会作为<p>元素的文本内容。

源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.6/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<title>指令</title>
	</head>
	<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>
		60以下 麻花佬
		60-70 屌丝
		70-80 叼毛
		80-90 良好青年
		90以上 靓仔
		<p>v-show</p>
		v-if与v-show的区别？<br>
		<b v-if="isSHow">展示</b>
		<b v-show="isSHow">展示</b>
		<p>v-for</p>
		<i v-for="a in arr">{{a}}&nbsp;&nbsp;</i>
		<i v-for="i,u in users">&nbsp;&nbsp;{{i}}</i>
		
		<select>
			<option  v-for="h in hobby" :value="h.id">{{h.name}}</option>
		</select>
		
		<div id="" v-for="h in hobby">
			<input type="checkbox" name="hobby" :value="h.id" />{{h.name}}
		</div>
		
		<p>动态参数</p>
		<input v-model="evname" />
		<button v-on:[evname]="test">点我</button>
	</div>
	<body>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data(){
					return {
						score:88,
						isSHow:false,
						arr: [1, 2, 3, 4],
						users: [{
								name: 'sz', id: 1
							},{
								name: 'sd', id: 2
							},{
								name: 'sn', id: 3
							},{
								name: 'sb', id: 4
						}],
						hobby:[{
								name: '喜羊羊', id: 1
							},{
								name: '美羊羊', id: 2
							},{
								name: '沸羊羊', id: 3
							},{
								name: '懒大王', id: 4
						}],
						evname:'click'
					};
					}
					,methods:{
						test(){
							//单击事件，双击事件
							alert('点我你试试！！！')
						}
					}
			});
		</script>
	</body>
</html>

过滤器

在Vue.js中，过滤器（Filters）是一种用于格式化文本输出的特殊函数。它可以应用于绑定表达式中的数据，在渲染过程中将数据转换为所需的格式。

源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.6/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<script src="date.js" type="text/javascript" charset="utf-8"></script>
		<title>过滤</title>
	</head>
	<div id="app">
		<P>局部过滤器基本应用</P>
		{{msg}}<br />
		{{msg | filterA}}
		<P>局部过滤器串行使用</P>
		{{msg}}<br />
		{{msg | filterB}}
		<P>局部过滤器传参</P>
		{{msg | filterC(3,10)}}<br />
		<p>全局过滤器</p>
		{{time}}<br />
		{{time | fmtDateFilter}}
	</div>
	<body>
		<script type="text/javascript">
			Vue.filter('fmtDateFilter', function (value) {
			 return fmtDate(value);
			});
			new Vue({
				el:'#app',
				filters:{
					'filterA':function(v){
						return v.substring(0,6);
					},
					'filterB':function(v){
						return v.substring(3,8);
					},
					'filterC':function(v,begin,end){
						return v.substring(begin,end);
					}
				},
				data(){
					return {
						msg: '沸羊羊你个臭傻逼，俺可是懒大王',
						time:new Date()
					};
					}
					,methods:{
						test(){
							//单击事件，双击事件
							alert('点我你试试！！！')
						}
					}
			});
		</script>
	</body>
</html>

date.js

//给Date类添加了一个新的实例方法format
Date.prototype.format = function (fmt) {
	//debugger;
    var o = {
        "M+": this.getMonth() + 1,                 //月份
        "d+": this.getDate(),                    //日
        "h+": this.getHours(),                   //小时
        "m+": this.getMinutes(),                 //分
        "s+": this.getSeconds(),                 //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds()             //毫秒
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
};

function fmtDate(date, pattern) {
	var ts = date.getTime();
    var d = new Date(ts).format("yyyy-MM-dd hh:mm:ss");
    if (pattern) {
        d = new Date(ts).format(pattern);
    }
    return d.toLocaleString();
};

计算属性和监听属性

计算属性（Computed）：计算属性是根据其他属性的值计算得出的属性，它会根据依赖的属性自动更新。

监听属性（Watch）：监听属性允许你在某个属性发生变化时执行自定义的逻辑。

源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
			<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.6/vue.js"></script>
			<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<title>计算属性监听属性</title>
	</head>
	<body>
		<div id="app">
			<p>计算属性</p>
			单价：<input v-model="price">
			数量：<input v-model="num">
			小计：{{count}}
			<p>监听属性</p>
			千米：<input v-model="km" /><br />
			米：<input v-model="m" />
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data(){
					return {
						price:66,
						num:1,
						m:1000,
						km:1
					};
					},
					computed:{
						count:function(){
							return this.price * this.num;
						}
					},
					watch:{
						km:function(v){
							//v指的是被监听的属性是，是km
							this.m = parseInt(v) * 1000;
						},
						m:function(v){
							//v指的是被监听的属性是，是m
							this.km = parseInt(v) / 1000;
						}
					}
			});
		</script>
	</body>
</html>

计算属性跟监听属性的区别

计算属性和监听属性是Vue中用于处理数据变化的两种方法，它们的主要区别如下：

计算属性：

计算属性是Vue中的一个特殊属性，用于定义一个依赖其他属性计算得来的属性。
计算属性会根据它所依赖的属性的变化而自动重新计算，只有当依赖属性发生变化时，计算属性才会重新求值。
计算属性的值会被缓存起来，只有当依赖的属性发生变化时，才会重新计算。

监听属性：

监听属性是通过watch选项来定义的，用于监听某个属性的变化，并在属性变化时执行特定的逻辑。
监听属性需要显式地定义监听函数，并在函数中处理属性变化时的逻辑。
监听属性适用于需要监听并处理属性变化的情况，可以执行更复杂的逻辑，如异步操作或调用其他方法。

总结来说，计算属性适用于通过其他属性计算得到的属性值，而监听属性适用于需要监听并处理属性变化的情况。计算属性会自动计算并缓存值，而监听属性需要显式地定义监听函数来处理属性变化。

Vue购物车结算案列

结合我们当前学的内容简单的写一个结算

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
			<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.6/vue.js"></script>
			<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<title>购物车</title>
	</head>
	<body>
		<div id="app">
		  <!-- 购物车内容 -->
		  <table>
		    <thead>
		      <tr>
		        <th>商品名称</th>
		        <th>单价</th>
		        <th>数量</th>
		        <th>小计</th>
		      </tr>
		    </thead>
		    <tbody>
		      <tr v-for="(item, index) in cartItems" :key="index">
		        <td>{{ item.name }}</td>
		        <td>{{ item.price }}</td>
		        <td>
		          <button @click="decrement(index)">-</button>
		          {{ item.quantity }}
		          <button @click="increment(index)">+</button>
		        </td>
		        <td>{{ calculateSubtotal(item) }}</td>
		      </tr>
		    </tbody>
		    <tfoot>
		      <tr>
		        <td colspan="3">总计：</td>
		        <td>{{ calculateTotal() }}</td>
		      </tr>
		    </tfoot>
		  </table>
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
		new Vue({
		  el: '#app',
		  data: {
		    cartItems: [], // 购物车商品列表
		  },
		  methods: {
		    // 减少数量
		    decrement(index) {
		      if (this.cartItems[index].quantity > 1) {
		        this.cartItems[index].quantity--;
		      }
		    },
		    // 增加数量
		    increment(index) {
		      this.cartItems[index].quantity++;
		    },
		    // 计算小计
		    calculateSubtotal(item) {
		      return item.price * item.quantity;
		    },
		    // 计算总计
		    calculateTotal() {
		      let total = 0;
		      for (let i = 0; i < this.cartItems.length; i++) {
		        total += this.cartItems[i].price * this.cartItems[i].quantity;
		      }
		      return total;
		    }
		  },
		  mounted() {
		    // 初始化购物车商品列表
		    // 可以根据实际情况从后端获取数据，并将数据赋值给cartItems
		    this.cartItems = [
		      { name: 'ddv', price: 888, quantity: 1 },
		      { name: '鹤顶红', price: 1888, quantity: 2 },
		      { name: '奥里给', price: 8888, quantity: 3 },
		    ];
		  }
		});
		</script>

	</body>
</html>

懒大王o

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础语法（插值、指令、过滤器、计算属性与监听属性）

总结来说，计算属性适用于通过其他属性计算得到的属性值，而监听属性适用于需要监听并处理属性变化的情况。在Vue中，指令是用于将特定行为应用于DOM元素的特殊属性。：v-text指令用于替代双大括号插值，将指定的数据直接作为文本内容插入到元素中。上述代码中，:src将会把imageSrc变量的值作为src属性的值进行插值。：计算属性是根据其他属性的值计算得出的属性，它会根据依赖的属性自动更新。：v-bind指令用于在HTML属性中插入动态的数据。上述代码中，message变量的值将会作为<p>元素的文本内容。
复制链接

扫一扫