Vue之單文件組件

單文件組件

    在不少Vue項目中，咱們用component來定義全局組件，用new Vue({el:'#el',})來定義容器元素，

    這種方式在不少中小項目中運做很好，在這些項目裏Javascript只用來增強特定的視圖。但當項目更加複雜之後，或者你的項目徹底由Javascript驅動之後，會有不少缺點。

        1.全局定義(Global definitions)強制要求每一個component中的命名不能重複，

        2.字符串模板(String templates)缺少語法高亮。

        3.不支持CSS(No CSS support)意味着當HTML和Javascript組件化時，CSS被遺漏。

        4.沒有構建步驟(No build step)限制只能用HTML和ES5 Javascript，而不能使用預處理器，如Pug(formerly Jade)和Babel

    文件擴展名爲.vue的single file components(單文件組件)爲以上全部問題提供瞭解決方案，而且還可使用Webpack和Browserify等構建工具 

     vue腳手架安裝

        1.先安裝node.js,而後cmd命令全局安裝  npm install -g vue-cli ,而後就支持了vue這樣一條命令

        2.初始化本身的一個項目，cmd的命令行 vue init webpack my-project

            my-project表明你要安裝的文件夾，webpack有幾種開發方式

                 1.webpack

                 2.webpack-simple

                3.browserify

                4.browserify-simple

                 5.pwa   google提供的一種開發方式

                 6.simple

     1.vue代碼樣式

        <template> html代碼</template>

        <script>js代碼</script>

　　 <style>css樣式</style>

        <script src="外部的js"></script>

        <style src="外部的css"></style>

     2.vue-cli的引入

        1.在須要安裝的項目文件夾路徑中，cmd命令行代碼： vue init webpack-simple my-project

        2.在須要安裝的項目文件夾路徑中，cmd命令行代碼： vue init webpack my-project

         npm run dev開發環境構建，開發的時候，能夠預覽結果網頁，http://localhost:8080

         npm run build生產環境構建,生成dist文件夾

     3.單文件使用方法

         script  js代碼塊，最多能夠包含一個

         template html代碼塊，最多能夠用一個

         style   css代碼塊，最多能夠包含多個

            style標籤 加上 scoped屬性，css做用域只在當前的文件

            style標籤，加上 lang="scss",支持scss語言，在要支持scss語言以前，安裝scss-load的cmd命令行 

                 npm install sass-loader@7.3.1 --save-dev

                npm install node-sass --save-dev;

                若是安裝完成後，運行時出現了錯誤，這是由於當前sass的版本過高，webpack編譯時出現了錯誤，這個時候只須要換成低版本的就行，下面說一下修改方法，很簡單，以下，找到package.json文件，裏面的 "sass-loader"的版本更換掉 就好了。

                 "sass-loader": "^8.0.0"，更換成了 "sass-loader": "^7.3.1",

            自動處理圖片路徑

        在main.js中加入本身寫的myapp.vue

             import myapp from 'myapp.vue'

            在下面的new Vue中添加

             render:h=>h(myapp)或者components:{myapp}, template:'<myapp/>',

 

在 main.js中引入  import myapp from './myapp.vue'; 

new Vue({
  el: '#app',
  router,
  /*components: { myapp },  template: '<myapp/>', */
  render:h=>h(myapp),
})

 

myapp.vue

<template>
    <div>hello world111
        <input type="text" v-model="name">
        <button @click="addLi">add</button>
        <transition-group tag="ul" name="bounce">//單文件組件也支持過渡
            <li v-for="(data,index) in datalist" :key="data">{{data}}<button @click="delLi(index)">delete</button></li>
        </transition-group>
        <mychild></mychild>//單文件子組件的輸入
    </div>
</template>

<script>
    import mychild from './mychildapp';//導入單文件子組件的方式
    export default{
        data(){//這裏的data就不能像new Vue中設置成對象了，必須是一個函數
            return {
                datalist:['111','222','333'],
                name:'',
            }
        },
        methods: {
            addLi:function(){
                this.datalist.push(this.name);//添加一行
            },
            delLi:function(index){
                this.datalist.splice(index,1)//刪除一行
            },
        },
        components:{
            mychild:mychild,//將子組件對應輸入的單文件子組件
        }
    }
</script>
//scoped表示只在當前的頁面做用，
<style lang="css" scoped>
    .bounce-enter-active{animation: bounce-in .5s;}
    .bounce-leave-active{animation: bounce-in .5s reverse;}
    @keyframes bounce-in {
        0%{transform: translateX(100px);opacity: 0;}
        100%{transform: translateX(0px);opacity: 1;}
    } 
</style>

mychildapp.vue

<template>
    <div>child 子組件
        <ul>
            <li>1111</li>
            <li>22222</li>
            <li>33333</li>
        </ul>
    </div>
</template>

<script>
    export default{
        name:'mychildapp',
        data(){//這裏的data就不能像new Vue中設置成對象了，必須是一個函數
            return {
                
            }
        },
        methods: {
        },
    };
</script>
//將lang="scss",能夠支持sass代碼，
<style lang="scss" scoped>
    ul{
        li{background: #333}
    }
</style>