Vue + Webpack

Vue（適合移動端的項目必逆，特點小巧蘸际，不兼容ie）
https://cn.vuejs.org（官網(wǎng)）

基礎代碼（聲明式渲染）

Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式地將數(shù)據(jù)渲染進 DOM 的系統(tǒng)：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="./lib/vue%20(1).js"></script>
<body>
   <div id="app">
       {{message}}
   </div>
<script>
    window.onload= function () {
        var app=new Vue({
            el:'#app',
            data:{
                message:'Hellobejing'
            }
        })
    }
</script>
</body>
</html>

我們已經成功創(chuàng)建了第一個 Vue 應用球及！看起來這跟渲染一個字符串模板非常類似竹捉，但是 Vue 在背后做了大量工作∷腔現(xiàn)在數(shù)據(jù)和 DOM 已經被建立了關聯(lián)豪直，所有東西都是響應式的雇逞。我們要怎么確認呢荤懂？打開你的瀏覽器的 JavaScript 控制臺 (就在這個頁面打開)，并修改 app.message 的值喝峦，你將看到上例相應地更新势誊。
除了文本插值，我們還可以像這樣來綁定元素特性：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="./lib/vue%20(1).js"></script>
<body>
  <div id="app">
    <span v-bind:title="message">//簡寫v-bind：title 可以寫成：title
        鼠標懸停此處查看動態(tài)綁定提示信息
    </span>
  </div>

<script>
var app=new Vue({
    el:'#app',
    data:{
        message:'頁面加載于'+new Date().toLocaleString()
    }
})
</script>
</body>
</html>

 //class宇style是特例  兩者綁定的方式相同舉例如下（注意復合樣式谣蠢，采用駝峰命名法）
//第一種方法
data:{
      c:{color:'red'},
      b:{backgroundColor:'blue'}
    }
<p :style="[c,b]">文字</p>

//第二種方法
  data:{
    json:{
        color:'red',
        backgroundColor:'green'
     }
}
<div class="box">
    <p :style="json">這是個文字</p>
</div>

這里我們遇到了一點新東西粟耻。你看到的 v-bind 特性被稱為指令查近。指令帶有前綴 v-，以表示它們是 Vue 提供的特殊特性挤忙∷可能你已經猜到了，它們會在渲染的 DOM 上應用特殊的響應式行為册烈。在這里戈泼，該指令的意思是：“將這個元素節(jié)點的 title 特性和 Vue 實例的 message 屬性保持一致”。

雙向數(shù)據(jù)綁定

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
 </head>
<script src="./lib/vue%20(1).js"></script>
<body>
<div id="box">
    <input type="text" v-model="msg">
    <br/>
    {{msg}}
</div>
</body>
<script>
    window.onload= function () {
        var vm=new Vue({
            el:'#box',//可以掛在到Class 或者id選擇器或者標簽
            data:{
                msg:'寶劍鋒從磨礪出赏僧，梅花香自苦寒蘭'
            }
        })
    }
</script>
</html>

結合案例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="./lib/vue%20(1).js"></script>
<script type="text/javascript"></script>
<body>
<div id="box"></div>

<script>
    var vm=new Vue({
        el:'#box',
        template:`
        <div>
        <ul>
             <li>{{text1}}</li>
             <li>{{text2}}</li>
        </ul>
       <input type="text" v-model="text2">
        </div>
        `,
        data:{
            text1:'abc',
            text2:'123'
        }
    })
</script>

</body>
</html>

v-for

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="./lib/vue%20(1).js"></script>
<script type="text/javascript"></script>
<body>
<div id="app"></div>
<script>
   var App={
        template:`
        <div>
       數(shù)組
        <ul>
            <li v-for="(hero,index) in heros" :key="index">
                {{hero.name}} {{index}}
            </li>
        </ul>
        對象
        <ul>
            <li>值 | key | 索引</li>
            <li v-for="(value,key,index) in person ":key="index">
                {{value}}{{key}}{{index}}
            </li>
        </ul>
    </div>
        `,
        data: function () {
            return{
                heros:[{id:1 , name:'小京京'},{id:2 , name:'小凱文'},{id:3 , name:'小寶寶'}],
                person:{
                    a:1,
                    b:2
                }
            }
        }
    }
    new Vue({
        el:'#app',
        render: function (c) {
            return c(App);
        }
    })
</script>
</body>
</html>
//vue是根據(jù)當前指定值使用一定的算法大猛，計算，算出一個元素的唯一標識淀零，給定key挽绩，則節(jié)省了運算標識的消耗.

處理用戶輸入

為了讓用戶和你的應用進行交互，我們可以用 v-on 指令添加一個事件監(jiān)聽器驾中，通過它調用在 Vue 實例中定義的方法：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="./lib/vue%20(1).js"></script>
<script>
window.onload= function () {
    var app=new Vue({
        el:'.box',
        data:{
          msg:'helloword'
        },
        methods:{
            reversemsg:function(ev){
                this.msg=this.msg.split('').reverse().join(''),
                console.log(ev.clientX)
            }
        }
    })
}
</script>
<body>
<div class="box">
    <p>{{msg}}</p>
    <button  v-on:click="reversemsg($event)">反轉信息</button>   //v-on：click可以簡寫成為@click
    //@click.stop(阻止冒泡) 或者ev.cancelBubble=true;
   //@click.prevent(阻止默認事件)或者ev.preventDefault();
</div>
</body>
</html>

鍵盤事件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="./lib/vue%20(1).js"></script>
<script>
window.onload= function () {
    var app=new Vue({
        el:'.box',
        data:{
          msg:''
        },
        methods:{
            show:function(ev){
                alert("回車鍵被敲擊了")
            }
        }
    })
}
</script>
<body>
<div class="box">
    <input type="text" @keyup.13="show">
    //@keydown.enter  后面可以是鍵碼或者是具體的名稱
</div>
</body>
</html>

模板

一次性綁定 v-once
<div id="app">
  <p v-once>{{once}}</p>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
  once: 'once content'
    }
  });

  app.once = 'changed content';
</script>
不進行 html 轉義
<div id="app">
  <p v-html="html">不轉義的綁定（直接輸出 html）</p>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      html: '<div>div element</div>'
    }
  });
</script>

render屬性

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="./lib/vue%20(1).js"></script>
<script type="text/javascript"></script>
<body>
<div id="app"></div>
<script>
   var App={
        template:`
        <div>
        <ul>
             <li>{{text1}}</li>
             <li>{{text2}}</li>
        </ul>
        </div>
        `,
        data: function () {
            return{
                text1:'abc',
                text2:'123'
            }
        }
    }
    new Vue({
        el:'#app',
        render:function(createElement){
            return createElement(App);
        }
    })
    //簡潔版1
//       new Vue({
//           el:'#app',
//           render:function(c){
//               return c(App);
//           }
//       })
    //簡潔版2
//       new Vue({
//           el:'#app',
//           render: c => c(App)
//       })
</script>
</body>
</html>

  //var App= {};等同于 var App=Vue.extend ({});(語法糖)

v-text

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="./lib/vue%20(1).js"></script>
<script type="text/javascript"></script>
<body>
<div id="app"></div>
<script>
   var App={
        template:`
        <span v-text="vtext"></span>
        `,
        data: function () {
            return{
                vtext:'<h1>快樂老家</h1>'
            }
        }
    }
    new Vue({
        el:'#app',
        render: function (c) {
            return c(App);
        }
    })
