Vue模板语法（一）

最新推荐文章于 2024-07-08 15:52:01 发布

原创最新推荐文章于 2024-07-08 15:52:01 发布 · 194 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #过滤器 #vue.js

Vue 专栏收录该内容

14 篇文章

订阅专栏

本文深入解析Vue.js的关键特性，包括插值、指令、计算属性、监听属性等，通过实例详细阐述其工作原理及应用场景，助你掌握Vue.js开发精髓。

这里写目录标题

插值

	<body>
		<div id="app">
			<h1>文本</h1>
				{{msg}}
			<h1>使用html</h1>
				<div v-html="vueHtml"></div>
			<h1>使用v-bind进行属性绑定</h1>
				<!--HTML属性中的值应使用v-bind指令-->
				<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
		</div>

		<script>
			new Vue({
				el:"#app",
				data:{
					msg:"hello msg",
					vueHtml:"<h1>我是vueHtml</h1>",
					id:1
				}
			})
		</script>
	</body>

v-bind和v-model的区别：v-model支持数据双向绑定，v-bind不支持

表达式

Vue提供了完全的JavaScript表达式支持

{{str.substr(0,6).toUpperCase()}}
			{{ number + 1 }}
			{{ ok ? 'YES' : 'NO' }}

new Vue({
				el:"#app",
				data:{
					str:"abcdefg",
					number:1,
					ok:true,
				}
			})

指令

指的是带有“v-”前缀的特殊属性

<body>
		<div id="app">
			<ul>
				<li>
					<h3>条件指令（if elseif else）</h3>
					<input type="text" v-model="score" />
					<div v-if="score > 90">A</div>
					<div v-else-if="score > 80">B</div>
					<div v-else-if="score > 70">C</div>
					<div v-else-if="score > 60">D</div>
					<div v-else-if="score > 50">E</div>
					<div v-else-if="score > 40">F</div>
					<div v-else-if="score > 30">G</div>
					<div v-else-if="score > 20">H</div>
					<div v-else="">辣鸡</div>
				</li>
				<li>
					<h3>v-show</h3>
					<input type="text" v-model="show">
					<div v-show="show">我是你爸爸</div>
				</li>
				<li>
					<h3>v-for 循环不同数组</h3>
					<div v-for="item,index in arr">
						我是值：{{item}}我是当前值对应的索引：{{index}} <br>
					</div>
					<h3>v-for 对象数组循环</h3>
					<div>
						<div v-for="item,index in arrObj">
							获取对象name属性:{{item.name}} 当前位置{{index}}<br>
						</div>
					</div>
				</li>
				<li>
					<h3>动态参数</h3>
					<!-- dblclick 双击起反映 -->
					<input type="text" v-model="evname">
					<button v-on:[evname]="xxx">点我呀</button>
				</li>
			</ul>
		</div>
		<script>
			new Vue({
				el: "#app",
				data: {
					score: 100,
					msg: "hello  world",
					show: null,
					arr: [1, 2, 3, 45, 5, 6, 6, 4, 5],
					arrObj: [{
						name: "张三"
					}, {
						name: "李四"
					}, {
						name: "王五"
					}],
					evname: "click"
				},
				methods: {
					xxx() {
						console.log("你点击我啦呀");
					}
				}
			});
		</script>
	</body>

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

指令简写

Vue为v-bind和v-on这两个最常用的指令，提供了特定简写

    <a v-bind:href="url">...</a>
          <a :href="url">...</a>
  
          <a v-on:click="doSomething">...</a>
          <a @click="doSomething">...</a>

过滤器

	<body>
		<div id="app">
			<ul>
				<li>
					<h3>局部过滤器的注册</h3>
					{{msg}}<br />
					{{msg|a}}
					{{xm|a}}

				</li>
				<li>
					<h3>局部过滤器的串联</h3>
					<!--
					v对象是这一串
					https://www.javaxm.com
					结果a过滤后
					https://www.java
					-->
					{{xm|a|b}}
				</li>
				<li>
					<h3>全局过滤器的注册</h3>
					{{xm|c}}
				</li>
			</ul>

		</div>
	</body>
	<script type="text/javascript">
		Vue.filter('c',function(v){
			console.log(v)
			return v.substring(10, 16)
		})
		new Vue({
			el: '#app',
			data: {
				msg: 'https://www.baidu.com',
				xm: 'https://www.javaxm.com'
			},
			filters: {
				//a是过滤器的名字，后面的函数是过滤器的作用
				'a': function(v) {
					console.log(v)
					return v.substring(0, 16)
				},
				'b': function(v) {
					console.log(v)
					return v.substring(5, 10)
				}
			}
		})
	</script>

计算属性和监听属性

计算属性
计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新
computed:{}
监听属性
监听属性 watch，我们可以通过 watch 来响应数据的变化
watch:{}

<body>
		<div id="app">
			<ul>
				<li>
					<h3>计算属性</h3>
					单价：<input v-model="price"/>
					数量：<input v-model="num" />
					总价：{{total}}
				</li>
				<li>
					<h3>监听属性</h3>
					km:<input v-model="km"/>
					m:<input v-model="m"/>
				</li>
			</ul>

		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				price:16,
				num:1,
				km:1,
				m:1000
				
			},
			computed:{
				total(){
					return parseInt(this.price)*parseInt(this.num)
				}
			},
			watch:{
				km(v){
					this.m=v*1000;
				},
				m(v){
					this.km=v/1000;
				}
			}
		})
	</script>

小结

计算属性和监听属性的区别
computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，
举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择
与watch之间的区别：
刚开始总是傻傻分不清到底在什么时候使用watch，什么时候使用computed。这里大致说一下自己的理解：
watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象

那么对比一下,我们很容易得出computed(计算属性)和watch(监听属性)都存在缓存机制的,性能都处优先选择,那么这两者哪个更好呢?
上述很容易得出监听属性比计算属性复杂的多!因此在一个项目同时可以使用计算属性,methods和监听属性实现时候我们优先使用计算属性其次是监听属性,最后选择methods!