携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第21天点击查看活动详情。

Vue

用于构建用户界面的渐进式JavaScript框架。

想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象。一个容器只能对应一个实例；容器里的代码被称为 Vue 模版。真实开发中只有一个 Vue 实例，并且会配合着组件一起使用； {{XXX}} 中的 XXX 要写JS表达式，且 XXX 可以自动读取到data中的所有属性一旦data中数据改变，那么模版中用到该数据的地方会自动更新

el 两种写法

el : " "
第二种写法：V.$mount(" ")

data两种写法

对象式：data:{ }
函数式：data: function(){ return{ }} 组件必须使用函数式写法，否则会报错

由Vue 管理的函数，一定不要写箭头函数，一旦写了箭头函数，this 就不再是 Vue实例

Vue 模版语法:

插值语法： 用于解析标签体内容，{{XXX}} 中的 XXX 要写JS表达
指令语法： 用于解析标签，v-bind、v-if、v-？？？……

el挂载点data数据methods方法vue会管理el 选项命中的元素，以及其内部的后代元素 (el 用来设置 Vue 实例挂载(管理)的元素) 可以使用其他选择器，建议使用 ID选择器可以使用其他的双标签，不能使用 HTML 和 body，data 数据对象 Vue 中用到的数据定义在 data 中 data 中可以写 复杂类型 的数据渲染复杂类型的数据时，遵守JS 的语法即可。

Vue 指令

v-text、 v-html、v-on v-show、v-if、v-bind

v-text 指令的作用是设置标签内容，默认写法会替换全部内容，使用 差值表达式{{}} 可以替换指定内容
v-html 指令的作用是设置元素的 innerHTML，内容中有 html 结构会被解析为标签。v-text 无论内容是什么，只会解析为文本 (解析文本使用 v-text，解析 html 结构使用 v-html)

事件绑定

v-on 为元素绑定事件指令可以简写为 @ 绑定方法定义在 methods 属性中方法内可以用 this 访问定义在 data 中的数据，methods 中配置的函数，不要使用箭头函数，否则this 就不是 vue 实例了 v-on 传递自定义参数，事件修饰符事件绑定的方法写成__函数调用__ 的形式，可以传入自定义参数定义方法时需要定义形参来接收传入的实参，事件后面跟.修饰符可以对事件进行限制

.enter 限制触发的按键为回车，事件修饰符有多种
绑定事件的时候：@XXX="YYY",YYY可以写一些简单的语句

条件渲染

v-show 原理是修改元素的display，频繁切换使用 值为true 元素显示，为false 元素隐藏数据改变，对应的元素显示状态会更新
v-if 换元素的显示与隐藏(本质是操纵 dom 元素) 表达式的值为true ，元素存在与dom 树中，为 false ，从dom 树中移除性能消耗较大 可以和v-else-if、 v-else一起使用，中间不允许打断

单向绑定

v-bind 设置元素的属性(比如src、title、class) 作用：为元素绑定属性，写法 v-bind：属性名 可以简写为:属性名需要动态增删 class 建议使用对象的方式，列表数据可以使用数组保存

双向绑定

v-model 获取和设置表单元素的值(双向数据绑定) 绑定的数据会和__表单元素__的_值_ 相关联绑定的数据 ←→ 表单元素的值 (通过审查元素快速定位)

列表循环

v-for 列表渲染 __ 根据数据生成列表结构，数组经常和v-for结合使用，语法： (item, index) in 数据 item 和 index 可以结合其他指令一起使用，数组长度更新会同步到页面上可以遍历__数组、对象、字符串(用的较少)、指定次数(用的较少)

列表结构可以通过v-for指令结合数据生成，v-on 结合事件修饰符可以对事件进行限制(比如 .enter) 绑定事件可以传递自定义参数 v-model 可以快速的设置获取表单元素的值

Vue.js学习笔记(壹)

Vue