Vue中——数据的双向绑定、计算和监听

Vue中数据双向绑定的方法：v-model

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

按钮的事件可以使用 v-on 监听事件，并对用户的输入进行响应。

1.此时运行页面，input框里会自动显示data里content的内容this is content。
2.当对输入框的里内容做修改时，data里content的值也会随之被修改，从而改变页面上{{content}}所显示的内容。

Vue的计算属性：computed

例子中声明了一个计算属性fullName,功能是将firstName和lastName拼接起来。

computed 和 methods有什么区别？

• 我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
• 可以说使用computed 性能会更好，但是如果不希望缓存，可以使用 methods 属性。

Vue.js 监听属性:watch

通过 watch 来响应数据的变化。

上述例子通过watch监听input输入内容的变化，实现对输入内容字数的计算。