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

逃离我推掉我的手 2023-07-13 12:14 135阅读 0赞

## 一、模板语法 ##

### 1、插值 ###

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

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

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

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

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

data中代码段：

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

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

为color赋值：

data : {
    	color:'blue',
    }

样式：（可自行改变）

显示为：  
![在这里插入图片描述][20200312114953332.png]  
**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"
    }

显示结果为：  
![在这里插入图片描述][2020031212015686.png]

### 2、指令 ###

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

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

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

在这里 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>

结果：  
![在这里插入图片描述][20200312134807348.png]

## 三、侦听属性 ##

**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>

[2020031211340056.png]: https://img-blog.csdnimg.cn/2020031211340056.png
[20200312114953332.png]: https://img-blog.csdnimg.cn/20200312114953332.png
[2020031212015686.png]: https://img-blog.csdnimg.cn/2020031212015686.png
[20200312134807348.png]: https://img-blog.csdnimg.cn/20200312134807348.png