插值语法
<html>
...
<head>
...
<title>姓名案例_插值语法实现</title>
//引入Vue
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
//准备好一个容器
<div id="root">
姓: <input type="text" v-model="firstName"> <br>
名: <input type="text" v-model="lastName"> <br>
全名: <span>{{firstName}}-{{lastName}}</span>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false//阻止vue在启动时生成生产提示。
new Vue({
el: '#root',
data: {
firstName:'张',
lastName: '三'
}
})
</script>
</html>
methods
<html>
...
<head>
...
<title>姓名案例_methods实现</title>
//引入Vue
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
//准备好一个容器
<div id="root">
姓: <input type="text" v-model="firstName"> <br>
名: <input type="text" v-model="lastName"> <br>
全名: <span>{{firstName()}}</span>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false//阻止vue在启动时生成生产提示。
new Vue({
el: '#root',
data: {
firstName:'张',
lastName: '三'
},
methods: {
fullName(){
conslie.log('@---fullName')
return this.firstName + '-' + this.lastName
}
},
})
</script>
</html>
计算属性
<html>
...
<head>
...
<title>姓名案例_计算属性实现</title>
//引入Vue
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
//准备好一个容器
<div id="root">
姓: <input type="text" v-model="firstName"> <br>
名: <input type="text" v-model="lastName"> <br>
测试: <input type="text" v-model="x"> <br>
全名: <span>{{firstName}}</span> <br>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false//阻止vue在启动时生成生产提示。
const vm = new Vue({
el: '#root',
data: {
firstName:'张',
lastName: '三',
x: '你好'
},
computed: {
fullName:{
//get有什么作用呢?当有人读取fullName时,get就会被调用,且返回值就作为fullNmae的值
//get什么时候被调用呢?1.初次读取fullName时。2.所依赖的数据发生变化时。
get(){
console.log('get被调用了')
//console.log(this)//此处的this是vm
return this.firstNmae + '-' + this.lastName
}
}
}
})
</script>
</html>
计算属性
-
定义:要用的属性不存在,要通过已有属性计算得来。
-
原理:底层借助了object.defineproperty 方法提供的getter和setter.
-
get函数什么时候执行?
(1)初次读取时会执行一次。
(2)当依赖的数据发生改变时会被再次调用。 -
优势: 与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。
-
备注:*计算属性最终会出现在vm上,直接读取使用即可。
*如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。