Vue学习总结3-Vue-cli脚手架和Vue组件使用

Vue学习总结3-Vue-cli脚手架和Vue组件使用

Vue-Cli是官方提供的Vue脚手架用于快速搭建一个Vue项目模板

#vue 安装步骤
# 下载安装node.js
node -v #查看node版本
npm install vue-cli -g #全局安装Vue脚架
mkdir vueproject #创建Vue项目
cd vueproject
vue list #查看模板列表
vue init webpack-simple(模板名) vueproject1(工程名) #初始化Vue项目
npm install #安装依赖加速安装可使用cnpm或 npm install --registry=https://registry.npm.taobao.org
npm run dev #运行Vue项目成功后如下图
npm run build #打包项目

src 目录用于放自己代码文件 package.json 依赖环境 APP.vue,main.js主要组件组合

Vue组件使用(引入组件的效果说白了就是引入组件页面效果)
首先我们对App.vue处理一下(删除无用的组件元素)
删除后代码如下

<!--html标签-->
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
  </div>
</template>
<!--js-->
<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to stack Vue.js App'
    }
  }
}
</script>
<!--样式信息-->
<style>
</style>

在src下新建components目录 在components目录下新建三个组件

组件内代码如下(组件的style标签里加入scoped关键字说明样式只作用于当前组件)

<!--head组件-->
<template>
    <div>
      <h1>{{title}}</h1>
    </div>
</template>

<script>
    export default {
        name: "Head",
        data() {
          return {
            'title': 'vue head by stack'
          }
        }
    }
</script>

<style scoped>

</style>

<!--body组件-->
<template>
    <div>
      <p>{{title}}</p>
    </div>
</template>

<script>
    export default {
        name: "Body",
        data(){
          return {
            'title': 'vue body by stack'
          }
        }
    }
</script>

<style scoped>

</style>

<!--foot组件-->
<template>
    <h1>{{title}}</h1>
</template>

<script>
    export default {
        name: "Foot",
        data(){
          return{
            'title': 'vue foot by stack'
          }
        }
    }
</script>

<style scoped>

</style>

两种组件注册方式实现(全局注册和本地注册,全局注册和本地注册任选一种)
全局注册(修改main.js如下)

import Vue from 'vue'
import App from './App.vue'
/*全局注册组件*/
import myhead from './componets/Head'
import mybody from './componets/Body'
import myfoot from './componets/Foot'

Vue.component("myhead",myhead)
Vue.component("mybody",mybody)
Vue.component("myfoot",myfoot)

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

App.vue引入组件(修改App.vue如下)

<template>
  <div id="app">
    <myhead></myhead>
    <img src="./assets/logo.png">
    <h1>my First Vue Project</h1>
    <mybody></mybody>
    <myfoot></myfoot>
  </div>
</template>

<script>
export default {
  name: 'app',
}
</script>

<style lang="scss">
</style>

本地注册组件
修改App.vue如下

<template>
  <div id="app">
   <myhead></myhead>
    <mybody></mybody>
    <myfoot></myfoot>
  </div>
</template>

<script>
  /*本地注册组件*/
  import myhead from './componets/Head'
  import mybody from './componets/Body'
  import myfoot from './componets/Foot'

export default {
  name: 'app',
  components:{
    'myhead' : myhead,
    'mybody' : mybody,
    'myfoot' : myfoot
  }

}
</script>

<style lang="scss">
</style>

npm run dev 运行如下效果(注意template必须有一个根节点即div标签)

组件之间参数传递(父传子，子传父)
父传子(即从组合组件页面向单组件页面传参数)
子传父(即从单组件页面向组合组件页面传参数)
创建两个组件sub1和sub2

<!--sub1-->
<template>
    <div>
      <p>{{title}}</p>
      <p>{{myarg}}</p>
    </div>
</template>

<script>
    export default {
        name: "sub1",
        /**方式一接受参数以数组列表形式 */
        /**props:['myarg'],*/
        /**方式二(常用)对象形式 */
        props:{
          myarg:{
              type:String, 
              required:true,
               default:'默认值'
          }
        },
        data(){
          return {
            'title': 'sub1'
          }
        }
    }
</script>

<style scoped>

</style>

<!--sub2-->
<template>
    <div>
      <p>{{title}}</p>
      <button v-on:click="doClick()">向父组件传递参数</button>
    </div>
</template>

<script>
    export default {
        name: "sub2",
        methods:{ 
            doClick:function(){ 
                 this.$emit('newName','我是来自子组件的参数'); 
            } 
            },
        data(){
          return {
            'title': 'sub2'
          }
        }
    }
</script>

<style scoped>

</style>

修改App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
    <h2>父组件向子组件传递参数</h2>
    <mysub1 :myarg="arg"></mysub1>
    <h2>子组件向父组件传递参数</h2>
    <mysub2  @newName="name=$event"></mysub2>
    {{name}}
  </div>
</template>

<script>
/**本地组件引入*/
import sub1 from './components/sub1.vue'
import sub2 from './components/sub2.vue'

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to stack Vue.js App-组件之间参数传递',
      arg: '我是来自父组件的参数哈哈',
      name:''
    }
  },
  /** 本地组件注册*/
  components:{
    mysub1:sub1,
    mysub2:sub2,
  }
}
</script>

<style>
</style>

实现效果如下

总结：Vue组件的使用大大提高了页面的复用与组合，页面组件注册分为本地注册和全局注册，看使用域选择注册方式，通过Vue参数传递配合Vue对象声明周期和axios请求即可实现页面数据加载这点个人感觉十分重要。