Skip to content

Instantly share code, notes, and snippets.

@sunnoy

sunnoy/HTML.html

Last active September 23, 2017 14:05
Show Gist options
  • Save sunnoy/c319240271ee30349fe351aafb29f3ba to your computer and use it in GitHub Desktop.
Save sunnoy/c319240271ee30349fe351aafb29f3ba to your computer and use it in GitHub Desktop.
Download ZIP
vuejs学习
Raw
HTML.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>learn vue.js</title>
<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
<script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
<style type="text/css">
body{
font-size: 24px;
}
.textd{
color: red;
}
.big{
font-size: 34px;
}
</style>
</head>
<body style="align-content: center">
<hr/>
<div id="app30">
<nba c="奥尼尔" pf="加内特">
<span slot="sf">皮尔斯</span>
<span slot="sg">皮尔斯1</span>
<span slot="pg">皮尔斯2</span>
</nba>
</div>
//组合slot
Vue.component('nba',{
props:['c','pf'],
template:'<div>' +
'中锋{{ c }}<br/>' +
'打钱{{ pf }}<br/>' +
'小钱1<slot name="sf"></slot><br/>' +
'小钱2<slot name="sg"></slot><br/>' +
'小钱3<slot name="pg"></slot><br/>' +
'</div>',
});
let app30 = new Vue({
el:'#app30',
});
-----------------------------------------------------------
<hr/>
<div id="app29">
<say-to pname="dong1">
你真好
</say-to>
<say-to pname="dong2">
你真棒
</say-to>
</div>
//slot插槽显示子组件内容，
Vue.component('say-to',{
props:['pname'],
template:'<div>您好，<strong>{{ pname }}</strong>' +
'<slot></slot>' +
'</div>',
});
let app29 = new Vue({
el:'#app29',
});
---------------------------------------------------
<hr/>
<div id="app28">
<p>@{{ total }}</p>
<p>@{{ dong }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
//组件时间监听，子组件传递数据给父组件
Vue.component('button-counter', {
template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
incrementCounter: function () {
this.counter += 1;
this.$emit('increment',{
dong:30
})
}
},
});
let app28 =new Vue({
el: '#app28',
data: {
total: 0,
dong:66,
},
methods: {
incrementTotal: function (pval) {
this.total += 1;
this.dong = pval.dong;
}
}
});
-----------------------------------------------------------
<hr/>
<div id="app27">
<show-info name="kama" :age="25" :detail="{address:'earth',language:'ying'}"></show-info>
</div>
//组件验证数据
Vue.component('show-info',{
props:{
name:{
type:String,
required:true,
},
age:{
type:Number,
validator:function (value) {
return value>= 0 && value <= 130;
},
},
detail:{
type:Object,
default:function () {
return {
address:'us',
language:'dong',
};
},
},
},
template:'<div>name{{ this.name }}<br/>' +
'age{{ this.age }}<br/>' +
'add{{ this.detail.address }}<br/>' +
'addq{{ this.detail.language }}</div>',
});
let app27 = new Vue({
el:'#app27',
});
-----------------------------------------------------------------------
<hr/>
<div id="app26">
<div>请输入您的名字：<input v-model="myname"/></div>
<say-hello :pname="myname" />
</div>
//组件中传递变量
Vue.component('say-hello',{
props:['pname'],
template:'<div>就是{{ pname }}</div>',
});
let app26 = new Vue({
el:'#app26',
data:{
myname:'ko',
},
});
-----------------------------------------------------------
<hr/>
<div id="app25">
<h1>您的成绩评价</h1>
<test-result :score="50"></test-result>
<test-result :score="60"></test-result>
<test-result :score="90"></test-result>
<test-result :score="100"></test-result>
</div>
//组件中传递数据
Vue.component('test-result',{
//１组件中绑定的数据，传递过来
props:['score'],
//3对传递过来的数据以及处理的数据传递给模板
template:'<div><strong>{{ score }}分{{ testResult }}</strong></div>',
　//２对传递过来的数据进行运算逻辑处理
computed:{
testResult:function () {
let stri = "";
if (this.score < 60)
stri = "不及格";
else if (this.score < 90)
stri = "中等生";
else if (this.score <= 100)
stri = "ppp中等生";
return stri;
}
}
});
let app25 =new Vue({
el:'#app25'
});
------------------------------------------------------
<hr/>
<div id="app24">
<div>
今天是<today-weather/>
</div>
</div>
<hr/>
/组件传递数据函数
Vue.component('today-weather',{
template:'<strong>{{ todayw }}</strong>',
data:function () {
return {
todayw:'雨夹雪',
};
}
});
let app24 =new Vue({
el:'#app24'
});
-----------------------------------------------------------------
<div id="app23">
<h1>最流行游戏</h1>
<table border="1">
<tr>
<td>编号</td>
<td>游戏名称</td>
</tr>
<tr is="my-row1"></tr>
<tr is="my-row2"></tr>
<tr is="my-row3"></tr>
</table>
</div>
//表行组件，为表格进行注册组件
Vue.component('my-row1',{
template:'<tr><td>1</td><td>哈哈1</td></tr>'
});
Vue.component('my-row2',{
template:'<tr><td>2</td><td>哈哈2</td></tr>'
});
Vue.component('my-row3',{
template:'<tr><td>3</td><td>哈哈3</td></tr>'
});
let app23 =new Vue({
el:'#app23'
});
--------------------------------------------------
<hr/>
<div id="app22">
<today-weather></today-weather>
</div>
//局部组件
let Weather ={
template:'<div>今天也许会下雨吧之局部组件</div>'
};
let app22 = new Vue({
el:'#app22',
components:{
'today-weather':Weather
},
});
--------------------------------
<hr/>
<div id="app21">
<today-weather></today-weather>
</div>
//组件，基础中的基础,全局组件
Vue.component('today-weather',{
template:'<div>今天也许会下雨吧</div>'
});
let app21 =new Vue({
el:'#app21',
});
--------------------------------------------
<hr/>
<div id="app20">
<h1>用户注册</h1>
<div>
<label for="username">用户名称：</label>
<input type="text" id="username" v-model.lazy="username" @change="checkUsername">
<span v-if="checkUsernameOK">可以注册</span>
</div>
<div>
<label for="age">年龄</label>
<input type="number" id="age" v-model.number="age">
</div>
<div>
<label for="content" >个人简介</label>
<textarea id="content" v-model.trim="content" cols="55" rows="8"></textarea>
</div>
<h4>信息区域</h4>
<p>@{{ username }}</p>
<p>@{{ age }}</p>
<p>@{{ content }}</p>
</div>
//表单修饰符
let app20 =new Vue({
el:'#app20',
data:{
username:'',
checkUsernameOK:false,
age:'',
content:''
},
methods:{
checkUsername:function () {
if (this.username.length > 0) {
this.checkUsernameOK = true;
console.log(this.checkUsernameOK)
}
},
},
});
--------------------------------------------
<hr/>
<div id="app19">
<h3>你最喜欢的NBA明星</h3>
<select v-model="likedNBA">
<option>科比1</option>
<option>科比2</option>
<option>科比3</option>
<option>科比4</option>
<option>科比5</option>
</select>
<h3>你最喜欢的NBA明星</h3>
<select v-model="likedNBAs" multiple>
<option>科比11</option>
<option>科比21</option>
<option>科比32</option>
<option>科比43</option>
<option>科比54</option>
</select>
<h3>选择结果是</h3>
<p>球星是@{{ likedNBA }}</p>
<p>球星ｓ是@{{ likedNBAs }}</p>
</div>
//下拉框选择
let app19 = new Vue({
el:'#app19',
data:{
likedNBA:'',
likedNBAs:[],
},
});
--------------------------------------------------------------------- --------
<hr/>
<div id="app18">
<h1>绑定单选框</h1>
<h2>选择性别</h2>
<input type="radio" id="male" value="男" v-model="pickSex">
<label for="male">男</label>
<br/>
<input type="radio" id="female" value="女" v-model="pickSex">
<label for="female">女</label>
<h2>选择爱好</h2>
<input type="radio" id="game" value="玩游戏" v-model="pickHobby">
<label for="game">玩游戏</label>
<br/>
<input type="radio" id="movie" value="看电影" v-model="pickHobby">
<label for="movie">看电影</label>
<h3>选择结果</h3>
<p>性别@{{ pickSex }}</p>
<p>爱好@{{ pickHobby }}</p>
</div>
//单选框绑定
let app18 = new Vue({
el: '#app18',
data: {
pickSex: '',
pickHobby: ''
}
});
-------------------------------------------------------------------
<hr/>
<div id="app17">
<h1>复选框绑定</h1>
<input type="checkbox" id="生化危机1" value="生化危机1" v-model="checkedGames">
<label for="生化危机1">生化危机1</label>
<input type="checkbox" id="生化危机2" value="生化危机2" v-model="checkedGames">
<label for="生化危机2">生化危机2</label>
<input type="checkbox" id="生化危机3" value="生化危机3" v-model="checkedGames">
<label for="生化危机3">生化危机3</label>
<br/>
<p>您选择的游戏是@{{ checkedGames }}</p>
</div>
//复选框绑定　
let app17 = new Vue({
el: '#app17',
data: {
checkedGames: []
}
});
---------
-----------------------------------------------------------------------
<hr/>
<div id="app16">
<h1>表单控件绑定</h1>
<input type="text" v-model="message" placeholder="输入数据">
<p>@{{ message }}</p>
</div>
//表单空间绑定v-model input
let app16 = new Vue({
el: '#app16',
data: {
message: "hahah",
},
});
---------------------------------------------------------------
<hr/>
<div id="app15">
<h1>事件处理器</h1>
<input id="texName" v-on:keyup="txtKeyup($event)"/>
<button id="btnOK" v-on:click="btnClick($event)">OK</button>
</div>
//事件处理器v-on
let app15 = new Vue({
el: '#app15',
data: {},
methods: {
txtKeyup: function (event) {
this.debugLog(event);
},
btnClick: function (event) {
this.debugLog(event);
},
debugLog: function (event) {
console.log(
'id是' + event.target.id,
'标签名称是' + event.target.tagName,
'标签内容是' + event.target.innerHTML,
event.key ? 'key是' + event.key : 'kong',
);
},
},
});
-------------------------------------------------------
<hr/>
<div id="app14">
<ul>
<li v-for="(game, index) in games">
(@{{ index }})对@{{ game.title }}/@{{ game.price }}
</li>
<hr/>
<li v-for="(value, key, index) in dongg">
(@{{ index }}) @{{ key }}: @{{ value }}
</li>
</ul>
</div>
/列表渲染v-for
let app14 = new Vue({
el: '#app14',
data: {
games: [
{title: 'dong1', price: 400},
{title: 'dong2', price: 450},
{title: 'dong3', price: 460},
{title: 'dong4', price: 420},
{title: 'dong5', price: 480},
],
dongg: {
//key:value
firstName: 'John',
lastName: 'Doe',
age: 30,
},
},
});
---------------------------------------------
<hr/>
<div id="app13">
<h1 class="textd" v-show="day">新一代天堂</h1>
<button @click="btnClick">是否要主机</button>
</div>
//元素显示　v-show
let app13 = new Vue({
el: '#app13',
data: {
day: true,
},
methods: {
btnClick: function () {
this.day = !this.day;
},
},
});
--------------------------------------------------------
<hr/>
<div id="app12">
<h1 v-if="dong == 0">@{{ dong }}成绩没有公布</h1>
<h1 v-else-if="dong < 60">@{{ dong }}不及格</h1>
<h1 v-else-if="dong < 80">@{{ dong }}非常好</h1>
<h1 v-else>@{{ dong }}ok</h1>
<button @click="btnClick">考试成绩</button>
</div>
//条件渲染v-if v-else-if v-else
let app12 = new Vue({
el: '#app12',
data: {
dong: 0,
},
methods: {
btnClick: function () {
this.dong = Math.round(Math.random() * 100);
},
},
});
-----------------------------------------------
<hr/>
<div id="app11">
<div :class ="myClass">文本内容</div>
<button @click="btnClick">改变class吧</button>
</div>
//class 对象绑定绑定多个类
let app11 = new Vue({
el: '#app11',
data: {
myClass: {
textd: true,
big: true,
},
},
methods: {
btnClick: function () {
this.myClass.big = !this.myClass.big;
this.myClass.textd = !this.myClass.textd;
},
},
});
----------------------------------------------------------------------------
<hr/>
<div id="app10">
<div v-bind:class="{textd:isActive}">我是红色</div>
<div :class="{textd:isActive}">我是红色2</div>
<button @click="btnClick">改变颜色吧</button>
</div>
//class属性绑定　v-bind:class
let app10 = new Vue({
el: '#app10',
data: {
isActive: false,
},
methods: {
btnClick: function () {
this.isActive = !this.isActive;
},
},
});
--------------------------------------------------- ----------------------
<hr/>
<div id="app9">
今年发布主机价格为:@{{ price }},含税价格:@{{ priceIn }},实际价格@{{ chinaPrice }}
<button @click="btnClick(10000)">含税价格变为10000</button>
</div>
<hr/>
//seter设置计算属性
let app9 = new Vue({
el: '#app9',
data: {
price: 29999,
},
computed: {
priceIn: {
get: function () {
return this.price * 1.08;
},
set: function (value) {
this.price = value / 1.08;
},
},
chinaPrice: function () {
return Math.round(this.priceIn / 16.75);
},
},
methods: {
btnClick: function (newPrice) {
this.priceIn = newPrice;
}
},
});
------------------------------------------------------------------------
<div id="app8">
今年发布主机价格为:@{{ price }},含税价格:@{{ priceIn }},实际价格@{{ chinaPrice }}
<button @click="btnClick(10000)">加价10000</button>
</div>
<hr/>
let app8 = new Vue({
el: '#app8',
data: {
price: 20000,
priceIn: 0,
chinaPrice: 0,
},
watch: {
price: function (newVal, oldVal) {
console.log(newVal, oldVal);
this.priceIn = Math.round(this.price * 1.08);
this.chinaPrice = Math.round(this.priceIn / 16.75);
},
},
methods: {
btnClick: function (Newprice) {
this.price += Newprice;
}
}
});
----------------------------------------------------------------
<div id="app7">
今年发布主机价格为:@{{ price }},含税价格:@{{ priceIn }},实际价格@{{ chinaPrice }}
</div>
<hr/>
//计算属性
let app7 = new Vue({
el: '#app7',
data: {
price: 3000,
},
computed: {
priceIn: function () {
return this.price * 1.08;
},
chinaPrice: function () {
return Math.round(this.priceIn / 16.75);
},
},
});
-------------------------------------------------------------
<div id="app6">
<p>@{{ message }}</p>
<p>@{{ message | toupper }}</p>
<p>@{{ num }}</p>
<p>@{{ num | topercentage }}</p>
</div>
<hr/>
//过滤器
let app6 = new Vue({
el: '#app6',
data: {
message: 'haDhah',
num: 0.3
},
filters: {
toupper: function (value) {
return value.toUpperCase();
},
topercentage: function (value) {
return value * 100;
}
}
});
--------------------------------------------------------------
<div id="app5">
<ol>
<li v-for="game in games">@{{ game.title }}</li>
<meg v-for="item in games" v-bind:game="item" ></meg>
</ol>
</div>
<hr/>
//组件
//定义组件
Vue.component('meg', {
// 声明 props
props: ['game'],
// 就像 data 一样，prop 可以用在模板内
// 同样也可以在 vm 实例中像“this.message”这样使用
template: '<li>{{ game.title }}</li>'
});
let app5 = new Vue({
el: '#app5',
data: {
games: [
{title: 'dong1'},
{title: 'dong3'},
{title: 'dong7'},
{title: 'dong5'},
],
},
});
------------------------------------------------------
<div id="app4">
<p>您喜欢的游戏是@{{ game }}</p>
<button v-on:click="greet('dong')">dong</button>
<button v-on:click="greet('dong1')">dong1</button>
<button @click="greet('dong12')">dong12</button>
</div>
//v-on 按钮事件,v-on:click="函数名称('传入参数')"
let app4 = new Vue({
el: '#app4',
data: {
game: 'xiao',
},
methods: {
greet: function (name) {
this.game = name
}
}
});
---------------------------------------------------------
<hr/>
<div id="app3">
<input v-model="mygame">
<p>您输入的是@{{ mygame }}</p>
</div>
<hr/>
//v-model 处理用户输入,将输入的内容绑定到变量v-model
let app3 = new Vue({
el: '#app3',
data: {
mygame: 'dongdong'
}
});
----------------------------------------------------
<div id="app2">
<p v-if="seen">look at me</p>
<ol>
<li v-for="game in games">@{{ game.title }}/@{{ game.price }}</li>
</ol>
</div>
<hr/>
//if and for
let app2 = new Vue({
el: '#app2',
data: {
seen: true,
games: [
{title: 'dong1', price: 300},
{title: 'dong2', price: 44},
{title: 'dong3', price: 33},
{title: 'dong4', price: 66},
],
},
});
--------------------------------------------
<div id="app1">
<p>@{{ message }}</p>
</div>
<hr/>
let app1 = new Vue({
el: '#app1',
data: {
message: 'dong !'
}
});
<script src="{{ asset('/js/vue.js') }}"></script>
</body>
</html>
Raw
vue.js
//to get data
let app1 = new Vue({
el: '#app1',
data: {
message: 'dong !'
}
});
//if and for
let app2 = new Vue({
el: '#app2',
data: {
seen: true,
games: [
{title: 'dong1', price: 300},
{title: 'dong2', price: 44},
{title: 'dong3', price: 33},
{title: 'dong4', price: 66},
],
},
});
//v-model 处理用户输入,将输入的内容绑定到变量v-model
let app3 = new Vue({
el: '#app3',
data: {
mygame: 'dongdong'
}
});
//v-on 按钮事件,v-on:click="函数名称('传入参数')"
let app4 = new Vue({
el: '#app4',
data: {
game: 'xiao',
},
methods: {
greet: function (name) {
this.game = name
}
}
});
//组件
//定义组件
Vue.component('meg', {
// 声明 props
props: ['game'],
// 就像 data 一样，prop 可以用在模板内
// 同样也可以在 vm 实例中像“this.message”这样使用
template: '<li>{{ game.title }}</li>'
});
let app5 = new Vue({
el: '#app5',
data: {
games: [
{title: 'dong1'},
{title: 'dong3'},
{title: 'dong7'},
{title: 'dong5'},
],
},
});
//过滤器
let app6 = new Vue({
el: '#app6',
data: {
message: 'haDhah',
num: 0.3
},
filters: {
toupper: function (value) {
return value.toUpperCase();
},
topercentage: function (value) {
return value * 100;
}
}
});
//计算属性
let app7 = new Vue({
el: '#app7',
data: {
price: 3000,
},
computed: {
priceIn: function () {
return this.price * 1.08;
},
chinaPrice: function () {
return Math.round(this.priceIn / 16.75);
},
},
});
let app8 = new Vue({
el: '#app8',
data: {
price: 20000,
priceIn: 0,
chinaPrice: 0,
},
watch: {
price: function (newVal, oldVal) {
console.log(newVal, oldVal);
this.priceIn = Math.round(this.price * 1.08);
this.chinaPrice = Math.round(this.priceIn / 16.75);
},
},
methods: {
btnClick: function (Newprice) {
this.price += Newprice;
}
}
});
//seter设置计算属性
let app9 = new Vue({
el: '#app9',
data: {
price: 29999,
},
computed: {
priceIn: {
get: function () {
return this.price * 1.08;
},
set: function (value) {
this.price = value / 1.08;
},
},
chinaPrice: function () {
return Math.round(this.priceIn / 16.75);
},
},
methods: {
btnClick: function (newPrice) {
this.priceIn = newPrice;
}
},
});
//class属性绑定　v-bind:class
let app10 = new Vue({
el: '#app10',
data: {
isActive: false,
},
methods: {
btnClick: function () {
this.isActive = !this.isActive;
},
},
});
//class 对象绑定绑定多个类
let app11 = new Vue({
el: '#app11',
data: {
myClass: {
textd: true,
big: true,
},
},
methods: {
btnClick: function () {
this.myClass.big = !this.myClass.big;
this.myClass.textd = !this.myClass.textd;
},
},
});
//条件渲染v-if v-else-if v-else
let app12 = new Vue({
el: '#app12',
data: {
dong: 0,
},
methods: {
btnClick: function () {
this.dong = Math.round(Math.random() * 100);
},
},
});
//元素显示　v-show
let app13 = new Vue({
el: '#app13',
data: {
day: true,
},
methods: {
btnClick: function () {
this.day = !this.day;
},
},
});
//列表渲染v-for
let app14 = new Vue({
el: '#app14',
data: {
games: [
{title: 'dong1', price: 400},
{title: 'dong2', price: 450},
{title: 'dong3', price: 460},
{title: 'dong4', price: 420},
{title: 'dong5', price: 480},
],
dongg: {
//key:value
firstName: 'John',
lastName: 'Doe',
age: 30,
},
},
});
//事件处理器v-on
let app15 = new Vue({
el: '#app15',
data: {},
methods: {
txtKeyup: function (event) {
this.debugLog(event);
},
btnClick: function (event) {
this.debugLog(event);
},
debugLog: function (event) {
console.log(
'id是' + event.target.id,
'标签名称是' + event.target.tagName,
'标签内容是' + event.target.innerHTML,
event.key ? 'key是' + event.key : 'kong',
);
},
},
});
//表单空间绑定v-model input
let app16 = new Vue({
el: '#app16',
data: {
message: "hahah",
},
});
//复选框绑定　
let app17 = new Vue({
el: '#app17',
data: {
checkedGames: []
}
});
//单选框绑定
let app18 = new Vue({
el: '#app18',
data: {
pickSex: '',
pickHobby: ''
}
});
//下拉框选择
let app19 = new Vue({
el:'#app19',
data:{
likedNBA:'',
likedNBAs:[],
},
});
//表单修饰符
let app20 =new Vue({
el:'#app20',
data:{
username:'',
checkUsernameOK:false,
age:'',
content:''
},
methods:{
checkUsername:function () {
if (this.username.length > 0) {
this.checkUsernameOK = true;
console.log(this.checkUsernameOK)
}
},
},
});
//组件，基础中的基础,全局组件
Vue.component('today-weather',{
template:'<div>今天也许会下雨吧</div>'
});
let app21 =new Vue({
el:'#app21',
});
//局部组件
let Weather ={
template:'<div>今天也许会下雨吧之局部组件</div>'
};
let app22 = new Vue({
el:'#app22',
components:{
'today-weather':Weather
},
});
//表行组件，为表格进行注册组件
Vue.component('my-row1',{
template:'<tr><td>1</td><td>哈哈1</td></tr>'
});
Vue.component('my-row2',{
template:'<tr><td>2</td><td>哈哈2</td></tr>'
});
Vue.component('my-row3',{
template:'<tr><td>3</td><td>哈哈3</td></tr>'
});
let app23 =new Vue({
el:'#app23'
});
//组件传递数据函数
Vue.component('today-weather',{
template:'<strong>{{ todayw }}</strong>',
data:function () {
return {
todayw:'雨夹雪',
};
}
});
let app24 =new Vue({
el:'#app24'
});
//组件中传递数据
Vue.component('test-result',{
//１组件中绑定的数据，传递过来
props:['score'],
//3对传递过来的数据以及处理的数据传递给模板
template:'<div><strong>{{ score }}分{{ testResult }}</strong></div>',
　//２对传递过来的数据进行运算逻辑处理
computed:{
testResult:function () {
let stri = "";
if (this.score < 60)
stri = "不及格";
else if (this.score < 90)
stri = "中等生";
else if (this.score <= 100)
stri = "ppp中等生";
return stri;
}
}
});
let app25 =new Vue({
el:'#app25'
});
//组件中传递变量
Vue.component('say-hello',{
props:['pname'],
template:'<div>就是{{ pname }}</div>',
});
let app26 = new Vue({
el:'#app26',
data:{
myname:'ko',
},
});
//组件验证数据
Vue.component('show-info',{
props:{
name:{
type:String,
required:true,
},
age:{
type:Number,
validator:function (value) {
return value>= 0 && value <= 130;
},
},
detail:{
type:Object,
default:function () {
return {
address:'us',
language:'dong',
};
},
},
},
template:'<div>name{{ this.name }}<br/>' +
'age{{ this.age }}<br/>' +
'add{{ this.detail.address }}<br/>' +
'addq{{ this.detail.language }}</div>',
});
let app27 = new Vue({
el:'#app27',
});
//组件时间监听，子组件传递数据给父组件
Vue.component('button-counter', {
template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
incrementCounter: function () {
this.counter += 1;
this.$emit('increment',{
dong:30
})
}
},
});
let app28 =new Vue({
el: '#app28',
data: {
total: 0,
dong:66,
},
methods: {
incrementTotal: function (pval) {
this.total += 1;
this.dong = pval.dong;
}
}
});
//slot插槽显示子组件内容，
Vue.component('say-to',{
props:['pname'],
template:'<div>您好，<strong>{{ pname }}</strong>' +
'<slot></slot>' +
'</div>',
});
let app29 = new Vue({
el:'#app29',
});
//组合slot
Vue.component('nba',{
props:['c','pf'],
template:'<div>' +
'中锋{{ c }}<br/>' +
'打钱{{ pf }}<br/>' +
'小钱1<slot name="sf"></slot><br/>' +
'小钱2<slot name="sg"></slot><br/>' +
'小钱3<slot name="pg"></slot><br/>' +
'</div>',
});
let app30 = new Vue({
el:'#app30',
});
//iview,非组件模式
new Vue({
el:'#app31',
data () {
return {
loading: false,
}
},
methods: {
toLoading () {
this.loading = true;
},
}
});
//组件模式
Vue.component('mytem',{
template:'<Button type="primary">Primary</Button>',
});
new Vue({
el:'#app32',
});
//导航栏
Vue.component('navdong',{
template:'<Select v-model="model1" style="width:200px">\n' +
' <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>\n' +
' </Select>',
data () {
return {
cityList: [
{
value: 'beijing',
label: '北京市'
},
{
value: 'shanghai',
label: '上海市'
},
{
value: 'shenzhen',
label: '深圳市'
},
{
value: 'hangzhou',
label: '杭州市'
},
{
value: 'nanjing',
label: '南京市'
},
{
value: 'chongqing',
label: '重庆市'
}
],
}
}
});
new Vue({
el:'#app33',
data:{
model1: ''
}
});
//导航栏
Vue.component('navdong1',{
template:' <Menu mode="horizontal" :theme="theme1" active-name="1">\n' +
' <MenuItem name="1" v-on:click="on-select">\n' +
' <Icon type="ios-paper"></Icon>\n' +
' 内容管理\n' +
' </MenuItem>\n' +
' <MenuItem name="2">\n' +
' <Icon type="ios-people"></Icon>\n' +
' 用户管理\n' +
' </MenuItem>\n' +
' <Submenu name="3">\n' +
' <template slot="title">\n' +
' <Icon type="stats-bars"></Icon>\n' +
' 统计分析\n' +
' </template>\n' +
' <MenuGroup title="使用">\n' +
' <MenuItem name="3-1">新增和启动</MenuItem>\n' +
' <MenuItem name="3-2">活跃分析</MenuItem>\n' +
' <MenuItem name="3-3">时段分析</MenuItem>\n' +
' </MenuGroup>\n' +
' <MenuGroup title="留存">\n' +
' <MenuItem name="3-4">用户留存</MenuItem>\n' +
' <MenuItem name="3-5">流失用户</MenuItem>\n' +
' </MenuGroup>\n' +
' </Submenu>\n' +
' <MenuItem name="4">\n' +
' <Icon type="settings"></Icon>\n' +
' 综合设置\n' +
' </MenuItem>\n' +
' </Menu>\n',
data () {
return {
theme1: 'primary'
}
},
});
new Vue({
el:'#app34',
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment