vue-cli腳手架項目中組件的使用

在webpack-simple模板中，包括webpck模板。一個.vue文件就是一個組件。

?為什么會這樣呢？因為webpack干活了！webpack的將我們所有的資源文件進行打包。同時webpack還能將我們的html（template）、css、js文件通過模板編譯的方式將這些文件打包成一個.vue的文件。

為什么在vue-cli項目中能使用.vue的文件？

比如有這之前的一個自定義的組件：

Vue.component('app-header', {template: '<div>A custom component!</div>'})

我們可以把template提取出來，例如：

<script type="text/x-template" id="head-template"><div class="head"><h1>{{ title }}</h1></div> </script> Vue.component('app-header', {template: '#head-template',data: {title: '我是頭部'} })

　　如果是這樣的去寫我們的組件的話，太復雜了，后期還不好去維護。可能大家現在還感覺不出來，如果寫更多功能或者用到組件時會相互嵌套，那就更加的麻煩了。還好官方推出的vue-cli工具，基本不用任何的額外的代碼，很快的就可以構建出一套完整的環境。

<template><div class="header"><h1> {{ title }} </h1></div> </template><script>export defualt {data: function() {return {title: '我是頭部'}}} </script><style>.header {color: red;} </style>

上面代碼 有三部分，template標簽中就是我們要寫的組件結構，script標簽中就是我們要寫的業務邏輯，style標簽中就是我們要寫的該組件的樣式。這三部分，我們通過vue-loader這個插件，將這三部分共同組合成了一個.vue文件。我們稱這種.vue的文件就是一個組件。

另外上面的代碼，我們發現有個export default語法，其實呢，這個東西，跟我們的python模塊化有點類似。在es6 Module中，webpack這個工具通過babel-loader這個loader將我們的es6 Module語法進行解析，從而讓我們的export default語法和import 'xxx'語法在瀏覽器中識別。

我們總結一句話：export default xxx 就是拋出一個模塊（一個js文件就是一個模塊)， import 'xxx' from 'aaa'就是從剛剛拋出的文件路徑中，導入此模塊。有import就一定有export default.

?

接下來我們我編輯器中打開我們的項目目錄，查看一下結構：

打開src文件夾，我們先從項目的入口文件main.js文件：

那么接下來我們就關心去書寫App.vue組件中定義的內容就可以了。

大家一開始學習呢，先將App.vue文件中的內容全部刪掉，跟著我一起書寫里面的主要內容。

在該組件中，我們可以書寫三部分，就是之前咱們學習的HTML、CSS、JS.

<template><!-- 該組件的模板結構（HTML） --> </template> <script>// 該組件的DOM操作 </script> <style> /*該組件的樣式屬性*/</style>

因為在main.js中有：

import App from './App.vue'

所以，我們必須在當前組件中寫入export default,那么后面的書寫就是用到了咱們之前的學習的語法。

在script

export default {name:'App',data(){return {//必須是一個函數，要有返回值，返回空對象也是有返回值 }}}

在template中

<!--一定是閉合標簽--> <div class="app"> <h3>{{ msg }}</h3> </div>

如果此時你的命令行工具還是保持開啟的裝備的，那么你會發現如下頁面：

如果沒有重啟項目，請再次執行如下命令啟動項目：

npm run dev

?

那么接下來我們就可以在App.vue組件中將我們之前學習到的知識運用進來。

比如我們的指令系統：

v-if? 條件渲染

v-show? 顯示隱藏

v-for? 遍歷多條數據

v-bind? ?綁定屬性

v-model? ?表單控件的數據雙向綁定

v-on? 綁定事件

v-html? 渲染html標簽元素

我們還可以使用實例對象的方法：

計算屬性的computed方法來監聽屬性

methods方法中聲明事件的方法

.......

轉載于:https://www.cnblogs.com/L5251/articles/9086769.html

總結

以上是生活随笔為你收集整理的vue基础18（vue-cli脚手架项目中组件的使用）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。