[TOC]
#### 1.組件之子組件中data使用實例與text-xtemplate的使用方法
<div id="hdcms">
<hd-news></hd-news>
<hr>
<hd-news></hd-news>
<hr>
<hd-news></hd-news>
</div>
<!--定義一個組件-->
<script type="text/x-template" id="hdNews">
<div>
<li v-for="(v,k) in news">
{{v.title}}
<button @click="del(k)">刪除</button>
</li>
</div>
</script>
<script>
<!--子組件不能共用同一個數據-->
var hdNews = {
template: "#hdNews",
data(){
return {
news: [
{title: 'hdcms'},
{title: 'hdphp'}
]
};
},
methods: {
del(k){
this.news.splice(k, 1);
}
}
};
new Vue({
el: '#hdcms',
components: {hdNews},
data: {}
});
</script>
#### 2.組件之組件間的數據參props的使用實例操作
:lists="news" 父組件向子組件傳遞數據。
<div id="hdcms">
<hd-news hd="abc" cms="后盾人houdunwang.com" :show-del-button="true" :lists="news"></hd-news>
</div>
<script type="text/x-template" id="hdNews">
<div>
{{hd}}-{{cms}}- {{showDelButton}}
<li v-for="(v,k) in lists">
{{v.title}}
<button @click="del(k)" v-if="showDelButton">刪除</button>
</li>
</div>
</script>
<script>
var hdNews = {
template: "#hdNews",
props:['hd','cms','showDelButton','lists'],
data(){
return {};
}
};
new Vue({
el: '#hdcms',
components: {hdNews},
data: {
news:[
{title:'hdcms'},{title:'hdphp'},{title:'houdunren.com'}
]
}
});
</script>
#### 3.組件之props數據的多種驗證機制實例詳解
組件hdNews 必須傳:show-del-button="true"
<div id="hdcms">
<hd-news :show-del-button="true"></hd-news>
</div>
<script type="text/x-template" id="hdNews">
<div>
<li v-for="(v,k) in lists">
{{v.title}}
<button @click="del(k)" v-if="showDelButton">刪除</button>
</li>
</div>
</script>
String Number Boolean Function Object Array
<script>
var hdNews = {
template: "#hdNews",
props: {
showDelButton: {
type: [Boolean, Number],
required: true
},
// showDelButton: {
// validator(v){
// return v===1 || v===0;
// },
// },
lists: {
type: Array,
default(){
return [{title: '后盾人'}]
}
}
},
data(){
return {};
}
};
new Vue({
el: '#hdcms',
components: {hdNews},
data: {
news: [
{title: 'hdcms'}, {title: 'hdphp'}, {title: 'houdunren.com'}
]
}
});
</script>
#### 4.組件之子組件使用$on與$emit事件觸發父組件實現購物車功能
<div id="hdcms">
<!--@sum="total"通知父組件計算價格-->
<hd-news :lists="goods" @sum="total"></hd-news>
總計:{{totalPrice}}元
</div>
<script type="text/x-template" id="hdNews">
<table border="1" width="90%">
<tr>
<th>商品名稱</th><th>商品價格</th><th>商品數量</th>
</tr>
<tr v-for="(v,k) in lists">
<td>{{v.title}}</td><td>{{v.price}}</td>
<td>
<input type="text" v-model="v.num" @blur="sum">
</td>
</tr>
</table>
</script>
<script>
var hdNews = {
template: "#hdNews",
props: ['lists'],
methods:{ //子組件修改后通知父組件統計計算。
sum(){
this.$emit('sum');
}
}
};
new Vue({
el: '#hdcms',
components: {hdNews},
mounted(){ //頁面加載完成執行統計方法。
this.total();
},
data: {
totalPrice:0,
goods:[
{title:'iphone7Plus',price:100,num:1},
{title:'后盾人會員',price:200,num:1},
]
},
methods:{
total(){
this.totalPrice=0;
this.goods.forEach((v)=>{
this.totalPrice+=v.num*v.price;
})
}
}
});
</script>
#### 5.組件之使用.sync修飾符與computed計算屬性超簡單的實現美團購物車原理
<div id="hdcms">
<hd-news :lists.sync="goods"></hd-news>
總計:{{totalPrice}}元
</div>
<script type="text/x-template" id="hdNews">
<table border="1" width="90%">
<tr>
<th>商品名稱</th><th>商品價格</th><th>商品數量</th>
</tr>
<tr v-for="(v,k) in lists">
<td>{{v.title}}</td><td>{{v.price}}</td>
<td>
<input type="text" v-model="v.num">
</td>
</tr>
</table>
</script>
<script>
var hdNews = {
template: "#hdNews",
props: ['lists']
};
new Vue({
el: '#hdcms',
components: {hdNews},
computed:{
totalPrice(){
var sum=0;
this.goods.forEach((v)=>{
sum+=v.num*v.price;
})
return sum;
}
},
data: {
goods:[
{title:'iphone7Plus',price:100,num:1},
{title:'后盾人會員',price:200,num:1},
]
}
});
</script>
#### 6.組件之使用內容分發slot構建bootstrap面板panel
<div id="hdcms">
<form action="" class="form-horizontal">
<bs-panel>
<h4 slot="title">hdphp開源框架</h4>
<bs-input title="標題" value="后盾人" slot="body"></bs-input>
<bs-input title="點擊數" value="100" slot="body"></bs-input>
abc
</bs-panel>
</form>
</div>
<script type="text/x-template" id="bsPanel">
<div class="panel panel-default">
<div class="panel-heading">
<slot name="title"></slot>
</div>
<div class="panel-body">
<slot name="body"></slot>
</div>
<h1>
<slot></slot>
</h1>
</div>
</script>
<script type="text/x-template" id="bsInput">
<div class="form-group">
<label for="" class="col-sm-2 control-label">{{title}}</label>
<div class="col-sm-10">
<input type="text" class="form-control" :value="value">
</div>
</div>
</script>
<script>
var bsPanel = {
template: "#bsPanel"
};
var bsInput = {
template: "#bsInput",
props: ['title', 'value']
}
new Vue({
el: '#hdcms',
components: {bsPanel, bsInput},
});
</script>
#### 7.組件之父組件使用scope定義子組件模板結構實例講解
用戶在根組件中修改模版的樣式
<div id="hdcms">
<hd-list :data="news">
<template scope="v">
<li>
<h1>{{v.field.title}}</h1>
</li>
</template>
</hd-list>
</div>
<script type="text/x-template" id="hdList">
<ul>
<slot v-for="v in data" :field="v"></slot>
</ul>
</script>
<script>
var hdList = {
template: "#hdList",
props:['data']
};
new Vue({
el: '#hdcms',
components: {hdList},
data:{
news:[
{title:'hdcms'},
{title:'后盾人'}
]
}
});
</script>
#### 8.組件之使用動態組件靈活設置頁面布局
<div id="hdcms">
<div :is="formType"></div>
<input type="radio" v-model="formType" value="hdInput"> 文本框
<input type="radio" v-model="formType" value="hdTextarea"> 文本域
</div>
<script>
var hdInput = {
template: "<div><input/></div>",
};
var hdTextarea = {
template: "<div><textarea></textarea></div>",
};
new Vue({
el: '#hdcms',
components: {hdInput,hdTextarea},
data:{
formType:"hdTextarea"
}
});
</script>
- html&jquery網頁特效
- 標簽分類及特點
- 關于文字標簽
- 網頁定時跳轉
- css透明度和插件
- 0.前端常用工具
- 1.tab切換效果
- 2.tab切換效果多個代碼復用
- 3.百度新聞導航條效果
- 4.解決鼠標移入過快的問題
- 5.滾動條位置
- 6.元素尺寸
- 7.全選反選操作
- 8.固定定位
- 9.開關效果
- 10.節點操作
- 11.仿小米商品展示效果
- 12.仿小米商品展示效果復用
- 13.固定導航欄效果
- 14.凡客輪播圖效果
- 15.頂部下滑廣告效果
- 16.京東左右滑動輪播圖
- 17.京東左右滑動無縫輪播圖
- 18.選擇器
- 19.篩選
- 20.開關效果
- 21.滑動效果
- 22.小米商品效果css實現
- 23.元素水平垂直居中
- laravel5.6
- LARAVEL 介紹&安裝
- javascript & css 腳手架
- php常用工具類
- 安裝laravel-ide-helper增強代碼提示
- 使用migration創建表和數據填充
- 解決mysql5.7以下laravel不能執行數據遷移的問題
- 路由
- 登陸操作自定義模型
- 使用中間件middleware進行登錄權限驗證
- 進行表單驗證處理
- 使用laracasts-flash定制消息提示
- 資源路由
- 寶塔面板安裝fileinfo擴展
- laravel上傳處理與使用hdjs快速實現前端上傳組件
- thinkphp
- phpstorm
- phpstorm安裝插件
- 定義快捷鍵
- 關閉提示
- 將代碼實時同步到遠程服務器
- sublime
- composer
- git使用
- git安裝和配置作者信息
- git新建項目和維護項目
- git日志操作
- git別名操作
- git分支操作
- git生成發布壓縮包
- git系統別名
- gitrebase操作
- 使用SSH與GITHUB遠程服務器進行無密碼連接
- 本地版本庫主動使用remote與遠程GITHUB進行關聯
- 本地分支與GITHUB遠程分支同步
- 項目實戰-新入職員工參與項目開發時分支使用
- 自動部署
- ios開發
- linux
- 1.centos6.5 mysql忘記登入密碼
- html5
- 標簽
- 表單
- 音頻與視頻
- webstorage儲存
- canvas
- css3
- 01.CSS3布局
- 02.transition動畫
- 03.animation動畫
- 04.flex彈性盒模型
- Less
- gulpjs
- es6
- ES6模塊化
- let和const命令
- ES6函數擴展&解構賦值
- JavaScript之數據遍歷
- class類
- Set和Map數據結構
- Vue
- 1.創建第一個應用
- 2.屬性動態綁定
- 3.表達式
- 4.解決phpstorm不識別ECMASCRIPT6語法的問題
- 5.watch監聽屬性
- 6.使用object與array控制class
- 7.條件渲染
- 8.循環
- 9.變異方法
- 10.事件
- 11.表單
- 12.組件
- 13.css過渡動
- 14.js庫控制vue過渡動作
- 15.自定義指令directive
- 16.使用vue-cli初始化單頁面應用
- 17.Vue-router路由
- 18.vuex
- 19.vue-cli
- webpack
- zanui
- nodejs