Vue2.0基礎(chǔ)(一)
image
搭建項目
mkdir vue-demo
cd vue-demo
npm init -y
vue官網(wǎng)下載vue.js
創(chuàng)建相關(guān)目錄
├── assets
│ ├── css
│ └── js
│ └── vue.js
├── example
├── index.html
└── package.json
cd vue-demo
live-server
創(chuàng)建hello-world.html
cd example
touch hello-world.html
hello-world.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello world</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<h1>hello world</h1>
<hr>
<div id="app">{{message}}</div>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {
message: 'hello world'
}
})
</script>
</body>
</html>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js實例</title>
</head>
<body>
<h1>vue2.0實例</h1>
<hr>
<ul>
<li><a href="./example/hello-world.html">hello world 實例</a></li>
</ul>
</body>
</html>
效果
174
v-show v-if v-else
相同點：v-if與v-show都可以動態(tài)控制dom元素顯示或隱藏
不同點：v-if顯示隱藏是將dom元素添加或刪除排霉，而v-show是為該元素添加css(display: none;)窍株，dom元素還在
使用場景：v-if有更高的切換消耗，適合不大可能經(jīng)常改變的情況攻柠；v-show有更高的初始渲染消耗球订，適合頻繁切換
cd example
touch v-if.html
v-if.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-if v-else v-show 實例</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-if v-else v-show 實例</h1>
<hr>
<div id="app">
<div v-if="isIf">v-if 顯示</div>
<div v-else>v-if 隱藏</div>
<div v-show="isShow">v-show</div>
</div>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {
isIf: true,
isShow: false
}
})
</script>
</body>
</html>
效果
175
v-for
touch v-for.html
v-for.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-for 實例</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-for 實例</h1>
<hr>
<div id="app">
<ul>
<li v-for="(item, index) in sortItems" :key="index">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {
list: [5, 12, 78, 4]
},
computed: {
sortItems: function() {
return this.list.sort(sortNumber)
}
}
})
function sortNumber(a, b) {
return a - b;
}
</script>
</body>
</html>
效果
176
v-text v-thml
當網(wǎng)絡(luò)很慢或js出錯時，會顯示出{{xxx}}瑰钮。為解決這個問題冒滩，v-text、v-html應(yīng)運而生
v-text：渲染普通文本浪谴，不解析標簽
v-html：解析標簽并渲染文本數(shù)據(jù)
touch v-text.html
v-text.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-text v-html 實例</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-text v-html 實例</h1>
<hr>
<div id="app">
<div>{{message}}下面等效</div>
<div v-text="message"></div>
<div>少用v-html 可能引起xss攻擊</div>
<div v-html="todo"></div>
</div>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {
message: 'hello world',
todo: '<h2>hello world</h2>'
}
})
</script>
</body>
</html>
效果
177
v-on(@)
綁定事件
v-on.thml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>v-on綁定事件</title>
</head>
<body>
<h1>v-on 綁定事件</h1>
<hr>
<div id="app">
考試得分： {{count}}<br/>
<button v-on:click="add">加分</button>
<button v-on:click="reduce">減分</button>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data: {
count: 1
},
methods:{
add: function() {
this.count++;
},
reduce: function() {
this.count--;
}
}
})
</script>
</body>
</html>
效果
178
簡寫
<button @click="add">加分</button>
綁定其他事件
<input type="text" @keyup.enter="onEnter">
v-modal
數(shù)據(jù)雙向綁定
v-model.html
<div id="app">
<p>v-model內(nèi)容：{{message}}</p>
<h3>文本框</h3>
<p>v-model輸入: <input type="text" v-model.number="message"></p>
</div>
js
const app = new Vue({
el: '#app',
data: {
message: 'hello world'
}
})
效果
182
修飾符
- .lazy
change事件之后進行同步數(shù)據(jù) - .number 輸入值自動轉(zhuǎn)為數(shù)值類型开睡，若值無法被
parseFloat()解析，則會返回原始的值 - .trim 自動過濾輸入值的首尾空白字符
v-bind(:)
綁定數(shù)據(jù)和元素屬性
元素屬性
v-bind.html
<div id="app">
<img v-bind:src="imgUrl" alt="" srcset="">
</div>
js
const app = new Vue({
el: '#app',
data: {
imgUrl: 'https://gitee.com/itxing666/blog-images/raw/master/img/code.png'
}
})
綁定數(shù)據(jù)
<div :class="className">綁定className</div>
<div :class="{className: isOk}">isOk判斷綁定class</div>
<div :class="isOk ? classA : classB">三元表達式判斷</div>
<div :class="[classA, classB]">綁定class數(shù)組</div>
<div :text="1 + 2">運算</div>
<div :text="getText()">綁定方法</div>
<div :text="obj">綁定對象</div>
v-pre v-cloak v-once
v-pre
原樣輸出
html
<div v-pre>{{ message }}</div>
js
const app = new Vue({
el: '#app',
data: {
message: 'hello world'
}
})
效果
184
v-cloak
網(wǎng)速慢時较店，頁面會閃現(xiàn)標簽里插值表達式士八，例如{{ message }}容燕。使用v-cloak梁呈，還沒渲染完時有這個屬性的的樣式設(shè)為隱藏，渲染完v-cloak標簽會自動消失變回顯示
style
<style>
[v-cloak] {
display: none;
}
</style>
html
<div v-cloak>{{ message }}</div>
v-once
只渲染一次
html
<div v-once>第一次綁定的值：{{message}}</div>
<input type="text" v-model="message" >
效果
185