</script>
</body>
</html>
//元素的innerText  唉堪，只能是雙標簽，不會解析標簽

v-html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="./lib/vue%20(1).js"></script>
<script type="text/javascript"></script>
<body>
<div id="app"></div>
<script>
   var App={
        template:`
        <span v-html="vhtml"></span>
        `,
        data: function () {
            return{
                vhtml:'<h1>快樂老家</h1>'
            }
        }
    }
    new Vue({
        el:'#app',
        render: function (c) {
            return c(App);
        }
    })
</script>
</body>
</html>
//元素的innerHtml  肩民，只能是雙標簽 唠亚， 會解析標簽

v-if與v-else

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="./lib/vue%20(1).js"></script>
<script type="text/javascript"></script>
<body>
<div id="app"></div>
<script>
   var App={
        template:`
        <p v-if="isAble">這段話不會存在</p>
        <p v-else>這段話會存在</p>
        `,
        data: function () {
            return{
                isAble:false
            }
        }
    }
    new Vue({
        el:'#app',
        render: function (c) {
            return c(App);
        }
    })
</script>
</body>
</html>

漂亮的列表案例

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .sss{
            background-color: mediumvioletred;
        }
        .ss{
            background-color: cadetblue;
        }
        .s{
            background-color: black;
        }
    </style>
</head>
<script src="./lib/vue%20(1).js"></script>
<script type="text/javascript"></script>
<body>
<div id="app"></div>
<script>
   var App={
        template:`
        <div>
        排名顏色
        <ul>
            <li v-for="(hero,index) in heros" :key="heros.id" :class="{SSS:'sss',SS:'ss',S:'s'} [hero.level]">
                {{hero.name}} {{hero.level}}
            </li>
        </ul>
        奇偶變色
       <ul>
            <li v-for="(hero,index) in heros" :key="heros.id" :class="index%2==0?'sss':'s'">
                {{hero.name}} {{hero.level}}
            </li>
        </ul>
        `,
        data: function () {
            return{
                heros:[{id:1 , name:'小京京',level:'SSS'},
                    {id:2 , name:'小凱文',level:'S'},
                    {id:3 , name:'小寶寶',level:'SS'}],
            }
        }
    }
    new Vue({
        el:'#app',
        render: function (c) {
            return c(App);
        }
    })
</script>
</body>
</html>
// 在做:class  就等于v-bind:class
    - 在內部就可以隨意的獲取data下面的屬性，從而來做判斷
* 設置了一個`{變量值:'樣式1',變量值:'樣式2'}[hero.level]`
* class:
    - 取其一
    + 三元表達式持痰，最終返回字符串
    + 從對象中通過key去取值灶搜，最終返回字符串
- 取多個樣式 (樣式1 樣式2)
    + 對象的方式 `{樣式1:true,樣式2:true}`

components

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="./lib/vue%20(1).js"></script>
<script type="text/javascript"></script>
<body>
<div id="app"></div>
<script>
    var Header={
        template:`
                <div style="background-color:red; height: 200px">

                </div>
            `
    }
    var Body={
        template:`
                <div style="background-color:greenyellow; height: 400px">

                </div>
            `
    }
    var Footer={
        template:`
                <div style="background-color:blanchedalmond; height: 100px">

                </div>
            `
    }
   var App={
        template:`
            <div>
                <header-vue></header-vue>
                <body-vue></body-vue>
                <footer-vue></footer-vue>
            </div>
        `,
       components:{
            'header-vue':Header,
            'body-vue':Body,
            'footer-vue':Footer
       }
    }
    new Vue({
        el:'#app',
        render: function (c) {
            return c(App);
        }
    })
</script>
</body>
</html>

webpack(打包工具)

  webpack  入口文件 出口文件
  `webpack  ./main.js ·/build.js`
webpack.png

webpack模塊化開發(fā)

項目目錄
components.png
    代碼結構
  index.html代碼
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="../vue.js"></script>
<script src="./build.js"></script>
</body>
</html>

  main.js代碼
 //啟動vue
var Vue = require('../vue.js');
var App= require('./App.js');
    new Vue({
        el:'#app',
        render:c=>c(App)
    })

  App.js代碼
 / /入口組件
 var HeaderVue=require('./HeaderVue.js');
 var BodyVue=require('./BodyVue.js');
 var FooterVue=require('./FooterVue.js');
    module.exports = {
        template:`
            <div>
                <header-vue></header-vue>
                <!--我是App組件-->
                <body-vue></body-vue>
                <footer-vue></footer-vue>
            </div>
        `,
        components:{
            'header-vue':HeaderVue,
            'body-vue':BodyVue,
            'footer-vue':FooterVue
        }
    }    

  Header代碼
 //頭組件
 module.exports = {
        template:`<div style="background-color:red;height:150px">
            我是頭
        </div>`
    }

  Body代碼
 //中間組件
 module.exports = {
        template:`<div style="background-color:yellowgreen;height:400px">
            我是主體內容，新聞聯(lián)播共啃，現(xiàn)在開始......
        </div>`
    }
  
  Footer代碼
 //底部組件
 module.exports= {
        template:`<div style="background-color:skyblue;height:150px">
            版權所有占调、違者必究
        </div>`
    }
  
  //首先安裝webpack 首先命令行cd到當前目錄下，使用npm命令行安裝    webpack   $npm i -g webpack  安裝成功之后進入到當前文件命令行移剪，
      webpack ./main.js ./build.js  之后我們把引入的main文件換成build文件

·

    代碼結構
  index.html代碼
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./build.js"></script>
</body>
</html>

  main.js代碼
 //啟動vue
 var Vue = require('../vue.js');
 var App= require('./App.js');
 var Header=require('./HeaderVue.js')
 var Body=require('./BodyVue.js')
 var Footer=require('./FooterVue.js')

 Vue.component('header-vue',Header);
 Vue.component('body-vue',Body);
 Vue.component('footer-vue',Footer);
    new Vue({
        el:'#app',
        render:c=>c(App)
    })


  App.js代碼
 / /入口組件
    module.exports = {
        template:`
            <div>
                <header-vue></header-vue>
                <!--我是App組件-->
                <body-vue></body-vue>
                <footer-vue></footer-vue>
            </div>
        `
    }    

  Header代碼
 //頭組件
 module.exports = {
        template:`<div style="background-color:red;height:150px">
            我是頭
        </div>`
    }

  Body代碼
 //中間組件
 module.exports = {
        template:`<div style="background-color:yellowgreen;height:400px">
            我是主體內容究珊，新聞聯(lián)播，現(xiàn)在開始......
        </div>`
    }
  
  Footer代碼
 //底部組件
 module.exports= {
        template:`<div style="background-color:skyblue;height:150px">
            版權所有纵苛、違者必究
        </div>`
    }
//每次修改東西之后需要重新build

父向子傳遞值

<!DOCTYPE html>
  <html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="./vue.js"></script>
<body>
<div id="app"></div>
<script>
//子組件
var SubVue={
    template:`
    <span>{{msg}}</span>
    `,
    props:['msg']
}

//全局組件
Vue.component('sub-vue',SubVue);

//父組件
var App={
    template:`
    <div>
        <sub-vue msg="我是中國人（父組件傳遞）"></sub-vue>
        <sub-vue :msg="letter"></sub-vue>
    </div>
    `,
    data(){
        return {
            letter:'我愛你'
        }
    }
}

new Vue({
            el:'#app',
            render:c=>c(App)
})
</script>
</body>
</html>

