vue官方学习网站: https://cn.vuejs.org/
1.数据绑定
概念:把JavaScript中写的数据与html中的数据绑定,一旦JavaScript中有变化,相对应的html中的数据也会发生变化
2.vue文件的开发方式
因为vue是一个组件化的框架,因为显示在页面的内容大部分是组件拼接而成的 、
在一个文件中定义了组件需要的所有方式,数据和css,这样会很方便
如:app.vue
<template>
<div id="text">{{text}}</div>
</template>
<script>
export default{
data(){
return{
text:'abc'
}
}
}
</script>
3.render方法
1.何为render
一个组件里面有任何数据变化的时候,都会重新执行render方法, 产生新的html,
4.生命周期方法
5.computed方法
用于数据的及时更新,输出是输入的计算值,输入帮
我,输出也会随着自动变化
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})