Vue的基本特性
Posted 遥岑.
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue的基本特性相关的知识，希望对你有一定的参考价值。
目录
Vue的基本特性
data
data：在Vue实例中初始化的data中的所有数据会自动进行监听绑定，然后可以使用两个大括号来绑定data中的数据。
<div id="app">
<h2>message</h2>
<input type="text" v-model="message">
</div>
<script>
var vm = new Vue(
el: '#app',
data:
message: 'Hello Vue'
);
</script>
后面只要通过vm.message=”XXX”，即可进行视图的实时更新，使用起来很简单。
注意data中的数据都是浅拷贝，如果修改原来的对象也会改变data，从而触发更新事件。
computed
computed：计算属性，在进行数据绑定的时候，对数据要进行一定的处理才能展示到html页面上。虽然Vue提供了非常好的表达式绑定方法，但是只能应对低强度的需求。
Vue提供的计算属性(computed)允许开发者编写一些方法，协助进行绑定数据的操作，这些方法可以跟data中的属性一样使用，注意用的时候不要加()。
<body>
<div id="app">
<table border="1" style="text-align: center;">
<tr>
<td width="100">生日</td>
<td width="200">getBirthday</td>
</tr>
<tr>
<td width="100">年龄</td>
<td width="200">age</td>
</tr>
<tr>
<td width="100">地址</td>
<td width="200">address</td>
</tr>
</table>
</div>
<script>
var vm = new Vue(
el:'#app',
data:
birthday:1014228510514,
age:19,
address:'扬州'
,
//对数据做一些复杂的处理
computed:
getBirthday:function()
var m = new Date(this.birthday)
var str = m.getFullYear() + '年' +(m.getMonth()+1) + '月' + m.getDate() + '日'
return str
)
</script>
</body>
每一个计算属性都包含一个getter 和一个setter ，上面的示例是计算属性的默认用法， 利用了getter 来读取。
在需要时，也可以提供一个setter 函数， 当手动修改计算属性的值就像修改一个普通数据那样时，就会触发setter 函数，执行一些自定义的操作。
- 计算属性是基于它们的依赖进行缓存的，计算属性只有在它的相关依赖发生改变时才会重新求值
- 属性变化才执行getter函数，否则执行缓存默认的true指令打开缓存
- 如果频繁使用计算属性，而计算属性方法中有大量的耗时操作，例如在getter中循环一个大的数组，会带来一些性能问题。计算属性可以用来解决该问题
<body>
<div id="app">
<p>水果</p>
<span> pear </span>
<span> apple </span>
<span> banana </span>
<span> number </span>
<p style="padding: 12px 0;"> result </p>
<button @click="btn">输出结果</button>
</div>
<script>
new Vue(
el:'#app',
data:
pear: '梨子',
apple: '苹果',
banana:'香蕉',
number: '水果'
,
computed:
result:
cache:true,
//默认调用get方法
get: function()
return 'abcd'+this.pear+this.apple+this.banana+this.number
,
set:function(newVal)
this.pear = newVal.substr(2,2)
this.apple = newVal.substr(2,2)
this.banana = newVal.substr(4)
this.number = newVal.substr(4)
,
methods:
btn()
//向set传值
this.result = '123456'
)
</script>
</body>
methods
methods：通过methods属性定义方法，并使用v-on指令来监听DOM事件。
<body>
<div id="app">
<p>原字符串:message</p>
<p>反转字符串：reverseMessage()</p>
</div>
<script>
new Vue(
el:'#app',
data:
message: '你是年少的欢喜'
,
methods:
reverseMessage:function()
return this.message.split('').reverse().join('')
)
</script>
</body>
以上是关于Vue的基本特性的主要内容，如果未能解决你的问题，请参考以下文章
MYSQL中CONCATCONCAT_WSGROUP_CONCAT详解