子向父傳遞值

<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="../vue.js"></script>
<script type="text/javascript">
    //App父   Sub 子
    var Sub = {
        template:`
            <div style="background-color:yellowgreen">
                我是子組件
                <button @click="help">呼叫爹地</button>
            </div>
        `,
        methods:{
            help(){
                //呼叫爸爸
                // console.log(this);
                this.$parent.$emit('helpme','路上有巫婆');
            }
        }
    };


    var App = {
        template:`
            <div style="background-color:hotpink">
                我是父組件
                <button @click="listen">孩子走啦剿涮，開始看電話</button>
                <sub-vue></sub-vue>
            </div>
        
        `,
        components:{
            'sub-vue':Sub
        },
        methods:{
            listen(){
                var self = this;
                //$on
                //this 是實例 app
                this.$on('helpme',function(msg){
                    console.log('寶寶說:'+msg);
                    console.log('抄家伙，沖出去');
                    console.log('不再聽電話了');

                    //關閉事件
                    self.$off('helpme');
                });
                // 
                //也可以只觸發(fā)一次
                // this.$once('helpme',function(msg){
                //     console.log('寶寶說:'+msg);
                //     console.log('抄家伙攻人，沖出去');
                // });
            }
        }
    };

    //啟動
    new Vue({
        el:'#app',
        render:c=>c(App)
    })
</script>
</body>
</html>

增刪改查

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  <div id="app"></div>
</body>

<script src="../vue.js"></script>
<script>
var data=[
    {id:'1',name:'黃忠'},{id:'2',name:'扁鵲'},{id:'3',name:'李元芳'}]
var Add={
    template:`
    <div>
        <input type="text" v-model="id"><br/>
        <input type="text" v-model="name"><br/>
        <button @click="addHero">添加</button>
    </div>
    <button>刪除</button>
    `,methods:{
        addHero(){
            data.push({
                id:this.id,
                name:this.name
            })
        }
    },
    data(){
        return{
            id:'',
            name:''
        }
    }
}

var List={
    template:`
    <div>
        <ul>
            <li v-for="(hero,index) in heros" :key="index">
            {{hero.name}}
            <button @click="del(hero.id)">刪除</button>
            </li>
        </ul>
    </div>
    `,
    data(){
        return {
            heros:data
        }
    },methods:{
        del(id){
            var index=data.findIndex(function (ele,index,arr) {
                return ele.id==id;
            });
            data.splice(index,1);
        }
    }
}
var App={
    template:`
        <div>
            我是App父組件
            <list></list>
            <add></add>
            <button @click="change">更新</button>
        </div>
    `,
    components:{
        list:List,
        add:Add
    },methods:{
        change(){
            data[0].name='隨便啦'
        }
    }

}

new Vue({
    el:'#app',
    render:c=>c(App)
})
</script>
</html>

過濾器

Vue.js 允許你自定義過濾器取试，可被用于一些常見的文本格式化。過濾器可以用在兩個地方：雙花括號插值和 v-bind 表達式 (后者從 2.1.0+ 開始支持)怀吻。過濾器應該被添加在 JavaScript 表達式的尾部瞬浓，由“管道”符號指示：

創(chuàng)建 Vue 實例之前全局定義過濾器：（舉例首字母大寫過濾器）
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="./lib/vue%20(1).js"></script>
<body>
<div id="box">
    {{msg|capitalize}}
</div>
<script>
    Vue.filter('capitalize', function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
    })

    new Vue({
        el:'#box',
        data:{
            msg:'helloworld'
        }
    })

</script>
</body>
</html>

·

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="app"></div>

<script src="../vue.js"></script>
<script>
var App={
    template:`
        <div>
        <input type="text" v-model="msg">
           {{msg | myfilter}}
        </div>
    `,
    data(){
        return{
            msg:'123456'
        }
    },
    filters:{
        'myfilter': function (value) {
            var newStr=value.split('').reverse().join('');
            return newStr;
        }
    }
}
new Vue({
    el:'#app',
    render:c=>c(App)
})
</script>
</body>
</html>

全局過濾器

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="app"></div>

<script src="../vue.js"></script>
<script>
var App={
    template:`
        <div>
        <input type="text" v-model="msg">
           {{msg | myfilter}}
        </div>
    `,
    data(){
        return{
            msg:'123456'
        }
    }
}

Vue.filter('myfilter', function (value) {
    var newStr=value.split('').reverse().join('');
    return newStr;
})
new Vue({
    el:'#app',
    render:c=>c(App)
})
</script>
</body>
</html>

watch

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="app"></div>

<script src="../vue.js"></script>
<script>
var App={
    template:`
        <div>
        <input type="text" v-model="msg">
           {{msg}}

        <button @click="change">通過調用函數(shù)更改person.name</button>

        {{person.name}}
        </div>
    `,
    data(){
        return{
            msg:'123456',
            person:{name:'jack'}
        }
    },
    watch:{
        'msg': function (newV,oldV) {
            console.log("更改被監(jiān)視到了",newV)
        },
        'person':{
            handler: function (newV,oldV) {
                console.log("更改監(jiān)視",newV)
            },
            deep:true
        }
    },
    methods:{
        change(){
            this.person.name="rose"
        }
    }
}
new Vue({
    el:'#app',
    render:c=>c(App)
})
</script>
</body>
</html>
//監(jiān)視watch
//* 需求：
//- 監(jiān)視一個值的改變,頁面中的change事件
//* 監(jiān)視單個data中的屬性值的改變
//- 原始數(shù)據(jù)類型 watch:{ 屬性名:fn  }
//- 引用數(shù)據(jù)類型 watch:{  屬性名:{deep:true,handler:fn}

計算屬性

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./../vue.js"></script>
<script>
var App={
    template:`
    <div>
        <input type="text" v-model="n1">+
        <input type="text" v-model="n2">*
        <input type="text" v-model="rate">=
        {{numResult.money}}
    </div>
    `,
    data(){
      return{
          n1:0,
          n2:0,
          rate:0
      }
    },
    computed:{
        'numResult': function () {
            return{
                money:((this.n1-0)+(this.n2-0))*this.rate//-0把字符串拼接變成number值    
            }
        }
    }
}


new Vue({
    el:'#app',
    render:c=>c(App)
})
</script>

</body>
</html>

生命周期

//生命周期
//* 實例:
//      - 1: `new Vue()` vue的實例 （一個）
//- 2: 組件內的this對象，組件對象的實例 （多個）
//
//* 總結
//- beforeCreate 相比created數(shù)據(jù)還未初始化
//- created 相比mounted蓬坡，還未生成DOM
    //+ 可以發(fā)起ajax請求猿棉，獲取數(shù)據(jù)磅叛，變更數(shù)據(jù)，來做裝載
//- beforeMount
//- 裝載中萨赁。弊琴。。杖爽。敲董。生成DOM（包含數(shù)據(jù)）
//- mounted
    //+ 可以操作DOM
//- created用來操作數(shù)據(jù),mounted用來操作DOM


<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<div id="app"></div>

<script type="text/javascript" src="../vue.js"></script>

<script type="text/javascript">
// beforeCreate 創(chuàng)建之前（組件）
// created 創(chuàng)建之后
// beforeMount 裝載之前(數(shù)據(jù)) =  template + data 結合 + 放置到目的地
// mounted 裝載之后

