Vue之单文件组件

时间 2019-11-08

标签 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>

　　 <style>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.vuecss

<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>