uniapp模板语法、计算属性、监听属性

一.模板语法

一.data属性
data 必须声明为返回一个初始数据对象的函数

//正确用法，使用函数返回对象
data:function() {
    return {
        title: 'Hello'
    }
}

二.模板语法—插值
1.文本（使用双大括号插值）{{ }}
2.通过 v-once 指令，可以执行一次性插值，当数据改变时，插值处的内容不会更新。
3.双大括号会将数据解释为普通文本，为了输出真正的 HTML，需要使用 v-html 指令
4.Mustache 语法不能作用在 HTML attribute（特性） 上，应该使用 v-bind 指令
5.v-if 指令将根据表达式 seen 的值的真假来插入/移除 元素。
6. v-on 指令，用于监听 DOM 事件

export default {
	data:function() {
		return {
			msg:"hi uniapp!",
			text:"一次性插值,不改变",
			rawHtml:'这是红色',
			color:'blue',
			seen:true,
			
		}
	}
}

二.计算属性

1.reversedMessage 反转
.reversedMessage 依赖于 .message，因此当 .message 发生改变时，所有依赖 .reversedMessage 的绑定也会更新。

Original message:{{ message }}
Computed reversed message:{{ reversedMessage }}

export default {
	data:function() {
		return {
			message:'Hello'
		}
	},
	computed: {
	    // 计算属性的 getter
	    reversedMessage: function () {
	      // `this` 指向 vm 实例
	      return this.message.split('').reverse().join('')
	    }
	}
}
// 结果：Hello/olleH

2.也可以通过在表达式中调用方法来达到同样的效果：

Reversed message: {{ reversedMessage() }}

methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

3.计算属性的 setter
计算属性默认只有 getter，需要时也可以提供一个 setter：

{{fullName}}

export default {
	data:function() {
		return {
			firstName:'Dell',
			lastName: 'Lee'
		}
	},
	computed: {
	   fullName:{
			get: function () {
				return this.firstName + " " + this.lastName;
			},
			set: function (value) {
			   var arr = value.split(" ");
			   this.firstName = arr[0];
			   this.lastName = arr[1];
			}
		}
	}
}

注：get用来获取属性值，同时计算生成新的值。
set：用来改变传过来的值，发生改变的时候，同时让数据的内容也发生改变。

三.侦听属性

观察和响应 Vue 实例上的数据变动：watch

{{fullName}}

export default {
	data:function() {
		return {
			firstName: 'Foo',
			lastName: 'Bar',
			fullName: 'Foo Bar'
		}
	},
	watch: {
		firstName: function (val) {
			this.fullName = val + ' ' + this.lastName
		},
		lastName: function (val) {
			this.fullName = this.firstName + ' ' + val
		}
	}
}
// 结果：Foo  Bar