Webå端-Vue.jså¿ å¤æ¡æ¶ï¼ä¸ï¼
Webå端-Vue.jså¿ å¤æ¡æ¶ï¼ä¸ï¼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue js</title>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<input type="text" v-model="message">
<pre>
{{ $data | json }}
</pre>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
message: "Hello World!"
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue js</title>
</head>
<body>
<div id="app">
<form>
<div class="error" v-show="!message">dashucoding</div>
<textarea v-model="message"></textarea>
<button v-show="message">Send</button>
</form>
<pre>{{ $data | json }}</pre>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data:{
message: ''
}
});
</script>
</body>
</html>
v-show
åv-if
使ç¨ç¬¬ä¸ä¸ªæ´ä½å ç´ è¿åå¨ï¼ä½¿ç¨ç¬¬äºä¸ªæ´ä½é½ä¸åå¨äºã
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<link rel = "stylesheet" href="main.css">
</head>
<body>
<div id = "app">
<form action="demo.html" v-on:submit="submitForm">
<button type="submit">Submit</button>
</form>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
methods: {
submitForm: function(e){
alert("dashucoding");
//e.preventDefault();
}
}
})
</script>
</body>
</html>
ç»ä»¶å
<body>
<div id="app">
<count></count>
</div>
<template id="da">
</template>
<script src="vue.min.js"></script>
<script>
Vue.component("counter", {
template: '<h1>dashu</h1>'
});
new Vue({
el: '#app',
data: {
count: 0
},
})
</script>
</body>
ä»ä¹æ¯Vue.js
ï¼æ¯ç®åæç«çæ¡æ¶ï¼React
æ¯ææµè¡çæ¡æ¶ï¼æå
å·¥å
·Webpack
ï¼ç®åä¸å¤§ä¸»æµVue.js
ï¼Angular.js
ï¼React.js
æ¡æ¶ã
Vue.js
æ建ç¨æ·çé¢æ¡æ¶ï¼æ³¨éè§å¾å±ã
React
å¼åç½ç«ï¼å¼åææºAPP
Vue
å¯ä»¥ç¨äºå¼åAPPï¼éè¦Weex
MVC æ¯ å端å¼åçæ¦å¿µ
MVVMï¼è§å¾å±å离
Model, View, VM ViewModel
MVVM
çæ¡ä¾ï¼
v-cloak
[v-clock]{
display: none;
}
<p v-cloak></p>
v-text v-html v-bind: v-on
äºä»¶ä¿®é¥°ç¬¦
v-on
.stop é»æ¢å泡
.prevent é»æ¢é»è®¤äºä»¶
.capture 使ç¨äºä»¶æè·æ¨¡å¼
.self åªå½äºä»¶å¨è¯¥å
ç´ æ¬èº«è§¦åæ¶åè°
.once äºä»¶åªè§¦åä¸æ¬¡
<body>
<div id = "app">
<div>
<input type="button" value="æ³ä»">
<div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
</body>
å®ä¾ï¼Vue.js
åªå
³æ³¨è§å¾å±
<div id = "app">
<p> {{ message }} </p>
</div>
ä¸è½½å°åï¼https://vuejs.org/js/vue.min.js
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
<div id="app">
<span v-bind:title="message">
é¼ æ æ¬å
</span
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
<div id="app">
<p v-if="seen">çå°æäº</p>
</div>
var app = new Vue({
el: '#app',
data: {
seen: true
}
})
æ¡ä»¶å¾ªç¯
<div id="app">
<ol>
<li v-for="do in dos">
{{ do.text }}
</li>
</ol>
</div>
var app = new Vue({
el: '#app',
data: {
dos: [
{ text: 'JavaScript' },
{ text: 'Vue' },
{ text: '项ç®' }
]
}
})
// v-on æ·»å ä¸ä¸ªäºä»¶çå¬å¨
<div id="app">
<p>{{ message }}</p>
<button v-on:click="Message">æ¶æ¯</button>
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js'
},
methods: {
Message: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
ç»ä»¶
Vue.component('do-item', {
template: '<li>dashucoding</li>'
})
<do-item></do-item>
<div id="app">
<ol>
<do-item
v-for="item in List"
v-bind:todo="item"
v-bind:key="item.id"
></do-item>
</ol>
</div>
var app = new Vue({
el: '#app',
data: {
List: [
{ id: 0, text: '1' },
{ id: 1, text: '2' },
{ id: 2, text: 'åçä¸è¥¿' }
]
}
})
计ç®å¨ï¼
<div id="app">
<input type = "text" v-model = "n1">
<select v-model="opt">
<option value="0"> + </option>
<option value="1"> - </option>
<option value="2"> × </option>
<option value="3"> ÷ </option>
</select>
<input type="text" v-model="n2">
<input type="button" value="=" v-on:click="getResult">
<input type="text" v-model="result">
</div>
æ·»å classç±»æ ·å¼
<h1 :class="[ 'red', 'yellow' ]" > </h1>
<h1 :class=" [ 'red', 'than', isactive? 'active' : '' ]">
<h1 :class="[ 'red', 'than', {'active' : isactive}]"></h1>
style
<h1 :style="{color: 'red', 'font-size' : '20px'}"></h1>
v-for
<div id ="app">
//<p>{{list[0]}}</p>
<p v-for="item in list"> {{item}} </p>
<p v-for="(item,i) in list"> {{item}} </p>
</div>
<p v-for="count in 10">{{count}}</p>
v-if ä¸æå建åå é¤ï¼ä¸å©äºéå¤ä½¿ç¨æ¸²æ
v-show ä¸ä¼å é¤DOM
v-cloak v-text v-bind v-on
v-bind :
v-on @
v-model : 表åå
ç´
v-for
v-if
v-show
// äºä»¶ä¿®é¥°ç¬¦
.stop .prevent
.capture
.self
.once
v-for 使ç¨keyå±æ§ string/number
å建ä¸ä¸ªVue
var vm = new Vue({
})
var data={a:1};
var vm = new Vue({
data: data
})
vm.a == data.a // true
çå½å¨æå¾ç¤º
æ°æ®ç»å®
<span> {{msg}} </span>
v-onceæ§è¡ä¸æ¬¡
<span v-once> {{msg}} </span>
<!-- å®æ´è¯æ³ -->
<a v-bind:href="url">...</a>
<!-- 缩å -->
<a :href="url">...</a>
<!-- å®æ´è¯æ³ -->
<a v-on:click="1">...</a>
<!-- 缩å -->
<a @click="1">...</a>
ç®å½ | 说æ |
---|---|
build |
项ç®æ建 |
config |
é ç½®ç®å½ |
mode_modules |
npm å è½½ç项ç®ä¾èµæ¨¡å |
src |
å¼åçç®å½ |
static |
éæèµæºç®å½ |
test |
åå§æµè¯ç®å½ |
index.html |
å ¥å£æ件 |
package.json |
项ç®é ç½®æ件 |
å®ä¾ï¼
<div id="vue_">
<h1>{{site}}</h1>
<h1>{{url}}</h1>
<h1>{{det()}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_',
data: {
site: "123",
url: ".com"
},
methods: {
det: function() {
return this.site;
}
}
})
</script>
v-html="message"
v-bind:class="{'class1': use}"
v-bind:id="id"
<script>
new Vue({
el: '#app',
data: {
id : 1
}
})
</script>
v-if="seen"
<pre><a v-bind:href="url">123</a></pre>
<script>
new Vue({
el: '#app',
data: {
url: '123456'
}
})
</script>
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: '123456!'
}
})
</script>
v-if v-else v-else-if
<div id="app">
<ul>
<li v-for="n in 10">
{{ n }}
</li>
</ul>
</div>
<div id="app">
{{ message.split('').reverse().join('') }}
</div>
Vue
代ç
<body>
<div id="app">
<p>{{ msg }}</p>
</div>
<script>
// vm å¯¹è±¡å°±æ¯ MVVMä¸ç VMè°åº¦è
var vm = new Vue({
el: '#app', // 表示å½åè¦æ§å¶é¡µé¢ä¸çåªä¸ªåºå
// data å°±æ¯ MVVMä¸ç M
data: {
msg: '欢è¿'
}
})
</script>
</body>
v-cloak
,v-bind:
,v-on:
å¦ä¹
<body>
<div id="app">
<!-- v-cloak è§£å³ æå¼è¡¨è¾¾å¼éªççé®é¢ -->
<p v-cloak> {{ msg }} </p>
<h4 v-text="msg">1</h4>
<!-- v-text 没æéªçé®é¢ -->
<!-- v-textä¼è¦çå
ç´ ä¸åæ¬çå
容ï¼æå¼è¡¨è¾¾å¼ä¸ä¼ææ´ä¸ªå
ç´ çå
容æ¸
空 -->
<div>{{msg2}}</div>
<div v-text="msg2"></div>
<div v-html="msg2">111</div>
<!-- v-bind: æä¾ç»å®å±æ§çæ令 -->
<!-- <input type="button" value="æé®" v-bind:title="my"> -->
<!-- v-on: äºä»¶ç»å®æºå¶ -->
<!-- <input type="button" value="æé®" :title="my" v-on:click="alert('hello')"> -->
<input type="button" value="æé®" @click="show">
</div>
<script src="./lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '123',
msg2: '<h1>1111</h1>',
my: '11111'
},
methods: {
show: function () {
alert('Hello')
}
}
})
</script>
</body>
ååºææ
<body>
<!-- 2. å建ä¸ä¸ªè¦æ§å¶çåºå -->
<div id="app">
<input type="button" value="1" @click="lang">
<input type="button" value="2" @click="stop">
<h4>{{ msg }}</h4>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'dashu',
intervalId: null
},
methods: {
lang() {
if (this.intervalId != null) return;
this.intervalId = setInterval(() => {
var start = this.msg.substring(0, 1)
var end = this.msg.substring(1)
this.msg = end + start
}, 600)
},
stop() {
clearInterval(this.intervalId)
this.intervalId = null;
}
}
})
</script>
</body>
äºä»¶ä¿®é¥°ç¬¦
.stop
é»æ¢å泡.prevent
é»æ¢é»è®¤è¡ä¸º.capture
å®ç°æè·äºä»¶çæºå¶.self
å®ç°åªç¹å»å½åå
ç´ ï¼æä¼è§¦åäºä»¶.once
åªè§¦åä¸æ¬¡äºä»¶
v-model
æ令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>dashu</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<h4>{{ msg }}</h4>
<input type="text" style="width:100%;" v-model="msg">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '123'
},
methods: {
}
});
</script>
</body>
</html>
计ç®å¨
var Str = 'parseInt(this.n1) ' + this.opt + ' parseInt(this.n2)'
this.result = eval(Str)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>dashu</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="n1">
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2">
<input type="button" value="=" @click="calc">
<input type="text" v-model="result">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
n1: 0,
n2: 0,
result: 0,
opt: '+'
},
methods: {
calc() {
switch (this.opt) {
case '+':
this.result = parseInt(this.n1) + parseInt(this.n2)
break;
case '-':
this.result = parseInt(this.n1) - parseInt(this.n2)
break;
case '*':
this.result = parseInt(this.n1) * parseInt(this.n2)
break;
case '/':
this.result = parseInt(this.n1) / parseInt(this.n2)
break;
}
}
}
});
</script>
</body>
</html>
vue
æ ·å¼
<h1 class="red"></h1>
<h1 :class=" [ 'red', 'green' ] "></h1> ç»å®æ°ç»
<h1 :class=" [ 'red', 'green', flag?'active':'' ] "></h1> ä¸å
表达å¼
<h1 :class="classObj">123</h1>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: true,
classObj: { red: true, green: true, active: false }
},
methods: {}
});
</script>
æ ·å¼ï¼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>dashu</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<!-- <h1 :style="ss">12</h1> -->
<h1 :style="[ ss, ee ]">123</h1>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
ss: { color: 'red', 'font-weight': 200 },
ee: { color: 'red' }
},
methods: {}
});
</script>
</body>
</html>
for
循ç¯
// æ°ç»å¯¹è±¡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>dashu</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p v-for="(item, i) in list">{{ item.id }} - {{ item.name }} - {{i}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [
{ id: 1, name: 'd' },
{ id: 2, name: 'dd' },
{ id: 3, name: 'ddd' },
{ id: 4, name: 'dddd' }
]
},
methods: {}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>dashu</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p v-for="(item, i) in list">{{i}} - {{item}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [1, 2, 3, 4 ]
},
methods: {}
});
</script>
</body>
</html>
// 循ç¯å¯¹è±¡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>dashu</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p v-for="(val, key, i) in user">{{ val }} -- {{key}} -- {{i}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
user: {
id: 1,
name: 'da',
gender: 'ç·'
}
},
methods: {}
});
</script>
</body>
</html>
// è¿ä»£æ°å
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>dashu</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p v-for="count in 6"> {{ count }} </p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
</body>
</html>
key
å±æ§ä½¿ç¨
<p v-for="item in list" :key="item.id">
<input type="checkbox">{{item.id}} --- {{item.name}}
</p>
add() {
this.list.unshift({ id: this.id, name: this.name })
}
v-if
æ¯æ¬¡é½ä¼éæ°å é¤åå建å
ç´ ï¼æ§è½æ¶èé«v-show
æ¯æ¬¡ä¸ä¼éæ°å建ï¼åå§æ¸²ææ¶èé«
vue
ä¸ç»å®æ ·å¼ä¸¤ç§æ¹æ³ï¼
v-bind: class v-bind:style
ç»è¨
好äºï¼æ¬¢è¿å¨çè¨åºçè¨ï¼ä¸å¤§å®¶åäº«ä½ çç»éªåå¿å¾ã
æè°¢ä½ å¦ä¹ ä»å¤©çå 容ï¼å¦æä½ è§å¾è¿ç¯æç« å¯¹ä½ æ帮å©çè¯ï¼ä¹æ¬¢è¿æå®å享ç»æ´å¤çæåï¼æè°¢ã
ä½è ç®ä»
è¾¾åï¼çå·¥ç·ï¼ç®ä¹¦ä½è &å ¨æ å·¥ç¨å¸ï¼ææ§çæ§å ¼å¤çåä½è ï¼ä¸ªäººç¬ç«å¼åè ï¼æç¸ä¿¡ä½ ä¹å¯ä»¥ï¼é 读ä»çæç« ï¼ä¼ä¸ç¾ï¼ï¼å¸®ä½ æ为æ´å¥½çèªå·±ãé¿æä¸æ¹äºç»´ç å¯å ³æ³¨ï¼æ¬¢è¿å享ï¼ç½®é¡¶å°¤ä½³ã