框架小白白白白的进阶之路 --- Vue（三）方法、计算属性和监听器
方法和计算属性
methods：方法
正如他的名字一样，它们是挂载在对象上的函数，通常是Vue实例本身或Vue组件。
当data值改变时，重新渲染页面，页面的method方法会被调用（有触发条件的除外）
<html>
<head>
<meta charset="utf-8" />
<title>title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
head>
<body>
<div id="app">
<div id="">{{msg}}div>
<div id="">{{price()}}div>
<div id="">{{p()}}div>
<button @click="add()">增加button >
div>
<script type="text/javascript">
let demo=new Vue({
el:"#app",
data:{
msg:'总金额：',
package:{
count:4,
price:5
}
},
computed:{
},
methods:{
add:function(){
this.package.count++
},
price:function(){
console.log("price");
return this.package.count*this.package.price
},
p:function(){
console.log("bbbbbbb")
}
}
})
script>
body>
html>
如上程序，在进行页面渲染时，会自动调用price（）和p（），不会调用add（）（有触发条件：@click）
computed：计算属性
是计算属性，但不是方法（写法与方法类似），它可以用来监视对data数据（与其关联的数据）的改变，当data中的数据发生改变时，会触发与其关联的计算属性
注意事项
- 计算属性
是属性，不是方法，调用时不能写（） - 计算结果会缓存到 Vue对象中（存储在计算属性里）
- 计算属性内部不能调用自己（this.***），会发生递归死循环
- 当计算属性内涉及到的data值发生改变时，就会触发计算属性
- 当data值发生改变时， 就会立刻触发计算属性,而不是等到方法运行结束后才触发计算属性
- 计算属性只能通过get方法获得值，没有set方法不能进行赋值
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuetitle>
<script src="./vue.js">script>
head>
<body>
<div id="demo">
<p>原数据{{message}}p>
<p>反转后的数据{{reversedMessage}}p>
<button @click="add()">补充货物1button>
<div>总价为：{{price}}div>
div>
<script>
var demo = new Vue({
el: '#demo',
data: {
message :'abcdefg',
package: {
count: 5,
price: 5
},
},
computed:{
reversedMessage:function(){
return this.message.split('').reverse().join('')
},
price: function(){
return this.package.count*this.package.price
}
},
methods: {
add: function(){
this.package.count++ // 当data值发生改变时， 就会立刻触发计算属性,而不是等到方法运行结束后才触发计算属性
}
}
})
script>
body>
html>
watch监听器
可以监听对应值的变化，无论是表单输入、异步更新还是动画，对于任何发生变化了的东西都有用。回调函数中，第一个参数为新值，第二个参数为旧值
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuetitle>
<script src="./js/vue.js">script>
head>
<body>
<div id="demo">
<button @click='a++'>a加1button>
<input type="text" v-model="a">
<p>{{message}}p>
div>
<script>
var demo = new Vue({
el: '#demo',
data: {
message :'',
a:1
},
watch:{
a:function(val,oldval){ //此处的a为要监听的属性（data里的属性a）
this.message = 'a的旧值为' + oldval + ',新值为' + val;
}
}
})
script>
body>
html>
对数组进行监听
var vm = new Vue({
el: '#app',
data: {
list:[
{val: ''},
{val:''}
]
},
watch: {
list:{
handler: function (val, oldVal) {
alert('数据改变了');
},
deep: true
}
},
})
对于复杂的对象类型监听
使用watch的handler可以监听对象中任意一个属性的变化，但是要注意，过去的旧值和新值都是同一对象(新值)
如果想要对对象中的某一个确定属性进行监听，我们需要借助于computed，写一个对应属性的计算属性，然后在watch中监听这个对象属性，即可同时获取新值和旧值
双向绑定(v-model)
v-model.lazy
可以使input输入框不会每打一个字就同步一次data的数据变化，而是直到输入框失去焦点时，才会进行data的数据同步
v-model.number
确保input输入框最后获取到的数据是number(数字)类型
v-model.trim
输入过滤，去掉input输入框中输入的数据首尾的空格(不能去除中间的空格)
过滤器
过滤器分为全局过滤器和局部过滤器
全局过滤器必须写在vue的vm对象前面，对全部的vm对象生效（整个页面的标签都可以用）
局部过滤器是写在vm对象内部的，只对当前的vm对象生效（只有被当前vm对象包含的标签才可以用）
定义方式
Vue.filter(name,function(value){})
调用方式
{{value|name}}
可以调用多个过滤器(过滤器链)
{{value|name|name}}将左侧过滤器的结果，作为右侧过滤器的value值
过滤器传参数
Vue.filter(name,function(value，a,b){})
a,b就是传递进来的参数
调用
{{value|name(a,b)}}
注意，value必须是第一个，从第二个开始才是传递进来的参数