// 在正常順序下不會觸發(fā)的
// beforeUpdate 更新之前(組件數(shù)據(jù))
// updated  更新之后
// activated  激活（組件）
// deactivated  停用（組件）
// beforeDestroy 銷毀之前（組件）
// destroyed  銷毀之后(組件)

var App = {
    data(){
        return {
            text:'hello'
        }
    },
    // beforeCreate(){ //10歲
    //     console.log(this.text); //undefined ,此時沒有完成對數(shù)據(jù)的初始化
    //     // console.log('beforeCreate');
    // },
    created(){ //20歲
        //console.log(this.text); //有數(shù)據(jù),可以操作數(shù)據(jù)
        //this.text = '大家好'; //模擬ajax請求獲取數(shù)據(jù)
        // console.log('created');
        console.log(this.$refs.mydiv);  //DOM還未生成，不能操作DOM
    },
    // beforeMount(){ //30歲
    //     console.log('beforeMount');
    // },
    mounted(){
        //console.log('mounted');
        console.log(this.$refs.mydiv); //可以操作DOM
    },
    template:`<div ref="mydiv">
            我是App慰安，{{text}}
        </div>`
}

new Vue({
            el:'#app',
            render:c=>c(App)
})



</script>
</body>
</html>

獲取元素

* 1: 在template模板中元素上加上 ref="xxx"
* 2: 在函數(shù)腋寨、或者mounted鉤子函數(shù)中 獲取:  this.$refs.xxx 元素
- 如果ref="xxx" 是寫在原生DOM元素上，獲取的就是原生DOM元素
- 如果ref="xxx" 是放在組件標簽上化焕，獲取的就是組件對象

內置組件

* keep-alive
    - 可以將頻繁插入和移除的元素精置，進行緩存，而無需重復的創(chuàng)建和銷毀
    - 其包裹的元素锣杂，就有這個效果，同時也會根據(jù)v-if不同的結果
    - 觸發(fā) 激活和停用事件番宁，此2事件與 destroyed和created互斥

·

總結

* 事件的回調函數(shù) = 鉤子函數(shù)
* beforeCreate 創(chuàng)建之前（組件） 沒有完成數(shù)據(jù)的初始化
* created 創(chuàng)建之后元莫，可以操作數(shù)據(jù)（最佳） v-if="true"
* beforeMount 裝載之前(數(shù)據(jù)) =  template + data 結合 + 放置到    目的地
* mounted 裝載之后，可以操作DOM,給dom元素添加一些事件,    修改某個DOM元素的顯示
* 在正常順序下不會觸發(fā)的
* beforeUpdate 更新之前(組件數(shù)據(jù)),盡量少用
* updated  更新之后,盡量少用
* activated  激活（組件）配合keep-alive內置組件來使用,將組    件數(shù)據(jù)緩存到js內存中
* deactivated  停用（組件）配合keep-alive內置組件來使用
* beforeDestroy 銷毀之前（組件） v-if="false"
* destroyed  銷毀之后(組件)

* 創(chuàng)建蝶押、激活 根據(jù)v-if="true"來決定
* 銷毀踱蠢、停用 根據(jù)v-if="false"來決定
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<div id="app"></div>

<script type="text/javascript" src="../vue.js"></script>

<script type="text/javascript">
// beforeCreate 創(chuàng)建之前（組件）
// created 創(chuàng)建之后
// beforeMount 裝載之前(數(shù)據(jù)) =  template + data 結合 + 放置到目的地
// mounted 裝載之后

// 在正常順序下不會觸發(fā)的
// beforeUpdate 更新之前(組件數(shù)據(jù))
// updated  更新之后
// activated  激活（組件）
// deactivated  停用（組件）
// beforeDestroy 銷毀之前（組件）
// destroyed  銷毀之后(組件)

var SubVue = {
    template:`<div>
            我是子組件
        </div>`,
    beforeDestroy(){
        console.log('beforeDestroy');
    },
    destroyed(){  //殺豬   ，放豬
        console.log('destroyed');
    },
    created(){   //買豬    棋电，關豬
        console.log('created');
    },
    beforeCreate(){
        console.log('beforeCreate');
    },
    activated(){
        console.log('激活了activated');
    },
    deactivated(){
        console.log('停用了deactivated');
    }
}
//注冊全局組件
Vue.component('sub-vue',SubVue);

var App = {
    data(){
        return {
            text:'hello',
            isAble:true
        }
    }
    // ,
    //更新后茎截，不建議，做二次更新
    // beforeUpdate(){
    //     console.log('beforeUpdate')
    // },
    // updated(){
    //     console.log('updated')
    // }
    ,template:`<div ref="mydiv">
            我是App赶盔，{{text}}
            <button @click="change">更改Text的值</button>
            <keep-alive>
                <sub-vue v-if="isAble"></sub-vue>
            </keep-alive>
            <button @click="isAble = !isAble">銷毀或常見子組件</button>
        </div>`
    ,methods:{
        change(){
            this.text = 'abc';
        }
    }
}

new Vue({
            el:'#app',
            render:c=>c(App)
})



</script>
</body>
</html>

vue-router

//index.html
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="app"></div>
<!-- 引1個包 -->
<script type="text/javascript" src="./build.js"></script>
</body>
</html>

//main.js
//引入Vue
var Vue = require('../vue.js');
//引入VueRouter
var VueRouter = require('../vue-router.js');
var App = require('./App.js');

//安裝插件
Vue.use(VueRouter); //掛載一些屬性企锌，供組件使用其功


//創(chuàng)建路由對象
var router = new VueRouter({
//配置路由規(guī)則
routes: [{
    path: '/music',
    component: { //組件內容，也可以引入
        template: `
            <div>
                我是音樂于未，在人民廣場吃炸雞撕攒！
            </div>
        `
    }
},{
    path: '/movie',
    component: { //組件內容，也可以引入
        template: `
            <div>
                我是電影烘浦， 摔跤吧爸爸抖坪！
            </div>
        `
    }
}]
});

//把路由對象交給vue
new Vue({
    el:'#app',
    router:router,
    render:c=>c(App)
})


//App.js
module.exports = {
    template:`
       <div>
             我是App主體
        以下是變化的內容，留坑
      <router-view></router-view>
   </div>

`
}

router步驟
    - 1: 引入對象
    -  `var VueRouter = require('vue-router/dist/vue-router.common.js');`
    - 2: 安裝插件 `Vue.use(VueRouter);`
        + 會給this(組件對象掛載一些對象,具備一些功能)
    - 3:創(chuàng)建路由對象 `var router3 = new VueRouter(路由規(guī)則);`
    - 4:配置路由規(guī)則  `routes:[ {path:'/home',component:Home }  ]   `
    - 5:將配置好規(guī)則的路由對象交給Vue的實例構造函數(shù)參數(shù)中 
        + `new Vue({  router:router3 })`
    - 6: 留坑 `<router-view></router-view>`
*

router-link

//index.html
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<div id="app"></div>
<script type="text/javascript" src="build.js"></script>
</body>
</html>

//main.js
var Vue = require('vue/dist/vue.common.js');
var VueRouter = require('vue-router/dist/vue-router.common.js');


var App = require('./App.js');
var Home = require('./Home.js');
var Music = require('./Music.js');
var Movie = require('./Movie.js');


//安裝插件
Vue.use(VueRouter);

//創(chuàng)建路由對象
var router = new VueRouter({
routes:[
    {  path:'/',component:Home  },   //Home有頭中底
    {  path:'/music',component:Music },
    {  path:'/movie',component:Movie },
]
});

