前端--Vue

Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写

基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上

官网:https://v2.cn.vuejs.org/

Vue快速入门

插值表达式：
形式:{{ 表达式 }

内容可以是:
变量
三元运算符

函数调用

算术运算

Vue常用指令

指令:HTML 标签上带有v-前缀 的特殊属性，不同指令具有不同含义。例如:v-if，v-for...

v-bind

<a v-bind:href="url">传智教育</a>

<a:href="ur1">传智教育</a>

v-model

<input type="text"v-model="url">

注意：通过v-bond或者v-model绑定的变量，必须在数据模型中声明

例如上面的v-model绑定的模型变量是url,如果没有声明，如下图：

v-on

为HTML标签绑定事件

说明：click后面为调用函数，之后在Vue中定义handle方法，handle后定义一个函数function

v-if

条件性的渲染某元素，判定为true时渲染，否则不渲染

依次判断每个条件，如果条件一成立，那么就展示这一块的元素，后面不会再判断；以此类推

v-show

根据条件展示某元素，区别在于切换的是display属性的值

v-for

列表渲染，遍历容器的元素或者对象的属性

说明：v-for=第一个值代表遍历出的元素，该元素名字自定义，in后面代表要遍历的是哪个数组，之后通过插值表达式将遍历的元素在视图层中展示出来

如果要拿到遍历的索引，如上图第二行的方式：addr代表遍历出的元素，index代表遍历的索引

Vue-生命周期

生命周期:指一个对象从创建到销毁的整个过程
生命周期的八个阶段:每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功（发送请求到服务端，加载数据）