vue模板语法、计算属性、侦听属性

最新推荐文章于 2023-01-09 17:57:35 发布

weixin_46353442

最新推荐文章于 2023-01-09 17:57:35 发布

阅读量127

点赞数

本文链接：https://blog.csdn.net/weixin_46353442/article/details/104807376

版权

一、模板语法

1、插值

1）、文本
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>{{ msg }}</span>//在data中声明属性及值

绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。
通过使用 v-once 指令，也能执行一次性地插值，当数据改变时，插值处的内容不会更新。

<span v-once>这个将不会改变: {{ msg }}</span>

2）、原始HTML
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html

<p  v-html="rawHtml"></p>

data中代码段：

var vm = new Vue({
	el : "#app",
	data : {
		rawHtml : '<span style="color:red">this is should be red</span>',
	}
});

显示效果为：
在这里插入图片描述
3）、特性
v-bind：动态绑定（为html动态的绑定属性）
使用方法：v-bind:属性="变量值"

<div v-bind:class="color">test...</div>

为color赋值：

data : {
	color:'blue',
}

样式：（可自行改变）

<style type="text/css">
.blue{color:blue; font-size:100px;}
</style>

显示为：
在这里插入图片描述
4）、使用 JavaScript 表达式
对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

<div id="app">
	<p>{{ number + 1 }}</p>//算数运算
	<p>{{ 1 == 1 ? 'YES' : 'NO' }}</p>//条件表达式
	<p>{{ message.split('').reverse().join('') }}</p>//函数运算
</div>

split将字符串拆分为数组，reverse()将数组反序

data : {
number : 10,
	ok : 1,
	message : "vue"
}

显示结果为：
在这里插入图片描述

2、指令

指令是带有 v- 前缀的特殊特性。指令特性的值预期是单个JavaScript 表达式 (v-for 是例外情况)。指令的职责是：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

<p v-if="seen">现在你看到我了</p>//seen的取值（true/false）决定p标签的存在

1）、参数
一些指令能够接收一个“参数”，在指令名称之后以冒号表示
如：

<a v-bind:href="url">...</a>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定
2）、修饰符
修饰符是以 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

<div @click="click1">
	<div @click.stop="click2">
		click me
	</div>
</div>

@click点击事件
.stop修饰符当click2执行完成后不会去执行click1方法
定义方法：

methods:{
	click1 : function () {
		console.log('click1......');
	},
	click2 : function () {
		console.log('click2......');
	}
}

3、缩写

v-bind缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

二、计算属性

computed
用法：

computed:{ 属性名:function(){
	 return 返回值;
 } }

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="example">
  <p>自定义：{{ message }}</p>
  <p>reversedMessage计算属性后：{{ reversedMessage }}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')// this 指向 vm 实例
    }
  }
})
</script>
<style type="text/css">

</style>
</body>
</html>

结果：
在这里插入图片描述

三、侦听属性

watch
用来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的

<div id = "app">
    <p style = "font-size:25px;">计数器: {{ counter }}</p>
    <button @click = "counter++" style = "font-size:25px;">点我+1</button>
</div>
<script type = "text/javascript">
var vm = new Vue({
    el: '#app',
    data: {
        counter: 1
    }
});
vm.$watch('counter', function(nval, oval) {
	//监听counter的变化
    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>