data属性储存vue.js的data属性是储存数据的主要方式。当组件挂载时，vue.js会将data中的属性绑定到页面上。这些属性可以通过模板语法进行访问，并且可以在javascript代码中使用this访问。
例如，下面的代码定义了一个名为app的vue.js组件，并在data属性中储存了一个名为message的字符串：
<template> <div> {{ message }} </div></template><script>export default { data() { return { message: 'hello, vue.js!' } }}</script>
在这个例子中，当组件挂载时，vue.js会自动将message属性绑定到模板中。所以，组件的渲染结果将是一个包含hello, vue.js!文本的div元素。
computed属性储存除了普通的data属性外，vue.js还提供了computed属性来储存计算属性。computed属性可以根据一个或多个data属性的值进行计算，并将结果缓存起来。
例如，下面的代码定义了一个名为app的vue.js组件，并在data属性中储存了一个名为firstname和lastname的字符串，以及一个计算属性fullname：
<template> <div> {{ fullname }} </div></template><script>export default { data() { return { firstname: 'john', lastname: 'doe' } }, computed: { fullname() { return `${this.firstname} ${this.lastname}` } }}</script>
在这个例子中，fullname属性根据firstname和lastname的值计算了一个全名，并将结果缓存起来。每当firstname或lastname发生变化时，fullname都会自动重新计算。
methods属性储存vue.js的methods属性可以储存一组类似于函数的方法。与data属性和computed属性不同，methods属性中的方法通常用于处理用户交互事件。
例如，下面的代码定义了一个名为app的vue.js组件，并在methods属性中储存了一个名为greet的方法：
<template> <div> <button @click="greet">greet!</button> </div></template><script>export default { methods: { greet() { alert('hello, vue.js!') } }}</script>
在这个例子中，当用户单击按钮时，vue.js会调用greet方法，并弹出一个包含hello, vue.js!文本的对话框。
props属性储存vue.js的props属性可以储存来自父组件的数据。当组件想要在其父组件中显示数据时，即可使用props属性来储存这些数据。
例如，下面的代码定义了一个名为mybutton的vue.js组件，并在props属性中储存了一个名为text的字符串：
<template> <button>{{ text }}</button></template><script>export default { props: { text: string }}</script>
在这个例子中，mybutton组件可以通过props属性从父组件中获取一个名为text的字符串，并将其显示在button元素中。父组件则可以像下面这样使用mybutton组件并设置其props属性：
<template> <my-button text="click me!"></my-button></template><script>import mybutton from './mybutton.vue'export default { components: { mybutton }}</script>
在这个例子中，父组件可以将一个名为click me!的字符串作为text属性传递给mybutton组件，并将mybutton组件显示为一个带有click me!文本的按钮。
总结
vue.js提供了许多储存数据的方式，包括data属性、computed属性、methods属性和props属性。掌握这些方法可以帮助我们更好地利用vue.js提供的便利工具，实现更好的开发效率。
以上就是总结一些vue.js的储存方法的详细内容。