Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。
值得注意的是，我们所说的数据双向绑定，一定是对于 UI 控件来说的，非 UI 控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用 vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突。
在 Vue.js 中，如果使用 vuex，实际上数据还是单向的，之所以说是数据双向绑定，这是用的 UI 控件来说，对于我们处理表单，Vue.js 的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项，方便跟踪；局部性数据流使用双向，简单易操作。
你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
注意：v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值!
例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>双向绑定</title> </head> <body> <div id="app"> 单行文本：<input type="text" v-model="message"/>{{message}}<br/> 多行文本：<textarea v-model="textMessage"></textarea>{{textMessage}}<br/> 单选框：<input id="checked" type="checkbox" v-model="checkboxIscheck"/> <label for="checked">{{checkboxIscheck}}</label><br/> 多选框：<br/> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" checked> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames" checked> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" checked> <label for="mike">Mike</label> <span>选中的值: {{ checkedNames }}</span><br/> 单选按钮： <input type="radio" id="one" value="one" v-model="picked"/> <label for="one">one</label> <input type="radio" id="two" value="two" v-model="picked"/> <label for="two">one</label> <span>选中的值: {{ picked }}</span> <hr/> 下拉框： <select v-model="selected "> <option disabled>---请选择---</option> <option>-A-</option> <option>-B-</option> <option>-C-</option> </select> <span>选中的值: {{ selected }}</span> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script> var vm = new Vue({ el: "#app", data: { message:"Hello World!", textMessage: "textarea", checkboxIscheck: false, checkedNames: [], picked: [], selected: [] } }) </script> </body> </html>
组件是可复用的 Vue 实例，说白了就是一组可以重复使用的模板，跟 JSTL 的自定义标签、Thymeleaf 的 th:fragment 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织：
做第一组件
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>自定义组件</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <div id="app"> <ul> <component-li v-for="item in message" v-bind:str="item"></component-li> </ul> </div> <script> Vue.component(‘component-li‘,{ props: [‘str‘], template: ‘<li>Hello {{str}}</li>‘ }) var vm = new Vue({ el:"#app", data:{ message: ["张三", "李四", "王五"] } }); </script> </body> </html>
说明：
v-for="item in items"：遍历 Vue 实例中定义的名为 items 的数组，并创建同等数量的组件v-bind:str="item"：将遍历的 item 项绑定到组件中 props 定义的名为 str 属性上；= 号左边的 str为 props 定义的属性名，右边的为 item in items 中遍历的 item 项的值数据流向图
原文：https://www.cnblogs.com/FondWang/p/12344251.html