vue开发一个功能的基本步骤

Vue开发一个功能的基本步骤: 3步
(1). 定义界面:
a. 要求: 整个界面所有元素必须放在一个唯有的父元素下包裹
习惯上:

…

b. 找到界面内将来可能发生变化的位置，用{ {自定义变量名}}临时占位
c. 找到界面中所有触发事件的元素，用@事件名=“自定义处理函数名"标记
(2). 定义仓库对象: 2个 data和methods
a. data: 专门保存界面中所需的所有变量及其初始值
b. methods: 专门保存界面中所需的所有事件处理函数
因为将来data对象和methods对象会被new Vue()合并为一个对象，所以methods中的事件处理函数，和data中的变量最终会保存在同一个对象中。所以，methods中的事件处理函数可以通过this.变量名操作data中的变量
(3). 创建Vue对象
new Vue({
el:”#app", //选择器: 告诉vue对象要将变量和函数送到页面中哪个元素上。
//告诉vue对象界面所需的一切变量和函数都保存在哪里——仓库位置
data, //data:data,
methods, //methods:methods,
})
4. 简写: 因为data对象和methods对象迟早都要被装进new Vue()对象中，所以实际开发中，我们不单独定义data和methods对象。而是直接在new Vue()中data属性和methods属性值对象中直接添加页面所需变量和事件处理函数:
new Vue({
el:"#app", //选择器: 告诉vue对象要将变量和函数送到页面中哪个大块区域中的元素上。
//告诉vue对象界面所需的一切变量和函数都保存在哪里——仓库位置