基础用法 你可以用v-model指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 提示 v-model 会忽略所有表单元素的 value、checked、selected attribute的初始值而总是将当前活动实例的数据作为数据来源。你应该通过Jav...

监听事件 我们可以使用 v-on 指令(通常缩写为 @ 符号)来监听DOM事件，并在触发事件时执行一些JavaScript。用法为 v-on:click="methodName" 或使用快捷方式 @click="methodName" 例如： <divid="basic-event"> <button@click="counter+=1">Add1</button> <p>Thebuttonabovehasbeenclicked{{counter}}times.</...

基本实例 这里有一个Vue组件的示例： //创建一个Vue应用 constapp=Vue.createApp({}) //定义一个名为button-counter的新全局组件 app.component('button-counter',{ data(){ return{ count:0 } }, template:` <button@click="count"> Youclickedme{{count}}times. </button>` }) INFO 在这里演示的是一个简单的示例，但是在典型的Vue应用程序中，我们使用单个文件组件而不是字符串模板。你可以在...

Prop类型 到这里，我们只看到了以字符串数组形式列出的prop： props:['title','likes','isPublished','commentIds','author'] 但是，通常你希望每个prop都有指定的值类型。这时，你可以以对象形式列出prop，这些property的名称和值分别是prop各自的名称和类型： props:{ title:String, likes:Number, isPublished:Boolean, commentIds:Array, author:Object, callback:Function, contactsPromise:Prom...

插槽内容 Vue实现了一套内容分发的API，这套API的设计灵感源自将 <slot> 元素作为承载分发内容的出口。 它允许你像这样合成组件： <todo-button> Addtodo </todo-button> 然后在 <todo-button> 的模板中，你可能有： <!-todo-button组件模板--> <buttonclass="btn-primary"> <slot></slot> </button> 当组件渲染的时候，将...