目錄
插值表達式{{}}、v-cloak、v-text、v-html、v-bind、v-on
基礎
起步
一定一定要引入vue.js：
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
//當我們導包的時候，瀏覽器的內存中，就多了一個Vue構造函數
var vm = new Vue({ //每次都需要new Vue
el: '#app',
data: { //data屬性中存放的是el中要用到的數據
message: 'Hello Vue.js!' //不需要手動操作dom元素
}
})
</script>
插值表達式{{}}、v-cloak、v-text、v-html、v-bind、v-on
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app">
<!-- 使用v-cloak 能夠解決插值表達式閃爍問題-->
<p v-cloak>-----{{ message }}--+++</p>
<h4 v-text="message">=-=-=-=</h4>
<!--
區別：1.v-text會覆蓋元素中原本的內容，插值表達式只會替換自己的佔位符，不會把整個元素內容清空。
2.v-text不會有閃爍問題，插值表達式會有閃爍問題
3.v-html會解析html標籤
-->
<div>{{ message2 }}</div>
<div v-text="message2"></div>
<div v-html="message2"></div>
<!--v-bind: 是vue定義提供的用於綁定屬性的指令 -->
<!--v-bind:可以簡寫爲: -->
<!--v-bind:中可以寫合法的js表達式 -->
<input type="button" value="按鈕" v-bind:title="mytitle + '123'" />
<!-- vue中提供了v-on:事件綁定機制 ，注意，v-on裏面也是變量，不能直接alert等等-->
<!-- vue中提供了v-on:事件綁定機制 ，v-on可以縮寫爲@，方法不需要傳參可以不寫括號-->
<input type="button" value="按鈕2" :title="mytitle + '123'" v-on:click="show" />
<input type="button" value="按鈕3" :title="mytitle + '123'" @mouseleave="show()" />
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
message2: '<h1>我是H1</h1>',
mytitle: '這是自定義title'
},
methods: { //這個metho屬性中定義了當前vue實例中所有的方法
show: function() {
alert('hello');
}
}
})
</script>
學了這麼多了，寫一個跑馬燈效果鞏固一下吧
<body>
<div id="app">
<!--<input type="button" value="浪起來" @click="lang"/>-->
<input type="button" value="浪起來2" @click="lang2" />
<input type="button" value="停止" @click="stop" />
<h4>{{ msg }}</h4>
</div>
</body>
<script>
//this.數據屬性名 或this.方法名，來獲取當前實例的屬性和方法
//vue會監聽data的改變,如果data改變,會立即應用到view中去（好處：只關心數據，不需要關心如何渲染到頁面）
var vm = new Vue({
el: "#app",
data: {
msg: "猥瑣發育，別浪~~",
intervalId: null //定時器的id
},
methods: {
lang: function() {
var _this = this;
//this指向問題
if(this.intervalId != null) return;
this.intervalId = setInterval(function() {
var start = _this.msg.substring(0, 1);
var end = _this.msg.substring(1);
_this.msg = end + start;
}, 200)
},
lang2() { //es6語法
//箭頭函數，解決this指向問題
//定時器只能開一次，做判斷
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;
}, 200)
},
stop() { //停止定時器
clearInterval(this.intervalId);
this.intervalId = null;
}
}
})
</script>
事件修飾符（打開瀏覽器f12調試哦）
<style>
.inner {
height: 50px;
background-color: chartreuse;
}
.out {
padding: 10px;
background-color: red;
}
</style>
<body>
<div id="app">
<!-- 這裏點擊按鈕，會先觸發按鈕的事件，再觸發div的點擊事件，原因：冒泡 -->
<div class="inner" @click="divclk">
<input type="button" @click="btnclk" value="戳我" />
<!-- .stop來阻止冒泡，只觸發按鈕的點擊事件 -->
<input type="button" @click.stop="btnclk" value="戳我" />
<br/>
<!-- prevent阻止默認行爲，這裏阻止了a標籤跳轉到百度（也可以用於阻止submit） -->
<a href="http://www.baidu.com" @click.prevent="aclk">先去百度</a>
</div>
<div class="inner" @click.capture="divclk">
<!-- capture捕獲機制，先觸發外層div的點擊，再觸發按鈕的點擊事件 -->
<!-- 這裏需要在上層的div點擊事件加capture<div class="inner" @click="divclk">-->
<input type="button" @click="btnclk" value="戳我capture" />
</div>
<!-- self只有點擊當前元素時纔會觸發-->
<div class="inner" @click.self="divclk">
<input type="button" @click="btnclk" value="戳我self" />
</div>
<!-- prevent阻止默認行爲，這裏阻止了a標籤跳轉到百度（也可以用於阻止submit） -->
<!-- once只會觸發一次，默認行爲也會只執行一次 -->
<!--可以串聯使用 -->
<a href="http://www.baidu.com" @click.prevent.once="aclk">先去百度</a>
<!--演示.stop和.self區別-->
<!--
.self只會阻止自己身上冒泡行爲的觸發，並不會真正阻止冒泡行爲。
-->
<div class="out" @click="otdivclk">
<div class="inner" @click="divclk">
<input type="button" @click.stop="btnclk" value="戳我" />
</div>
</div>
<div class="out" @click="otdivclk">
<div class="inner" @click.self="divclk">
<input type="button" @click="btnclk" value="戳我" />
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
},
methods: {
btnclk() {
console.log("這是按鈕的點擊");
},
divclk() {
console.log("這是div點擊");
},
aclk() {
console.log("a點擊了");
},
otdivclk() {
console.log("外層div點擊");
}
}
})
</script>
v-model實操
<body>
<div id="app">
<h4>{{ msg }}</h4>
<!--v-bind只能實現數據的單向綁定-->
<input type="text" :value="msg" />
<!--v-model能實現數據的雙向綁定，只能用於表單元素input,select,checkbox,textarea-->
<input type="text" v-model="msg" />
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "大家都是好學生"
},
methods: {
}
})
</script>
<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>
</body>
<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;
default:
break;
}*/
//eval解析字符串 投機取巧的方式，正式開發儘量少用
var codeStr = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)'
this.result = eval(codeStr);
}
}
})
</script>
樣式
外聯樣式
<style>
.red {
color: red;
}
.thin {
font-weight: 200;
}
.italic {
font-style: italic;
}
.active {
letter-spacing: 0.5em;
}
</style>
<body>
<div id="app">
<h1 class="red thin">這是一個h1</h1>
<!--第一種方式，直接傳遞一個數組，注意這裏需要用v-bind做綁定。如果沒有該變量，用引號可以直接獲取class-->
<h1 :class="['red', 'italic']">數組</h1>
<!--第二種方式：三元表達式-->
<h1 :class="['red', 'italic', flag ? 'active':'']">三元表達式</h1>
<!--第三種方式：數組中使用對象-->
<h1 :class="['red', 'italic', {'active':flag}]">對象</h1>
<!--第四種方式：直接使用對象，爲class使用v-bind使用對象時候，對象屬性是類名（屬性可帶引號可不帶）；
屬性值爲標識符
-->
<h1 :class="{'red':flag, italic:flag,active:false}">直接使用對象</h1>
<h1 :class="classObj">直接使用對象</h1>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
flag: true,
classObj: {
'red': false,
italic: true,
active: false
}
},
methods: {
}
})
</script>
內聯樣式
<body>
<div id="app">
<!--對象就是無序鍵值對的集合-->
<h1 :style="{color:'red', 'font-weight':200}">這是對象</h1>
<h1 :style="styleObj1">這是對象</h1>
<!--對象數組-->
<h1 :style="[styleObj1, styleObj2]">這是對象數組</h1>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
flag: true,
styleObj1: {
color: 'red',
'font-weight': 200
},
styleObj2: {
'font-style': 'italic'
}
},
methods: {
}
})
</script>
v-if、v-show
<body>
<div id="app">
<input type="button" value="點擊" @click="toggle" />
<input type="button" value="或者直接這樣點擊" @click="flag = !flag" />
<!--
v-if是每次都會重新刪除或創建元素；
v-show是每次不會重新刪除創建元素，只是切換display:none樣式
v-if有較高的切換性能消耗，v-show有較高的初始渲染消耗
-->
<h3 v-if="flag">v-if</h3>
<h3 v-show="flag">v-show</h3>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: true
},
methods: {
toggle() {
this.flag = !this.flag;
}
}
})
</script>
v-for
<body>
<div id="app">
<!--循環數字數組-->
<span v-for="item in list">{{ item }}</span>
<br />
<span v-for="(item, i) in list">值：{{ item }}索引： {{ i }}</span>
<hr />
<!--循環對象數組,i爲索引-->
<p v-for="user in listObj">id:{{ user.id }}名字：{{ user.name }}</p>
<!--<p v-for="(user, i) in listObj">id:{{ user.id }}名字：{{ user.name }}</p>-->
<hr />
<!--循環對象-->
<!--注意，在遍歷對象身上的鍵值對時，除了有val，key，還有索引i-->
<p v-for="(val, key, i) in user">{{ val }}: {{ key }}: {{ i }}</p>
<hr />
<!--迭代數字,從1開始，同樣也有索引-->
<p v-for="(count, i) in 5">{{ count }} {{ i }}</p>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
list:[1, 2, 3, 4, 5, 6],
listObj:[
{ id :1, name:'z1'},
{ id :2, name:'z2'},
{ id :3, name:'z3'},
{ id :4, name:'z4'}
],
user:{
id:1,
name:'z3',
gender:'男'
}
},
methods:{
}
})
</script>
<body>
<div id="app">
<div>
<label>id:
<input type="text" v-model="id" />
</label>
<label>name:
<input type="text" v-model="name" />
</label>
<input type="button" value="添加" @click="add" />
</div>
<!--
注意：v-for循環的時候，key屬性只能用number或string
注意：key在使用的時候，必須使用v-bind綁定
在組件中使用v-for，或者在一些特殊情況中，必須使用key
-->
<p v-for="item in list" :key="item.id">
<input type="checkbox" value="item.id" /> ------{{ item.id }}----{{ item.name }}
</p>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
id: '',
name: '',
list: [{
id: 1,
name: 'z1'
},
{
id: 2,
name: 'z2'
},
{
id: 3,
name: 'z3'
},
{
id: 4,
name: 'z4'
}
]
},
methods: {
add() {
this.list.unshift({
id: this.id,
name: this.name
}); //前插入
}
}
})
</script>