前端框架Vue
Vue框架是一套用于構建用戶界面的漸進式框架，
采用的是MVVM模式，即：通過視圖與模型的雙向系結，簡化前端操作，
漸進式：指的是可以選擇性的使用該框架的一個或多個組件，不對你的使用進行要求，
那么前端框架三巨頭 ： Vue.js React.js AngularJs
vue.js 的下載 （vpm下載）
- 這里我們通過vpm的方式下載哈，
- 首先要使用vpm，我們先下載nodejs ,
- 下載好后我們進去idea，
- 這樣顯示，我們就可以了，然后我們的idea就會多一個package.json的檔案，進行cmd，進入這個檔案，運行腳本就行拉，
- 這樣，vue.js就安裝好了，
演示雙向系結與事件處理
- 創建一個初始化頁面
- 然后進頁面，右擊檢查，然后對app.name進行修改，頁面也會發生修改，
- 然后我們可以使用{{}}獲取顯示資料
- v-model實作雙向系結
- v-on演示事件處理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="num">
<button v-on:click="num++">點我</button>
<h2>{{name}} 非常酷 有{{num}}個學科</h2>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
name:"junmu",
num:1
}
});
</script>
</body>
</html>
vue實體生命周期及鉤子函式（監聽函式）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
msg:"好家伙"
},
created() { // 鉤子函式 this表示vue實體
this.msg = "hello vue.created1.";
console.log(this)
}
});
</script>
</body>
</html>
雙向系結v-model
雙向系結，一定是在視圖中修改資料，v-model可以使用的元素有：
- input
- select
- textarea
- checkbox
- radio
- components (Vue中的自定義組件）
演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="checkbox" value="Java" v-model="language">Java<br>
<input type="checkbox" value="C++" v-model="language">C++<br>
<input type="checkbox" value="Python" v-model="language">Python<br>
<input type="checkbox" value="Swift" v-model="language">Swift<br>
<h2>
您選擇了{{language.join(",")}}
</h2>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
language:[]
}
});
</script>
</body>
</html>
- 然后就可以做到以下結果拉，選什么就亮什么
v-on 資料的遞增遞減
- v-on可以回應事件，該指定可以給頁面元素系結事件
- 例如： v-on:clike= ’ add ’ ,可以簡寫成 @clike= ’ add ’
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="num">
<button @click="num++">點我加1</button>
<button @click="decrement">點我減1</button>
<h2>{{name}} 非常酷 有{{num}}個學科</h2>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
name:"junmu",
num:1
},
methods:{
// 減法
decrement(){
this.num--;
}
}
});
</script>
</body>
</html>
阻止事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div style="background-color: aqua; width:100px;height: 100px" @click="print1()">
<button @click.stop="print2()" >點我試試</button>
</div>
{{msg1}}
<br>
{{msg2}}
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
msg1:"",
msg2:""
},
methods:{
print1(){
this.msg1 = "背景被點了";
},
print2() {
this.msg2 = "按鈕被點了";
}
}
});
</script>
</body>
</html>
- 加上.stop后，該組件就不會再往上面冒泡了，
v-for v-if v-else 回圈組件使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="show=!show" >點我</button>
<ul v-if="show">
<li v-for="(user,index) in users" v-if="user.gender == '女'" style="background-color: pink">
{{index+1}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
<div v-for="(value,key,index) in user">
***{{index}} -- {{value}} -- {{key}}
</div>
</li>
<li v-else style="background-color: aqua">
{{index+1}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
<div v-for="(value,key,index) in user">
***{{index}} -- {{value}} -- {{key}}
</div>
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
show:true,
users:[
{"name":"小黑","age":12,"gender":"男"},
{"name":"小白","age":23,"gender":"男"},
{"name":"小紅","age":18,"gender":"女"}
]
}
});
</script>
</body>
</html>
- 效果圖如下：
- 點擊按鈕就會顯示或者影藏
日期的展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>
你的生日是：
{{new Date(birthday).getFullYear()}} - {{new Date(birthday).getMonth()}} - {{new Date(birthday).getDay()}}
</h2>
<hr>
<h2>
你的生日是：
{{birth}}
</h2>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
birthday:1489032145615
},
computed:{
birth(){
const date = new Date(this.birthday);
return date.getFullYear() + "-" + date.getMonth() + "-" + date.getDay();
}
}
});
</script>
</body>
</html>
- 效果圖
- 這里時間我是隨便輸入的毫秒值哈，
watch：用于深度監控，可以監控舊值和新值
組件的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<counter></counter>
</div>
<script type="text/javascript">
const counter = {
template:"<button @click='num++'>你點擊了{{num}}次</button>",
data(){
return {num:0}
}
}
// 這個屬于全域注冊，這樣不好，我們搞個區域注冊
//Vue.component("counter",counter);
var app = new Vue({
el:"#app",
components:{
counter : counter
}
});
</script>
</body>
</html>
- 這個沒啥好說的
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/290461.html
標籤：其他
下一篇：React (基礎與安裝)