.vue 單文件組件, 在一個文件中封裝一個頁面需要用到的html, css , js 。
## 全局組件
在JS代碼中可以使用Vue.component方式定義組件,使用new Vue({ el: '#my-container '}) 指定容器元素,在id 是my-container的Div中就可以使用該組件了,類似:
JS代碼
```
Vue.component('button-counter', {
data: function() {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
});
new Vue({
el: '#components-demo'
});
```
HTML代碼
```
<div id="components-demo">
<button-counter>
</button-counter>
</div>
```
在線演示地址: https://jsrun.net/CLfKp/edit
這樣的方式定義的組件屬于全局的組件,在中小規模項目中可能還好,但是在大型和復雜的項目中,存在以下缺點:
* 全局定義要求組件的命名不能重復
* 字符串模板缺乏語法高亮,閱讀困難
* 不支持CSS。
* 沒有構建步驟,只能使用HTML和ES5 Javascript,不能使用預處理器。
于是,就出現了Single-file components , 單文件組件,即在一個文件中定義一個組件, 這個文件的擴展名是 .vue。
## 單文件組件的文件結構
文件的結構:
```
<template></template>
<script></script>
<style></style>
```
1. `<template>` 標簽里面放字符串的模板
2. `<script>` 寫JavaScript代碼
3. `<style>` CSS樣式代碼,
`<style scoped></style>` 樣式在當前頁有效
## vue-loader
Vue的加載器, 對.vue 文件進行加載、解析。 vue-loader 是基于webpack的。
- 引入篇
- 基礎篇
- 快速入手
- 名詞解釋
- Vue語法
- Vue安裝
- Vue實例
- 模板語法
- 計算屬性和偵聽器
- Class與Style綁定
- 條件渲染
- 列表渲染
- 事件處理
- 表單輸入綁定
- 組件基礎
- 進階篇
- 常用模塊
- 單文件組件
- 快速學會Vue Router路由
- Vue Route 進階使用
- Vuex 與狀態管理
- Axios
- Mock.js
- data數據顯示在頁面
- Vue生命周期
- Vue按需加載組件
- 國際化
- 頁面加載進度條 -NProgress
- 自定義主題顏色
- 開發篇
- Vue入門——創建并運行一個Vue項目
- Vue + Element UI 項目創建
- 使用Vue ui項目創建工具在網頁中創建Vue項目
- Vue項目創建入門實例
- Vue CLI
- 創建項目
- 使用Visual Studio Code 開發Vue項目
- 高級篇
- 組件深入
- Vue+Element
- Vue + ElementUI 主題顏色切換
- 工具篇
- 在線代碼編輯器
- 開發工具(IDE,集成開發環境)
- npm(JavaScript包管理工具)介紹
- Node.js(npm)在Windows下安裝
- webpack介紹
- webpack快速實例
- webpack
- 快速入門實例
- 安裝
- 概念
- Nodejs
- 基礎
- npm
- 命令參考
- 命令
- 模塊安裝
- Babel
- 問題解決篇
- ERROR Failed to get response from https://registry.yarnpkg.com/vue-cli-version -marker
- Vue常見問題
- You are using the runtime-only build of Vue where the template compiler is not
- yarn 報unable to get local issuer certificate
- yarn There appears to be trouble with your network connection. Retrying
- Expected Boolean, got String with value "true".
- 項目篇
- 項目創建
- 項目設計
- 頁面
- 開發問題
- 后端
- Spring Boot + Activiti 工作流框架搭建之一
- Spring Boot + Activiti 工作流框架搭建之二
- 工作流
- Java流程框架
- Activiti
- 頁面風格
- green
- blue
- orange
- 參考篇
- 好的Git項目
- Vue的在線js
- 指令
- 開發說明
- JavaScript 高級
- export和import
- JS模塊化規范對比以及在Node.js的實現
- Storage
- ES2015
- scss
- CSS、Sass、SCSS