Vue的元件component（一）
Vue本身是基於元件化開發的，每個元件相當於一個Vue例項。Vue的元件部分搞清楚，是學好Vue的重要一步。
1、Vue元件的全域性註冊
要註冊一個全域性元件，可以使用 Vue.component(tagName, options)。例如：
Vue.component('my-component', {
// 選項
})- 1
- 2
- 3
使用的時候直接在dom中使用元件名。例如：
<my-component></my-component>- 1
下面是一個完整的帶有屬性傳遞的元件應用例項：
<!DOCTYPE html>
<htmllang - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
2、Vue元件的區域性註冊
可以通過Vue例項/元件示例的例項選項 components 來註冊屬於他們自己的元件。
var Child = {
template:"<p>我是中國人</p>"
}
new Vue({
el:'#app',
components: {
"my-comp": Child
}
})- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
一個完整的區域性元件註冊的示例demo：
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Vue-demo</title>
<scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<divid="app">
<todo-item></todo-item>
</div>
<script>var Child = {
template: '<div>A custom component!</div>'
};
new Vue({
el:'#app',
components:{
'todo-item': Child
}
});
</script>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
3、元件中的data應該是函式
在new Vue()的例項的過程中，data可以是一個物件，但是在元件component中，data是一個函式。
下面的寫法在Vue中會報錯。
Vue.component('my-com',{
template:'<span>{{message}}</span>',
data: {
message: 1
}
})- 1
- 2
- 3
- 4
- 5
- 6
這個示例才是正確的寫法：
Vue.component('my-com',{
template:'<span>{{message}}</span>',
data: function() {
return {
message: 1
}
}
})- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
4、元件應該是組合使用的
在react中，最外層是一個根元件，裡層的元件被一層層的巢狀在外層元件內，從而形成一個元件樹。
在 Vue 中，父子元件的關係可以總結為 prop 向下傳遞，事件向上傳遞。父元件通過 prop 給子元件下發資料，子元件通過事件給父元件傳送訊息。
使用props傳遞資料的語法：
Vue.component('child', {
// 宣告 props
props: ['message'],
// 就像 data 一樣，prop 也可以在模板中使用
// 同樣也可以在 vm 例項中通過 this.message 來使用
template: '<span>{{ message }}</span>'
})- 1
- 2
- 3
- 4
- 5
- 6
- 7
4_1、通過props進行屬性傳遞的demo
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Vue-demo</title>
<scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<divid="app">
<ol>
<!--使用元件-->
<my-com
v-bind:todo="message"
></my-com>
</ol>
</div>
<script>//定義一個最簡單的元件
Vue.component('my-com',{
props:['todo'],
template:'<h3>{{todo}}</h3>'
});
new Vue({
el:'#app',
data:{
message:'hello!'
}
});
</script>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
5、camelCase vs. kebab-case
兩者的區別是駝峰式命名規則，以及短橫線分隔式命名。
在JavaScript中，如果使用駝峰式命名camelCase。
由於在HTML中不區分大小寫，我們需要轉換成短橫線分隔式命名kebab-case。
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Vue-demo</title>
<scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<divid="app">
<ol>
<!--使用元件-->
<todo-item
my-todo="hello"
></todo-item>
</ol>
</div>
<script>//定義一個最簡單的元件
Vue.component('todo-item',{
props:['myTodo'],
template:'<h2>{{myTodo}}</h2>'
});
new Vue({
el:'#app'
});
</script>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
6、動態props
一般使用V-bind的方式，把一個屬性動態的繫結到props。
<todo-com v-bind:todo='message'></todo-com>- 1
如果沒有v-bind，就會展示message這個字串；但是現在，展示的是在data中動態繫結的變數message的資訊。
下面是一個動態繫結props的示例：
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Vue-demo</title>
<scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<divid="app">
<ol>
<!--使用元件-->
<todo-item
v-bind:my-todo="message"
></todo-item>
</ol>
</div>
<script>//定義一個最簡單的元件
Vue.component('todo-item',{
props:['myTodo'],
template:'<h2>{{myTodo}}</h2>'
});
new Vue({
el:'#app',
data: {
message: 'hello world!'
}
});
</script>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
7、動態props，繫結一個物件作為props傳遞給子元件。
比如一個物件是這樣的：
todo: {
text:'Learn Vue',
isComplete: false
}- 1
- 2
- 3
- 4
然後：
<todo-item v-bind="todo"></todo-item>- 1
等價於：
<todo-item
v-bind:text="todo.text"
v-bind:is-complete="todo.isComplete"
></todo-item>- 1
- 2
- 3
- 4
一個完整的示例demo如下：
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Vue-demo</title><scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script></head><body><divid="app"><todo-comv-bind="todo"></todo-com></div><script>//定義一個最簡單的元件
Vue.component('todo-com',{
props:['text','isComplete'],
template:'<h2>I has {{isComplete ? "completed ":"not completed "}}{{text}}</h2>'
});
new Vue({
el:'#app',
data: {
todo:{
text: 'Learn Vue',
isComplete: false
}
}
});
</script></body></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
8、元件通訊，props傳遞子元件的使用場景。
1、在子元件中獲取props的值，並且在子元件中需要改變這個值。
我們可以定義一個區域性變數把props的值賦值給它。
props: ['initialCounter'],
data: function() {
return { counter: this.initialCounter }
}- 1
- 2
- 3
- 4
2、在子元件中需要把這個props進行一定的處理，再進行使用。
定義一個計算屬性，處理 prop 的值並返回
props: ['size'],
computed: {
normalizedSize: function() {
return this.size.trim().toLowerCase()
}
}- 1
- 2
- 3
- 4
- 5
- 6
9、props驗證
要指定驗證規則，需要用物件的形式來定義 prop，而不能用字串陣列：
Vue.component('example', {
props: {
// 基礎型別檢測 (`null` 指允許任何型別)
propA: Number,
// 可能是多種型別
propB: [String, Number],
// 必傳且是字串
propC: {
type: String,
required: true
},
// 數值且有預設值
propD: {
type: Number,
default: 100
},
// 陣列/物件的預設值應當由一個工廠函式返回
propE: {
type: Object,
default: function() {
return { message: 'hello' }
}
},
// 自定義驗證函式
propF: {
validator: function(value) {
return value > 10
}
}
}
})- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
10、非props特性
所謂的非props特性是不用props申明，直接傳給子元件的一些特性。比如： class。
一般而言，父元件的非props特性對子元件的特性進行覆蓋和合並。
下面的示例中，如果父元件不使用class=’color2’，則陣列顏色是紅色，如果使用了，則顏色為綠色。
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Vue-demo</title>
<style>.color1{
color: red;
}.color2{
color: green;
}</style>
<scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<divid="app">
<foo-componentclass="color2"v-bind:foo-message="fooMessage"></foo-component>
</
相關推薦
Vue的元件component（一）
Vue本身是基於元件化開發的，每個元件相當於一個Vue例項。Vue的元件部分搞清楚，是學好Vue的重要一步。
1、Vue元件的
vue元件庫（一）：前期準備工作
前言
將近期專案內自行開發一個vue元件，做個總結，記錄下自己的思維過程~~~
正文
接到這個任務後，還是要做些準備工作的。
主要內容如下：
1.優化下所在團隊前端開發流程
伺服器搭建gitlab，採用git進行程式碼版本管理
伺服器搭建npm私服（基於verdaccio
如何開發一個基於 Vue 的 ui 元件庫（一）
開發模式
預覽 demo
在開發一個 ui 元件庫時，肯定需要一邊預覽 demo，一邊修改程式碼。
常見的解決方案是像開發一般專案一樣使用 webpack-dev-server 預覽元件，比如通過 vue-cli 初始化專案，或者自己配置指令碼。
文藝一點兒地可能會用到 parcel 來簡化 demo
Vue學習筆記（一）元件
在做課設的時候，動態生成表格需要寫一堆js程式碼，於是乎決定採用一個前端框架來簡化編碼過程，之前已經學過Vue的一些知識了，因此直接從元件開始記錄。
1.簡單的元件例項
<div class="vue">
<button-c
vue基礎學習（一）
time tle eight pla use logs new dial for 01-01 vue使用雛形
<div id="box">
{{msg}}
</div>
<sc
vue學習記錄（一）—— vue開發調試神器vue-devtools安裝
shell gist 項目 擴展工具 code blog manifest false .net 網上有些貼子少了至關重要的一步導致我一直沒裝上， 切記！！install後還需build，且install和build都在vue-devtools文件夾內執行
github下載
vue入門練習（一）
col pre 全局 run -c 初始 handbook serve 回車 1.安裝node,webpack
node -v //查看已安裝版本
npm install -g webpack //安裝webpack
npm install -g web
vue-cli教程（一）
版本 目錄 pat api when 自動 ats template his 1.安裝vue-cli
再安裝完成npm之後，利用npm安裝vue-cli，全局安裝：npm insall -g vue-cli。倘若npm速度慢，建議替換為cnpm（https://npm.ta
vue 開發系列（一） vue 開發環境搭建
更新 AC .org 開發環境搭建 執行命令 taobao AR reg 開發技術
概要
目前前端開發技術越來越像後臺開發了，有一站式的解決方案。
1.JS包的依賴管理像MAVEN。
2.JS代碼編譯打包。
3.組件式的開發。
vue 是一個前端的一站式的前
Vue-router學習（一）- 路由匹配
vue 配置 npm class () ons mount 配置路由 方法 一、Vue-router引入使用
Vue-router就是一個vue路由類，通過new一個Vue路由實例，然後Vue.use()嵌入即可。
一般分為以下步驟：
1.引入
（1）、方法一：n
vue知識掌握（一）
files run 單元測試 most -s 目的 例如 再次 使用 vue項目的搭建
本文章主要講述vue項目的搭建，在搭建vue項目前需要準備一些材料。
1.node安裝
npm：在你安裝node的時候一般node已經自帶了npm，所以忽略。
webpack：npm i
前端小菜雞使用Vue+Element筆記（一）
.proto 瀏覽器 csdn ams .com blank != .html *** 關於使用Vue+Element的項目簡介~
最近因為項目組缺前端人員，所以自己現學現做頁面，先把前後臺功能調通 覺得前端可真的是不容易呀哎呀~
首先記錄一下相關的Vue入門的教程：
vu
Vue.js 筆記（一） 起步
快速入門
<!DOCTYPE html>
<html lang="zh" dir="ltr">
<head>
<meta charset="utf-8">
<title>vue test </titl
現在很火的 vue 學習篇 （一）
記錄一下自己的學習過程，以及學習中遇到的問題。
學習什麼東西首先要知道為什麼去學習？學習它主要可以做什麼？
那什麼是vue.js?
vue是一個輕量級框架，與其他重量級的框架不同的是，vue採用自底向上增量開發的設計。使用vue只需要關注檢視層，不過使用起來讓我感覺最不錯的是vue的響應
VUE學習筆記（一）—安裝vue-cli和建立專案
Github：https://github.com/sueRimn
1.cmd開啟控制檯進行建立專案
（1）全域性安裝腳手架
在命令列輸入：npm install vue-cli -g
（2）初始化專案
繼續輸入：vue init webpack myvue(myvue是我取的專案名，
從零開始Vue專案實戰（一）-準備篇
從前參與過一個react專案的程式碼編寫，大神搭建的框架，我主要負責業務邏輯程式碼編寫，現在回想起來似乎又什麼都不會，現在為了鞏固前端知識，決定用Vue來做這個專案的移動端網站，我本人Vue是從零開始的，一邊學習一邊寫程式碼，在這裡記錄一下過程。
專案說明：
主要功能實現一個投資平臺，會員身份為融資人或投
vue簡單路由（一）
在專案中，將vue的單頁面應用程式改為了多頁面應用程式，因此在某些場景下，需要頻繁的切換兩個頁面，因此考慮使用路由，這樣會減少伺服器請求。
使用vue-cli（vue腳手架）快速搭建一個專案的模板（webpack-simple）,執行起來後，將原來index.html頁面掛載點中的內容刪除
winform控制元件縮寫（一）標準控制元件
winform控制元件縮寫（一）標準控制元件
序號
縮寫
空間名
1
btn
Button
2
chk
CheckBo
Vue原始碼分析（一）：入口檔案
Vue原始碼分析（一）：入口檔案
首先開啟命令列，從github下載原始碼，下載到自己的工作目錄。
git clone https://github.com/vuejs/vue.git
這裡我下載的是2.5.17版本的，vue 原始碼是由各種模組用 rollup 工具
c#窗體學習——常用控制元件介紹（一）
偷懶，轉自若雲流風，原文：https://blog.csdn.net/ruoyunliufeng/article/details/72874691
一．常用控制元件
Lable標籤→僅顯示文字；
TextBox文字控制元件→文字框；
Button按鈕控制元件