new Vue({
el:'#app',
router,
render:c=>c(App)
})

//App.js
module.exports = {
template:`
    <div>
        我是App
        <router-view></router-view>   
    </div>

`
}

//home.js
module.exports = {
template:`
    <div>
        <div style="background-color:hotpink;">
           <!-- <a href="#/music">音樂</a>
            <a href="#/movie">電影</a> 
            -->
        
            <router-link to="/music">音樂</router-link>
            <router-link to="/movie">電影</router-link>


        </div>
        <div style="background-color:yellowgreen;">正在熱播....</div>
        <div style="background-color:skyblue;">版權所有違者必究</div>
    </div>
`
}

//music.js
module.exports = {
template:`
    <div>
        我是音樂
    </div>

`
}
//movie.js
module.exports = {
template:`
    <div>
        我是電影
    </div>

`
}


#### router-link
* vue-router內置組件,可以根據(jù)to的屬性生成a標簽及其href,讓我們不用擔心是#還    是#!等等等闷叉。擦俐。
* `<a href="#!/xxxx">xxx</a>`
* `<router-link to="/xxxx">xxx</router-link>`

router-named

//index.html
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<!-- <router-link to="/music">音樂</router-link>
<router-link :to="{ name:'music' }" >音樂</router-link> -->




<div id="app"></div>
<script type="text/javascript" src="build.js"></script>
</body>
</html>

//App.js
module.exports = {
template:`
    <div>
        我是App
        <router-view></router-view>   
    </div>

`
}

//home.js
module.exports = {
 template:`
    <div>
        <div style="background-color:hotpink;">

           <router-link :to=" {name:'music'} ">音樂</router-link>
           <router-link :to=" {name:'music'} ">音樂</router-link>
           <router-link :to=" {name:'music'} ">音樂</router-link>
           <router-link :to=" {name:'movie'} ">電影</router-link>
           <router-link :to=" {name:'movie'} ">電影</router-link>
           <router-link :to=" {name:'movie'} ">電影</router-link>

        </div>
        <div style="background-color:yellowgreen;">正在熱播....</div>
        <div style="background-color:skyblue;">版權所有違者必究</div>
    </div>
`
}

//main.js
module.exports = {
   template:`
    <div>
        <div style="background-color:hotpink;">

           <router-link :to=" {name:'music'} ">音樂</router-link>
           <router-link :to=" {name:'music'} ">音樂</router-link>
           <router-link :to=" {name:'music'} ">音樂</router-link>
           <router-link :to=" {name:'movie'} ">電影</router-link>
           <router-link :to=" {name:'movie'} ">電影</router-link>
           <router-link :to=" {name:'movie'} ">電影</router-link>

        </div>
        <div style="background-color:yellowgreen;">正在熱播....</div>
        <div style="background-color:skyblue;">版權所有違者必究</div>
    </div>
`
}
//mocie.js
module.exports = {
template:`
    <div>
        我是電影
    </div>

`
}
//music.js
module.exports = {
template:`
    <div>
        我是音樂
    </div>

`
}



#### 命名路由
* 通過name屬性去尋找路由規(guī)則，獲取其path屬性握侧，作為a標簽的href屬性
* 生成:
- 操作  `<router-link :to=" {name:'bj'} "`  (去哪里玩呢?)
- 規(guī)則  ` { name:'bj',path:'/beijing',component:BeiJing}   ` (導航)
- 生成  `根據(jù)name屬性找到對象蚯瞧，獲取path生成a的href`
    + `#/beijing`
* 減少維護URL的成本

#### 關于屬性賦值的總結
* 常量賦值: 不綁定屬性嘿期，直接給值  xxx='abc'
* 變量賦值: 綁定屬性 :xxx="變量名"

查詢字符串的顯示

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="build.js"></script>
</body>
</html>

//App.js

module.exports={
template:`
<div>
    <router-view></router-view>
</div>
`
}
//main.js
var Vue = require('vue/dist/vue.common.js');
var VueRouter = require('vue-router/dist/vue-router.common.js');
//通過加載的相對路徑獲取絕對路徑
// console.log( require.resolve('vue-router')  );
var App = require('./App.js');
var List = require('./List.js');
var Detail = require('./Detail.js');

//安裝插件
Vue.use(VueRouter);

//創(chuàng)建路由對象
var router = new VueRouter({
routes:[
    { path:'/',component:List },
    { name:'detail',path:'/detail',component:Detail},
    { name:'detail2',path:'/detail2/test/:myid',component:Detail}
]
});


//啟動vue
new Vue({
el:'#app',
router,
render:c=>c(App)
})
//Detail.js
module.exports = {
template:`
    <div>
        我是詳情
    </div>
`,
data(){
    return {
        text:''
    }
},
// beforeCreate(){
//     this.text = 'abc'; //undefined
//     //獲取路由參數(shù)，并顯示在頁面
// }

//完成數(shù)據(jù)觀察
created(){
    console.log(this.$route.query);
    // 1:去哪里 {name:'detail2',params:{myid:hero.id}   }
    //2:導航{ name:'detail2',path:'/detail2/test/:myid',component:Detail}
    console.log(this.$route.params );
}
}

//List.js

module.exports = {
    template:`
        <div>
        查詢字符串
            <ul>
                <li v-for="(hero,index) in heros" :key="hero.id"  >
                    {{hero.name}}  <router-link :to=" {name:'detail',query:{id:hero.id}   } " >查看詳情</router-link>
                </li>      
            </ul> 

    <hr/>
    路徑方式
        <ul>
            <li v-for="(hero,index) in heros" :key="hero.id"  >
                {{hero.name}}  <router-link :to=" {name:'detail2',params:{myid:hero.id}   } " >查看詳情</router-link>
            </li>      
        </ul> 

    </div>
`,
data(){
     //干掉:function状知，this指向一致
     return {
        heros:[ {id:1,name:'小粑粑'} ,{id:2,name:'大雄'},{id:3,name:'胖虎'}]
     }
}
}
String.png
path.png

多視圖

//index.html
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<div id="app"></div>
<script type="text/javascript" src="build.js"></script>
</body>
</html>

//main.js
var Vue = require('../vue.js');
var VueRouter = require('../vue-router.js');


var App = require('./App.js');

var HeaderVue = require('./HeaderVue.js');
var BodyVue = require('./BodyVue.js');
var FooterVue = require('./FooterVue.js');

//全局組件
// Vue.component('header-vue',HeaderVue);
// Vue.component('body-vue',BodyVue);
// Vue.component('footer-vue',FooterVue);



//安裝插件
Vue.use(VueRouter);

//創(chuàng)建路由對象
var router = new VueRouter({
routes:[
    { 
        path:'/',components: {
            'a':FooterVue,
            'b':HeaderVue,
            'default':BodyVue
        } 
    }
]
});

new Vue({
el:'#app',
router,
render:c=>c(App)
})


//App/jsmodule.exports = {
template:`
    <div>
        <router-view name="a"></router-view>
        <router-view name="b"></router-view>
        <router-view></router-view>
    </div>

`,
}


//Header Body Footer

module.exports = {
template:`
  <div>
        頭部/中部/底部

  </div>
`
}
#### 多視圖(命名視圖)
* 更為靈活的維護秽五，靈活的配置修改顯示的效果
* 區(qū)分component和components
- component填一個坑 組件對象
- components填多個坑 是一個對象`{坑名:組件}`

