初識vue2.0
#下載vue.js
vue.js（開發調試用）
vue.min.js（生產環境用）
#建立基本目錄
#用管理員身份打開cmd
#進入到項目目錄
D:\>cd D:\workspace\vue\vue-test1
#安裝live-server
D:\workspace\vue\vue-test1>cnpm install -g live-server
#執行live-server運行項目
live-server
#初始化項目，生成package.json (執行1次就好)
npm init
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>HelloWord</h1>
<hr>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'hello word!+xwk'
}
})
</script>
</body>
</html>
v-if v-else v-show
- v-if：判斷是否加載，可以減輕服務器的壓力，在需要時加載
- v-show：不管true還是false都加載，只不過是調整css display屬性讓其是否顯示，可以使客戶端操作更加流暢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if v-else v-show指令</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-if v-else v-show指令</h1>
<hr>
<div id="app">
<!-- v-if:判斷是否加載，可以減輕服務器的壓力，在需要時加載 -->
<div v-if="isLogin">歡迎，xwk</div>
<div v-else>請登錄</div>
<!-- v-show:不管true還是false都加載，只不過是調整css display屬性讓其是否顯示，可以使客戶端操作更加流暢 -->
<!--<div v-show="isLogin">歡迎，xwk</div>-->
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
isLogin:true
}
})
</script>
</body>
</html>
v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-for</h1>
<hr>
<div id="app">
<ul>
<li v-for="item in sortItems">
{{item}}
</li>
</ul>
<hr>
<ul>
<li v-for="(student,index) in sortStudents">
{{index+1}}:{{student.name}}-{{student.age}}
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
// 1.先執行data
data: {
items:[3,6,2,7,9,1],
students:[
{name:'xwk',age:28},
{name:'wkx',age:45},
{name:'kwx',age:18}
]
},
// 2.再執行computed
computed:{
sortItems:function () {
return this.items.sort(sortNum);
},
sortStudents:function () {
return sortByKey(this.students,'age');
}
}
})
// 數組排序
function sortNum(a,b){
return a-b
}
// 數組對象方法排序
function sortByKey(array,key) {
return array.sort(function (a,b) {
var x=a[key];
var y=b[key];
return((x<y)?-1:((x>y)?1:0));
});
}
</script>
</body>
</html>
v-text v-html
v-html會引起xss攻擊 一般不推薦使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-text v-html</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-text v-html</h1>
<hr>
<div id="app">
<span>{{message}}</span> = <span v-text="message"></span>
<br/>
<!-- v-html會引起xss -->
<span v-html="dodo"></span>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'hello word!+xwk',
dodo:'<h2>hello word!+xwk</h2>'
}
})
</script>
</body>
</html>
v-on
綁定事件監聽器
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>v-on</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-on</h1>
<hr>
<div id="app">
本場比賽得分：{{fenshu}}
<p>
<button v-on:click="jiafen" >加分</button>
<button @click="jianfen" >減分</button>
<hr>
<!-- 回車響應 -->
<input type="text" v-on:keyup.enter="onEnter" v-model="fenshu2">
</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
fenshu: 0,
fenshu2:1
},
methods:{
jiafen:function () {
this.fenshu++;
},
jianfen:function () {
this.fenshu--;
},
onEnter:function () {
this.fenshu=this.fenshu+parseInt(this.fenshu2);
}
}
})
</script>
</body>
</html>
v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model數據源綁定</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-model數據源綁定</h1>
<hr>
<div id="app">
<p>原始文本信息：{{message}}</p>
<!-- 文本框 -->
<hr>
<h3>文本框</h3>
<p>
v-model：<input type="text" v-model="message">
<!-- v-model.lazy懶加載：焦點離開時改變 -->
v-model.lazy：<input type="text" v-model.lazy="message">
<!-- v-model.number：只有數字才能雙向綁定 -->
v-model.number：<input type="text" v-model.number="message">
<!-- v-model.trim：去空格 -->
v-model.trim：<input type="text" v-model.trim="message">
</p>
<!-- 文本域 -->
<hr>
<h3>文本域</h3>
<textarea cols="30" rows="10" v-model="message"></textarea>
<hr>
<h3>多選框綁定一個值</h3>
<input type="checkbox" id="isTrue" v-model="isTrue">
<label for="isTrue">{{isTrue}}</label>
<!-- 多選框綁定數組 -->
<hr>
<h3>多選框綁定數組</h3>
<p>
<input type="checkbox" id="xwk" value="xwk" v-model="web_names"><label for="xwk">xwk</label>
<input type="checkbox" id="wkx" value="wkx" v-model="web_names"><label for="wkx">wkx</label>
<input type="checkbox" id="kwx" value="kwx" v-model="web_names"><label for="kwx">kwx</label>
</p>
<p>{{web_names}}</p>
<!-- 單選框綁定 -->
<hr>
<h3>單選框綁定</h3>
<p>
<input type="radio" id="one" value="男" v-model="sex"><label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex"><label for="two">女</label>
<p>{{sex}}</p>
</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'hello word!+xwk',
isTrue:true,
web_names:[],
sex:'男'
}
})
</script>
</body>
</html>
v-bind
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>v-bind綁定標籤屬性</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-bind綁定標籤屬性</h1>
<hr>
<div id="app">
<p><img v-bind:src="imgSrc" width="200px"></p>
<p><a :href="webUrl" target="_blank">百度</a></p>
<hr>
<div :class="className">1.綁定class</div>
<div :class="{classA:isOK}">2.綁定class中的判斷</div>
<hr>
<div>
<input type="checkbox" id="isOK" v-model="isOK"><label for="isOK">isOK={{isOK}}</label>
</div>
<hr>
<div :class="[classA,classB]">3.綁定class中的數組</div>
<hr>
<div :class="isOK?classA:classB">4.綁定class中的三元運算符</div>
<hr>
<div :style="{color:redVal,fontSize:fontVal}">5.綁定style</div>
<div :style="styleObj">5.綁定style</div>
</div>
<style>
.classA{
color: red;
}
.classB{
font-size: 150%;
}
</style>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
imgSrc:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586183309110&di=be1bb9ab674d98a6d65a79611251ff97&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F78%2F52%2F01200000123847134434529793168.jpg',
webUrl:"http://www.baidu.com",
className:"classA",
isOK:true,
classA:'classA',
classB:'classB',
redVal:'red',
fontVal:"20px",
styleObj:{
color:'green',
fontSize:'24px'
}
}
})
</script>
</body>
</html>
v-pre v-cloak v-once
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-pre v-cloak v-once</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-pre v-cloak v-once</h1>
<hr>
<div id="app">
<!-- 原樣輸出{{message}} -->
<div v-pre>{{message}}</div>
<div v-cloak>渲染完成後，才顯示！</div>
<!-- 只進行一次渲染 -->
<div v-once>{{message}}</div>
<div><input type="text" v-model="message"></div>
<div>{{message}}</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'hello word!+xwk'
}
})
</script>
</body>
</html>