vue 基础知识，学习笔记，分享一下

一、vue 简介

1. 渐进式

• 易用 html css javascript
• 高效 开发前端页面 非常高效
• 灵活 开发灵活 多样性

2. Vue 是一个javascript 框架

• 让我们通过操作很少的DOM，甚至不需要操作页面中任何DOM元素，就很容易的完成数据和视图绑定 双向绑定 MVVM
• 响应式的数据驱动（页面是由数据来生成的，当数据改变以后页面会同步的更新）

二、vue 特性 

•  轻量级框架

        Vue.js 能够自动追踪依赖的模板表达式和计算属性，提供 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API

• 指令 

        Vue.js 与页面进行交互，主要就是通过内置指令来完成的，指令的作用是当其表达式的值改变时相应地将某些行为应用到 DOM 上。 

• 组件化 

        组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。 在 Vue 中，父子组件通过 props 传递通信。 

• 双向数据绑定 

        声明式渲染是数据双向绑定的主要体现，同样也是 Vue.js 的核心，它允许采用简洁的模板语法将数据声明式渲染整合进 DOM。 

三、vue 指令 

•  事件绑定(v-on)

事件 事件源：发生事件dom元素

事件：发生特定的动作 click.... 监听器 发生特定动作之后的事件处理程序 通常是js中函数

• 在vue中绑定事件是通过v-on指令来完成的 v-on:事件名 如 v-on:click
• 在v-on:事件名的赋值语句中是当前时间触发调用的函数名
• 在vue中事件的函数统一定义在Vuq实例的methods属性中
• 在vue定义的事件中this指的就是当前的Vue实例,可以在事件中通过使用this获取Vue实例中相关数据 

• v-show和v-if 

• v-if 的特点：每次都会重新删除或创建元素
• v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式
• v-if 有较高的切换性能消耗,v-show 有较高的初始渲染消耗
• 使用场景: 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show; 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if 

• v-for 

V-for:作用就是用来对对象进行遍历的(数组也是对象的一种)

1. v-for循环普通数组

   索引值：{{index}} --- 每一项：{{item}}

2. v-for循环对象数组

   Id：{{ item.id }} --- 名字：{{ item.name }} --- 索引：{{index}}

3. v-for循环对象     在遍历对象身上的键值对的时候， 除了 有 val key ,在第三个位置还有 一个 索引

   值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}

    

• v-text和v-html 

•  v-text:用来获取data中数据将数据以文本的形式渲染到指定标签内部 类似于javascript 中 innerText
• v-html:用来获取data中数据将数据中含有的html标签先解析在渲染到指定标签的内部 类似于javascript中 innerHTML

四、Vue事件修饰符 

•  使用 .stop 阻止冒泡

•  .self只有点击当前元素时候，才会触发事件处理函数

•  使用 .prevent 阻止默认行为

百度一下

• .once 只触发一次事件处理函数

百度一下

 五、Vue样式

• 直接传递一个数组

我是h1

• style样式

我是h1

data {
    styleObj1: { color: 'red', 'font-weight': 200 },
    styleObj2: { 'font-style': 'italic' }
}

•  使用三元表达式

我是h1
使用 对象来代替三元表达式，提高代码的可读性：
我是h1

六、Vue生命周期

•  初始化阶段

• beforeCreate(){} 

        生命周期中第一个函数,该函数在执行时Vue实例仅仅完成了自身事件的绑定和生命周期函数的初始化工作，Vue实例中还没有初始化好data 和 methods 属性

• created(){ }    

        生命周期中第二个函数,该函数在执行时Vue实例已经初始化了data属性和methods中相关关方法，但是还没有挂载到页面中

• beforeMount(){}

        生命周期中第三个函数,该函数在执行时Vue将El中指定作用范围作为模板编译，但是还有完全挂载到页面中

• mounted(){}

        生命周期中第四个函数,该函数在执行过程中,已经将数据渲染到界面中并且已经更新页面，挂载到了页面指定的容器中显示

• 运行阶段

•  beforeUpdate(){}

        生命周期中第五个函数,该函数是data中数据发生变化时执行 这个事件执行时仅仅是Vue实例中data数据变化页面显示的依然是原始数据，因为此时还没有开始重新渲染DOM节点

• updated(){}

        生命周期中第六个函数,该函数执行时data中数据发生变化,页面中数据也发生了变化 页面中数据已经和data中数据一致，界面已经被重新渲染好了

• 销毁阶段

• beforeDestory(){}

        生命周期第七个函数,Vue实例就已经从运行阶段进入到了销毁阶段，Vue中所有数据 methods components 还没有真正执行销毁的过程        

• destoryed(){}

        生命周期的第八个函数,该函数执行时,Vue实例彻底销毁，调用后，vue 实例 指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例也会被销毁