嵌套路由 與頁面的重定向和404

//index.html
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="build.js"></script>
</body>
</html>

//main.js
var Vue=require('../vue.js');
var VueRouter=require('../vue-router.js');

var App=require('./App.js');
var Home=require('./Home.js');
var Music=require('./Music.js');
var Movie=require('./Movie.js');
var NotFount=require('./NotFount.js')

Vue.use(VueRouter);

var router=new VueRouter({
routes:[
    {path:'/',redirect:'/home'},//頁面的重定向 一開始默認進入頁面時顯示的頁面     redirect:'/home'

    {path:'*',component:NotFount},//當頁面404的時候顯示的友好頁面
    {name:'home',path:'/home',component:Home,
    children:[
        {name:'home.music',path:'music',component:Music},
        {name:'home.movie',path:'movie',component:Movie}
    ]
}]
});

new Vue({
el:'#app',
router:router,
render:c=>c(App)
})


//App.js
module.exports = {
template:`
    <div>
        <router-view></router-view>
    </div>
`
}

//Home.js

module.exports = {
template:`
    <div>
        歡迎來到首頁
        
        <router-link :to="{ name:'home.music'}">音樂</router-link>
        <router-link :to="{ name:'home.movie'}">電影</router-link>

        <hr/>
        <router-view></router-view>   
    </div>
`
}

//Movie/Music.js
module.exports = {
template:`
    <div>
        music / movie
    </div>
`
}

//NOtFount.js

/**
 * Created by Administrator on 2018/2/28.
 */
module.exports = {
template:`
    <div>
       您要找的頁面去旅行了
    </div>

`,
    }


#### 嵌套路由
* 案例
    - 進入我的主頁顯示：電影、歌曲
* 1: 視圖包含視圖（保證坑）
* 2: 路由包含子路由 （錨點值）
    - 父子路由都要映射組件 （顯示內容）
### 重定向及404
* 404:所有規(guī)則都匹配不上饥悴，最后一條生效
* 路由規(guī)則對象中坦喘，有屬性redirect
* `{  redirect:{ name:'xxx'} } ` 一般寫在規(guī)則的前面，跳轉的寫在其后面

編程導航

//index.html
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
        <div id="app"></div>
        <script type="text/javascript" src="build.js"></script>
</body>
</html>

//main.js
var Vue = require('vue/dist/vue.common.js');
var VueRouter = require('vue-router/dist/vue-router.common.js');

var App = require('./App.js');
var Home = require('./Home.js');

//安裝插件
Vue.use(VueRouter);


//創(chuàng)建路由對象
var router = new VueRouter({
    routes:[
        { name:'home', path:'/home',component:Home},
    ]
});

new Vue({
    el:'#app',
    router,
    render:c=>c(App)
})

//App.js

module.exports = {
template:`
    <div>
        <button @click="$router.go(1)">下一頁</button>
       輸入: <input type="text" @change="change" v-model="hash" />
        <router-view></router-view>
    </div>
`,
methods:{
    change(){
        if(this.hash != '123456'){
            //密碼錯誤西设，不給予跳轉
            alert('操作失敯晗场！');
        }else{
            //$route 獲取信息  $router  行為操作
            this.$router.push({
                name:'home'
            });  //改變錨點值贷揽，跳轉到/home
        }
    }
},
data(){
    return {
        hash:''
    }
}
}

//home.js

module.exports = {
    template:`
    
    <div>
        <button @click="goBack">返回默認頁</button>
        我是首頁
    </div>
`,
methods:{
    goBack(){
        //借助history歷史記錄
        this.$router.go(-1);
    }
}
}


#### 編程式導航
* 改變錨點 `this.$router.push({ name:'xx' })`
* 根據(jù)歷史記錄跳轉 `this.$router.go(-1||1);`  前進或后退

webpack：

使用配置文件設置出入口

//index.html
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript" src="build.js"></script>
</body>
</html>

//main.js
var cal = require('./cal.js');
console.log(cal.add(8,7));

//cal.js

module.exports = {
    add(n1,n2){
        return n1 + n2;
    }
}

//weboack.config.js
// 運行的環(huán)境是node
'use strict';
module.exports = {
    //配置對象
    entry:{//入口
        //入口之一
        'test1233':'./main.js'
    },
    //出口（產出）
    output:{
        //生成的js文件名
        filename:'./build.js'
    }
}

css-loader

首先我們在文件打開命令行 npm i css-loader style-loader -D    

//index.html
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
     <script type="text/javascript" src="build.js"></script>
</body>
</html>

//index.css
body{
    background-color: yellowgreen;
}

//main.js
require('./index.css');

//webpack.config.js
module.exports = {
entry:{
    'main':'./main.js'
},
output:{
    filename:'./build.js'
},
//模塊棠笑，對象
module:{
    //一堆加載器 loaders
    loaders:[
        //解析css
        {
            //匹配條件  './index.css'
            test:/\.css$/, //以.css結尾的文件
            loader:'style-loader!css-loader',
            //代碼順序是1,2    執(zhí)行順序  2,1,順序不要搞凡

        }

    ]
}
}

less-loader

首先我們在文件打開命令行 npm i less-loader less -D

//index.html
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
     <script type="text/javascript" src="build.js"></script>
</body>
</html>

//index.less
@color:skyblue;
body{
    background-color: @color;
}

//main.js
require('./index.less');

//webpack.config.js
    module.exports = {
        entry:{
            'main':'./main.js'
        },
        output:{
            filename:'./build.js'
        },
        //模塊，對象
        module:{
            //一堆加載器 loaders
            loaders:[
                //解析css
                {
                    //匹配條件  './index.css'
                    test:/\.css$/, //以.css結尾的文件
                    loader:'style-loader!css-loader',
                    //代碼順序是1,2    執(zhí)行順序  2,1,順序不要搞凡

                },
                {
                    test:/\.less$/,
                    loader:'style-loader!css-loader!less-loader',
                }

            ]
        }
    }

解析文件

//首先我們 npm i url-loader file-loader -D
//webpack.cpnfig.js
module.exports = {
        entry:{ //入口
            'main':'./src/main.js'
        },
        output:{ //產出
            path:'./dist',   //輸出目錄   使用好像會報錯 現(xiàn)在不能用了好像
            filename:'build.js' //js文件名
        },
        //模塊禽绪，對象
        module:{
            //一堆加載器 loaders
            loaders:[
                //解析css
                {
                    //匹配條件  './index.css'
                    test:/\.css$/, //以.css結尾的文件
                    loader:'style-loader!css-loader', 
                    //代碼順序是1,2    執(zhí)行順序  2,1,順序不要搞凡
    
                },
                {
                    test:/\.less$/, 
                    loader:'style-loader!css-loader!less-loader', 
                },
                {
                    //通過url-loader來依賴file-loader
                    //如果url-loader滿足條件蓖救，則將文件生成base64編碼
                    //如果url-loader不滿足條件，則新生成原文件
                    test:/\.(jpg|png|svg|ttf|gif)$/,
                    loader:'url-loader?limit=4096&name=[name].[ext]', //依賴file-loader內部由url來判斷調用
                    //limit=4096 資源再4096btye以下生成base64,以上則生成文件
                    //[name].[ext] 原名.原后綴名
                }
    
            ]
        }
    }

//src/index.html

        <html>
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
        </head>
        <body>
            <script type="text/javascript" src="build.js"></script>
        </body>

