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>