vue学习笔记

vue核心
数据驱动和视图组件化
为了更好满足当前移动webapp项目的开发需求，MVVM框架诞生
Vue.js的核心实现中使用了ES5的Object.defineProperty特性，IE8及以下版本浏览器不兼容。

创建一个vue实例
1.new Vue() 
2.设置数据data
3.挂载元素 el
4.数据渲染

定义一个vue实例的常用参数选项
1.filters 过滤器
2.computed 计算属性
3.methods 方法 
4.watch 观察监听
 
vue实例的生命周期
1.beforeCreate 数据观察和事件配置都没准备好
2.created 有数据，DOM还没生成
3.beforeMount 即将挂载，DOM生成，数据未渲染
4.mounted 挂载完毕，数据被渲染
5.beforeUpdate 视图并未重新渲染
6.updated 更新渲染视图之后
7.beforeDestroy 销毁组件之前
8.destroyed 成功销毁之后
9.actived keep-alive组件被激活的时候
10.deactived keeep-alive组件停用时调用

在html中绑定数据
1.{{}} Mustache语法
2.v-html 绑定纯html
3.v-bind: 绑定属性
4.支持javascript表达式 加减乘除运算 三元运算符 字符串拼接 
  
常用指令
1.v-text 作用同{{}}
2.v-html 绑定包含html代码的数据（可以解析标签）
3.v-show 用来控制元素的display css属性
4.v-if 控制元素是否需要被渲染出来
如果需要频繁切换显示/隐藏的，就用 v-show ；如果运行后不太可能切换显示/隐藏的，就用 v-if 。
5.v-else
6.v-for 实现列表的渲染
v-for指令除了可以迭代数组，还可以迭代对象和整数。
7.v-bind: 动态绑定属性
8.v-on: 相当于绑定事件的监听器
9.v-model 实现表单控件和数据的双向绑定
10.v-once 只渲染一次

组件
在创建实例vm之前，利用vue提供的API Vue.component()注册组件
通过传参props的方式把数据传到组件，实现数据动态展示
注意：props是单向绑定的（父→子），是vue为了防止子组件无意修改了父组件的数据和状态，如果多个子组件任意地对父组件进行修改，这会让整个应用的数据流难以阅读。    
如果想修改父组件传过来的数据，最好是定义一个局部的变量，来依赖传过来的数据。
通过自定义事件实现子→父组件通信

Vue实例中data属性

new Vue({
  el: '#app',
  data: {
    message: 'message'
  }
})

组件中使用data

export default{
    data(){
        return {
           message: 'message'
        }
    }
}

不使用return包裹的数据会在项目的全局可见，会造成变量污染
使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。
使用return一个初始数据对象的函数，是把最初子组件定义的初始值进行复制
将data封装成一个函数，我们在实例化组件的时候只是调用了这个函数生成的数据副本，这就避免了数据污染。

 

动态绑定class和style
- 绑定class
    * 对象语法  

  <p :class="{'active':isActive,'error':isError}">文字</p>
    data:{
        isActive:true,
        isError:true
    }

    * 数组语法

 <p :class="[activeClass,errorClass]">文字</p>
    data:{
        activeClass:"active",
        errorClass:"error"
    }

- 绑定内联样式style
    * 对象语法

 <p :style="{color:colorStyle,fontSize:fontSize+'px'}">文字</p>
 data:{
      colorStyle:"red",
      fontSize:14
 }

    * 数组语法

  <p :style=[styleA,styleB]>文字</p>
    data:{
        styleA{
            color:"red"
        },
        styleB:{
            font-size:"14px"
        }
    }

--------------------------------------------------

vue可搭配的UI框架
iview 一套基于 Vue的高质量UI 组件库(分为小程序和pc端等不同版本)；
vant 轻量、可靠的移动端 Vue 组件库,是有赞开源的一套基于 Vue 2.0 的 Mobile 组件库,旨在更快、更简单地开发基于 Vue 的美观易用的移动站点。
Ant Design Vue 是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。
elementUI 是基于 Vue 2.0 桌面端中后台组件库