//src/index.css
        body{
        background-image: url('./1.jpg');
    }

//src/main.js
require('./index.css');




#### 處理文件 + base64
* 將文件以base64加密,好處:減少請求次數(shù)
* 圖片在經過加密后印屁，會在原大小基礎上循捺，增加三分之一左右
* 應用場景:
- 針對不大的圖片，而頻繁需要使用的場景
- 4096b  4kb

特殊符號

* 字符串內存在!   代表分隔多個
* 字符串內存在?   代表參數(shù) ?key=value&key=value
* 字符串內& 還是并且的意思

字符串內使用的內置變量

* 在字符串內使用`[name]` 文件的原名
* `[ext]` 文件原后綴名
* output:{}
- path  資源輸出路徑
- filename  js文件名

html插件

//首先我們 npm i html -webpack-plugin -D
//然后再次npm i webpack -D
//webpack.config.js
'use strict';
    const htmlWebpackPlugin = require('html-webpack-plugin');
    
    
    module.exports = {
        entry:{ //入口
            'main':'./src/main.js'
        },
        output:{ //產出
            filename:'build.js' //js文件名
        },
        //模塊雄人，對象
        module:{
            //一堆加載器 loaders
            loaders:[
                //解析css
                {
                    //匹配條件  './index.css'
                    test:/\.css$/, //以.css結尾的文件
                    loader:'style-loader!css-loader',
                    //代碼順序是1,2    執(zhí)行順序  2,1,順序不要搞凡
    
                },
                {
                    test:/\.less$/,
                    loader:'style-loader!css-loader!less-loader',
                },
                {
                    //通過url-loader來依賴file-loader
                    //如果url-loader滿足條件从橘，則將文件生成base64編碼
                    //如果url-loader不滿足條件，則新生成原文件
                    test:/\.(jpg|png|svg|ttf|gif)$/,
                    loader:'url-loader?limit=4096&name=[name].[ext]', //依賴file-loader內部由url來判斷調用
                    //limit=4096 資源再4096btye以下生成base64,以上則生成文件
                    //[name].[ext] 原名.原后綴名
                }
    
            ]
        },
        plugins:[
            //一堆插件中的一個础钠，第一個執(zhí)行
            new htmlWebpackPlugin({
                //參照模板
                template:'./src/index.html'
            })
    
        ]
    }
#### 處理html
*  npm i html-webpack-plugin -D
*  在配置文件中恰力，引入這個對象
*  在webpack配置對象的根屬性中，設置plugins:[ new 以上對象(options)]
*  插件數(shù)組元素的順序旗吁，與代碼的執(zhí)行順序一致
*  `options:{  template:'./src/index.html' //參照物 }`

處理es6

//首先我們npm i babel-loader babel-core babel-preset-env babel-plugin-transform-runtime -D
//'use strict';
    const htmlWebpackPlugin = require('html-webpack-plugin');
    
    const path = require("path")
    module.exports = {
        entry:{ //入口
            'main':'./src/main.js'
        },
        output:{ //產出
            path:path.resolve("./dist"),   //輸出目錄
            filename:'build.js' //js文件名
        },
        //模塊踩萎，對象
        module:{
            //一堆加載器 loaders
            loaders:[
                //解析css
                {
                    //匹配條件  './index.css'
                    test:/\.css$/, //以.css結尾的文件
                    loader:'style-loader!css-loader', 
                    //代碼順序是1,2    執(zhí)行順序  2,1,順序不要搞凡
    
                },
                {
                    test:/\.less$/, 
                    loader:'style-loader!css-loader!less-loader', 
                },
                {
                    //通過url-loader來依賴file-loader
                    //如果url-loader滿足條件，則將文件生成base64編碼
                    //如果url-loader不滿足條件很钓，則新生成原文件
                    test:/\.(jpg|png|svg|ttf|gif)$/,
                    loader:'url-loader?limit=4096&name=[name].[ext]', //依賴file-loader內部由url來判斷調用
                    //limit=4096 資源再4096btye以下生成base64,以上則生成文件
                    //[name].[ext] 原名.原后綴名
                },
                //處理js
                {   
                    test:/\.js$/,
                    loader:'babel-loader',
                    //排除node_modules目錄
                    exclude:/node_modules/,
                    //設置語法預設驻民、函數(shù)插件
                    options:{
                        //處理語法部分
                        presets:['env'],//處理es2015/2016/2017語法部分
                        plugins:['transform-runtime'],//處理函數(shù)部分
                    }
                }
            ]
        },
        plugins:[
            //一堆插件中的一個，第一個執(zhí)行
            new htmlWebpackPlugin({
                //參照模板
                template:'./src/index.html'
            })
    
        ]
    }
//main.js
    let num = 1;
    const num2 = 2;
    let fn = ()=>{
        return 1;
    }
    
    let num3 = Math.trunc(3.165);
    console.log(num3);
    
    new Promise(function(resolve,reject){
    
    });



   #### ES6
   * const let Math.trunc

   #### babel語法轉換器
   * es6/es7/react
   * 設置語法  es6
   * 通過插件設置 轉換函數(shù)
   * 通過webpack 將所有的js代碼履怯，進行轉換,babel-loader回还，其依賴于babel-core
   * 語法babel-preset-es2015(babel-preset-env:包含了所有(es6/es7/es8)   )  
       - es2015/es2016/es2017
   * 函數(shù)babel-plugin-transform-runtime
   * babel-loader babel-core babel-preset-env babel-plugin-transform-runtime

引入vue

//首先倒入依賴包 npm i vue-template-compiler vue-loader -D


//index.html
<html>
<head>
    <meta charset="UTF-8">
    <title>單文件</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>
//main.js
const Vue = require('vue/dist/vue.runtime.common.js');

//App組件
const App = require('./App.vue').default;  //以vue結尾的加上default
//  module.exports = { default:{xxxx}   } = export default App;
// console.log(App); //{  default:組件的options }

new Vue({
    el:'#app',
    render:c=>c(App)
});

//app.css
#d1{
     background-color: yellowgreen;
 }
//正常app.js用來對比app.vue
// css
require('./app.css');

module.exports = {
    //HTML
    template:`
        <div id="d1">
            我是App.js組件   
        </div>
  `,
  //jS
  created(){
    console.log('我是App.js組件  ');
  }
}

//app.vue
<style>
    #d2{
        background-color: skyblue;
    }
</style>

<template>
    <div id="d2">
        我是app.vue組件
    </div>
</template>

<script>
    module.exports = {
        created(){
            console.log('我是app.vue組件')
        }
    }

</script>

