学习Vue之旅：Day2——双向绑定v-model、组件基础

目录

一、表单输入绑定

二、组件基础

基本示例

组件的复用

data 必须是一个函数

全局注册

代码示例

通过 Prop 向子组件传递数据

---

一、表单输入绑定

指令：

v-model 双向绑定  (只能用于表单类元素，eg：input，textarea……，且这些元素有一个共同特点：都有value值)

官网：你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

通常用法：

v-model:value="xxx"   --------->   可以简写为  v-model=“xxx”

题外话：

v-bind 是单向绑定：数据只能从data流向页面，不能从页面流向data

通常用法：

v-bind:value="xxx"   --------->   可以简写为  ：value=“xxx”

<input v-model="message" placeholder="edit me">      <p>Message is: { { message }}</p>

二、组件基础

基本示例

这里有一个 Vue 组件的示例：

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter&