Vue2.0一——入门简介、MVVM、安装、组件、模块化

Vue简介

Vue的作者是世界华人的骄傲——尤雨溪，初衷是感到angular的api设计很繁琐 学习曲线很陡峭 
于是就自己开始造轮子 逐渐的14年的时候开源了vue前端开发库
通过简洁的api提供高效的数据绑定和灵活的组件系统

MVVM数据绑定

本质是通过数据绑定链接的view和model 让数据的变化自动映射为试图的更新
在数据绑定的api设计上借鉴了angular的指令机制

<!-- 指令 -->
<span v-text="msg"></span>
<!-- 插值 -->
<span>{{msg}}</span>
<!-- 双向绑定 -->
<input v-model="msg"> 

与Angular不同的是，Vue.js的API里并没有繁杂的module、controller、scope、factory、service等概念，一切都是以“ViewModel 实例”为基本单位

<!-- 模板 -->
<div id="app">
    {{msg}}
</div>
// 创建一个 ViewModel 实例
var vm = new Vue({
    // 选择目标元素
    el: '#app',
    // 提供初始数据
    data:'hello'
})

安装 环境搭建

（1）不使用脚手架
    1. cnpm i vue -S

    2. 单页面应用删除一些不需要的 减chunks 压缩
    
    3. 在app,js里 引入 import Vue from 'vue' 
    cosole.log(Vue)
    测试 npm run dev 
    
    4.在index.html里创建div#root
    
    5.渲染 注册 页面初步渲染
    
    6.import Vue from './Vue/dist/Vue.js'
    
    7.webpack别名配置 webpack.config.js
        resolve:{
            alias:{
                'vue$': 'vue/dist/vue.js'
            }
        }
        改app.js中import Vue from 'vue'
（2）使用脚手架搭建 （推荐，毕竟成熟 省的自己写bug）

    1、安装包工具: yarn替换npm的工具
    2、装yarn: mac：brew install yarn
    3、全局装vue-cli:  yarn install vue-cli
    4、初始化vue项目：
        $:vue init webpack lagou
            一直回车
            vue-router Y
            ESlint No
            Kama N
            e2e N
        $:tree
        $:yarn install
        (yarn 的淘宝镜像)
        $: yarn config set registry https://registry.npm.taobao.org
    5、安装依赖 
        $: yarn install
        $:cnpm i
    6、运行
        $: npm run dev
        
        index.js中的30行 port：4000
        false
        
        cnpm i mint-ui -S
        cnpm i axios -S
        cnpm i sass-loader node-sass -D    

组件

 在大型的应用中，为了分工、复用和可维护性，我们不可避免地需要将应用抽象为多个相对独立的模块。
 在较为传统的开发模式中，我们只有在考虑复用时才会将某一部分做成组件；
 但实际上，应用类 UI 完全可以看作是全部由组件树构成的
 
 组件可以扩展 HTML 元素，封装可重用的代码。
 

1、全局注册组件

 Vue.component('my-component', {
    // 模板
    template: '<div>{{msg}} {{privateMsg}}</div>',
    // 接受参数
    props: {
        msg: String<br>    

    },
    // 私有数据，需要在函数中返回以避免多个实例共享一个对象
    data: function () {
        return {
            privateMsg: 'component!'
        }
    }
})

 <my-component msg="hello"></my-component>       
  渲染结果：
<div>hello component!</div>   

2、模板组件

abc.vue文件中
    <template>
      <div class="my-component">
        <h2>Hello from {{msg}}</h2>
        <other-component></other-component>
      </div>
    </template>
    
    <script>
    // 遵循 CommonJS 模块格式
    var otherComponent = require('./other-component')
    或es6 import otherComponent from './otherComponent'
    // 导出组件定义
    module.exports = {
      data: function () {
        return {
          msg: 'vue-loader'
        }
      },
      components: {
        'other-component': otherComponent
      }
    }
    </script> 
      
    <style>
        .my-component h2 {
          color: red;
        }
    </style>

模块化管理 => es6 & commenjs

es6 >

暴露对象的两种方式
a.
name.js:
    const Name = {}
    export { Name }

app.js
    import { Name } from './name'

b.
name.js
    const Name = {}
    export default Name
app.js
    import name form './name'
注意：一个模块只能有一个default

c.如果是两个
    const Name = {}
    const Age = {}
    
    export { Name, Age as default}
    
    app.js
        import Age,{Name} form './name'    

commenjs >

定义模块：
var Name = {}
module.exports = Name
引用模块：
var name = require ('./name')

如果没有webpack浏览器不能执行 没有require方法

注：webpack是如何将commenjs运行在浏览器中的？
    分析app.js打包后的js
    （ bind只绑定 不执行  call apply 会执行）
    
注：commenjs 与 AMD：
    commenjs相比requirejs规范AMD是静态的，commenjs是同步的，
    但是commenjs规范是运行在node环境下的 没有nodejs就不能运行，
    需要在浏览器端实现，实现工具就是webpack，
    webpack会将commenjs规范翻译成浏览器可以编译的语言，
    借助webpack打包完运行即可，速度快
    AMD是异步的需要一些模块加载完才能调用