//webpack.cpnfig.js
'use strict';
const htmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
    entry:{ //入口
        'main':'./src/main.js'
    },
    output:{ //產出
        path:'./dist',   //輸出目錄
        filename:'build.js' //js文件名
    },
    //模塊，對象
    module:{
        //一堆加載器 loaders
        loaders:[
            //解析css
            {
                //匹配條件  './index.css'
                test:/\.css$/, //以.css結尾的文件
                loader:'style-loader!css-loader', 
                //代碼順序是1,2    執(zhí)行順序  2,1,順序不要搞凡

            },
            {
                test:/\.less$/, 
                loader:'style-loader!css-loader!less-loader', 
            },
            {
                //通過url-loader來依賴file-loader
                //如果url-loader滿足條件叹洲，則將文件生成base64編碼
                //如果url-loader不滿足條件柠硕，則新生成原文件
                test:/\.(jpg|png|svg|ttf|gif)$/,
                loader:'url-loader?limit=4096&name=[name].[ext]', //依賴file-loader內部由url來判斷調用
                //limit=4096 資源再4096btye以下生成base64,以上則生成文件
                //[name].[ext] 原名.原后綴名
            },
            //處理js
            {   
                test:/\.js$/,
                loader:'babel-loader',
                //排除node_modules目錄
                exclude:/node_modules/,
                //設置語法預設、函數(shù)插件
                options:{
                    //處理語法部分
                    presets:['env'],//處理es2015/2016/2017語法部分
                    plugins:['transform-runtime'],//處理函數(shù)部分
                }
            },
            {
                //處理vue
                test:/\.vue$/,
                loader:'vue-loader', //依賴vue-template-compiler
            }
        ]
    },
    plugins:[
        //一堆插件中的一個，第一個執(zhí)行
        new htmlWebpackPlugin({
            //參照模板
            template:'./src/index.html'
        })

    ]
}



#### 單文件方式
* 引包的方式（方式一）
    - var 組件 = {}
* 淺嘗webpack 
    - 解析commonjs (組件 + 模塊的使用)
* 單文件方式（方式二）
    - 以App.vue方式來編寫代碼 （結合webpack來編寫）
    - 主流方式
    * 注意 在引入.vue的文件的時候蝗柔，加上.default來獲取options對象
* 原因在于 在vue-loader中闻葵，默認是以ES6導出的，而我們以commonjs引入的癣丧，
* 由于webpack最終會把es6轉換成commonjs中的module.exports.default = App組件

總結

//index.html
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app"></div> 
</body>
</html>
//main.js
const Vue = require('../vue.js');

const VueRouter = require('../vue-routerjs');
// const VueRouter = require('vue-router').default;

//因為組件槽畔，是.vue文件，而其是被vue-loader加載胁编，又因為厢钧，vue-loader向外導出的方式是es6的模塊
//所以，我們require最終拿到的是  module.exports ->  { default:對象  }
//ES6模塊導出代碼     export default 對象 嬉橙，es6模塊導出早直，就是一個對象，default是其中的屬性

const App = require('./App.vue').default;
const Home = require('./Home.vue').default;



//安裝插件
Vue.use(VueRouter);

//創(chuàng)建路由對象
let router = new VueRouter({
    routes:[
        { path:'/',redirect:{ name:'home'} },
        { name:'home',path:'/home',component:Home }
    ]
});

new Vue({
    el:'#app',
    router,
    render:c=>c(App)
})

//Home.vue
<template>
    <div>
        我是home首頁
    </div>
</template>
<script>
    module.exports = {

    }
</script>
<style scoped>
    /*讓樣式只在當前的Template中生效市框，可以在style上加上一個scoped*/
     div{
        background-color: hotpink;
    }
</style>

//App.vue
<template>
    <!-- 必須1個[根]節(jié)點 -->
    <div>
        我是app.vue啊啊啊
        <router-view></router-view>
    </div>
</template>
<script>
    // 首先寫上導出
    module.exports = {

    }
</script>
<style scoped>
/*讓樣式只在當前的Template中生效霞扬，可以在style上加上一個scoped*/
   div{
        background-color: yellowgreen;
    }
</style>

//webpack.config.js
'use strict';
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry:{
        'main':'./src/main.js'
    },
    output:{
        path:path.resolve('./dist'),
        filename:'build.js'
    },
    module:{
        
        loaders:[
            //css
            {
                test:/\.css$/,
                loader:'style-loader!css-loader'
            },
            //less
            {
                test:/\.less/,
                loader:'style-loader!css-loader!less-loader'
            },
            //file
            {
                test:/\.(jpg|png|svg|gif)$/,
                // loader:'url-loader?limit=4096&name=[name].[ext]'
                loader:'url-loader',
                options:{
                    limit:4096,
                    name:'[name].[ext]'
                }
            },
            //js
            {
                test:/\.js$/,
                loader:'babel-loader',
                //排除掉node_modules
                exclude:/node_modules/,
                options:{
                    presets:['env'], //轉換語法關鍵字
                    plugins:['transform-runtime'] //轉換函數(shù)
                }
            },
            //vue
            {
                test:/\.vue/,
                loader:'vue-loader'
            }
        ]
    },
    //html
    plugins:[

        new htmlWebpackPlugin({
            template:'./src/index.html'
        })
    ]
}
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市枫振，隨后出現(xiàn)的幾起案子喻圃，更是在濱河造成了極大的恐慌，老刑警劉巖粪滤，帶你破解...
    沈念sama閱讀 211,948評論 6贊 492
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件级及，死亡現(xiàn)場離奇詭異，居然都是意外死亡额衙，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,371評論 3贊 385
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門怕吴，熙熙樓的掌柜王于貴愁眉苦臉地迎上來窍侧，“玉大人，你說我怎么就攤上這事转绷∥凹” “怎么了？”我有些...
    開封第一講書人閱讀 157,490評論 0贊 348
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵议经，是天一觀的道長斧账。 經常有香客問我，道長煞肾，這世上最難降的妖魔是什么咧织？ 我笑而不...
    開封第一講書人閱讀 56,521評論 1贊 284
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮籍救，結果婚禮上习绢，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好闪萄，可當我...
    茶點故事閱讀 65,627評論 6贊 386
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布梧却。 她就那樣靜靜地躺著，像睡著了一般败去。 火紅的嫁衣襯著肌膚如雪放航。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 49,842評論 1贊 290
  • 城市分裂傳說
    那天圆裕，我揣著相機與錄音广鳍，去河邊找鬼。 笑死葫辐，一個胖子當著我的面吹牛搜锰，可吹牛的內容都是我干的。 我是一名探鬼主播耿战，決...
    沈念sama閱讀 38,997評論 3贊 408
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼蛋叼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了剂陡？” 一聲冷哼從身側響起狈涮，我...
    開封第一講書人閱讀 37,741評論 0贊 268
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎鸭栖，沒想到半個月后歌馍，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經...
    沈念sama閱讀 44,203評論 1贊 303
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡晕鹊，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,534評論 2贊 327
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年宗雇，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片洲尊。...
    茶點故事閱讀 38,673評論 1贊 341
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡盅称，死狀恐怖，靈堂內的尸體忽然破棺而出飞几，到底是詐尸還是另有隱情砚哆，我是刑警寧澤，帶...
    沈念sama閱讀 34,339評論 4贊 330
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布屑墨，位于F島的核電站躁锁，受9級特大地震影響，放射性物質發(fā)生泄漏卵史。R本人自食惡果不足惜战转，卻給世界環(huán)境...
    茶點故事閱讀 39,955評論 3贊 313
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望以躯。 院中可真熱鬧匣吊，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,770評論 0贊 21
  • 一樁弒父案社痛，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至命雀，卻和暖如春蒜哀，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背吏砂。 一陣腳步聲響...
    開封第一講書人閱讀 32,000評論 1贊 266
  • 情欲美人皮
    我被黑心中介騙來泰國打工撵儿， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人狐血。 一個月前我還...
    沈念sama閱讀 46,394評論 2贊 360
  • 代替公主和親
    正文 我出身青樓淀歇，卻偏偏與公主長得像，于是被迫代替她去往敵國和親匈织。 傳聞我的和親對象是個殘疾皇子浪默，可洞房花燭夜當晚...
    茶點故事閱讀 43,562評論 2贊 349

推薦閱讀更多精彩內容