php网站开发能挣多钱,wordpress最能玩,济南建设网站平台,网站开发文档带er图data 组件的 data 选项是一个函数。Vue 在创建新组件实例的过程中会自动调用此函数。 data选项通常返回一个对象#xff0c;然后 Vue 会通过响应性系统将其包裹起来#xff0c;并以 $data 的形式存储在组件实例中。 !DOCTYPE html
html langen然后 Vue 会通过响应性系统将其包裹起来并以 $data 的形式存储在组件实例中。 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/headscript srchttps://unpkg.com/vue3.4.21/dist/vue.global.js/script
bodydiv idcounterpCounter: {{counter}}/ppnumber: {{number}}/ppcontent: {{content}}/p /div
/bodyscriptconst Counter {data(){return {counter: 45, number: 78,content: 100,}}}Vue.createApp(Counter).mount(#counter);
/script
/html效果: 说明; 声明式地, 将数据填充到 dom 页面内. data(){} return的数据是响应到 html 里面的数据. 数据和 DOM 建立了双向关联, 并且所有的改变都是响应式的. 生命周期函数
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/headscript srchttps://unpkg.com/vue3.4.21/dist/vue.global.js/script
bodydiv idcounterpCounter: {{counter}}/ppnumber: {{number}}/ppcontent: {{content}}/p /div
/bodyscriptconst Counter {data() {return {counter: 1,number: 45,content: 我去,}},mounted() {setInterval(() {this.counterthis.number 2;this.content 可爱;}, 1000)}}Vue.createApp(Counter).mount(#counter);
/script
/html说明: mounted 下设置的 setInterval, 每秒对 counter 1, number 2, content后拼接字符. v-bind 类似 v-bind 的东西称为指令. 指令带有前缀 v-, 表示是 Vue 提供的特殊功能. methods
Vue通过methods 选项为组件实例添加方法选项对应的值是一个“字典”对象对象中的每个元素是你自定义的一系列方法:
const app Vue.createApp({data() {return { count: 4 }},methods: {increment() {// this 指向该组件实例this.count}}
})const vm app.mount(#app)
console.log(vm.count) // 4vm.increment()
console.log(vm.count) // 5Vue 会自动为 methods 绑定 this以便于它始终指向组件实例。这将确保方法在用作事件监听或回调时保持正确的 this 指向。所以在定义 methods 时应避免使用箭头函数因为这会阻止 Vue 绑定恰当的 this 指向。 methods 和组件实例的其它所有属性一样可以在组件的模板中被访问。在模板中它们通常被当做事件监听使用比如
button clickincrementUp vote/button在上面的例子中点击 时会调用 increment 方法。 也可以直接在模板支持 JavaScript 表达式的任何地方调用方法
span :titletoTitleDate(date){{ formatDate(date) }}
/span// 思考一下如果是这样会不会调用toTitleDate方法呢
// span titletoTitleDate(date)
