Vue框架
阿新 • • 發佈：2020-09-07
vue初識（漸進式JavaScript框架）
定義：Vue.js是一套構建使用者介面的框架，只關注檢視層
Vue.js是前端的主流框架之一，和Angular2+、React.js一起，併成為前端三大主流框架！
優點：
1、使用框架，能夠提高開發的效率
2、提高程式碼的維護性，提高效率
3、讓使用者不再操作DOM元素，解放了使用者的雙手，讓程式設計師可以更多的時間去關注業務邏輯
框架與庫的區別：
框架：是一套完整的解決方案；對專案的侵入性較大，專案如果需要更換框架，則需要重新架構整個專案。
庫：提供某一個小功能，對專案的侵入性較小，如果某個庫無法完成某些需求，可以很容易切換到其它庫實現需求。
MVC與MVVM的區別
MVC是後端的分層開發概念;
MVVM是前端檢視層的概念，主要關注於檢視層分離，也就是說：MVVM把前端的檢視層，分為了三部分Model、View、VMViewModel;
Vue.js 的程式碼結構
1、引入vue.js
2、寫檢視層，我們要展示的內容 （body裡的html程式碼）
3、例項化Vue（） var vm = new Vue （{}）
data： 存放資料
el: 控制的是那塊檢視
methods： 放置響應方法
使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body></body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script>//建立vue的例項
var vm = new Vue({
//指定vue控制介面區域 ，只寫id 唯一
el : "#app",
//介面的資料
//之後我們在操作的時候更多的是操作資料，去影響介面宣染
//
data:{
title:"hello vue",
intro:"這是vue的介紹"
},
methods:{
//單擊事件，給按鈕綁定了一個單擊事件，這是單擊事件的相應程式
popOn(){
console.log(this.title)
}
},
})
</script> </html>
插值表示式、v-cloak、v-text、v-html
插值表示式 {{}} 可以在內容前後插入一些內容
v-cloak ： 當js執行完之後顯示頁面。
v-text：會替換掉元素裡的內容
v-html：可以渲染html介面 （識別html標籤）
<style>
/* 屬性選擇器 */
/* 使js載入完成之後在顯示頁面 */
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<h3 v-cloak>{{title}}</h3>
<!-- v-text覆蓋原本的內容 -->
<div v-text="intro">本來的內容</div>
<!-- 插值內容前後 -->
<div>{{intro}}本來的內容</div>
<div v-html="richText"></div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//建立vue的例項
var vm = new Vue({
el: "#app",
data: {
title: "常用指令",
intro: "v-text",
richText:"<div>本來的內容</div>"
}
})
//插值表示式{{}}，可以在前後插入一些內容
// v - text：會替換掉元素裡的內容
// v
v-bind介面元素屬性值的繫結
1.括號裡不加引號的都是我們data裡的資料讀取
2.如果想使用字串需要加上引號
3.裡面可以寫表示式
4.裡面也可以呼叫定義好的方法，拿到的是方法的返回值
使用：
<body>
<div id="app">
<div v-bind:name="divName">標題</div>
<input v-bind:type="inputType" value="點選">
</div>
<script>
/* v - bind
介面元素屬性值的繫結
1.括號裡不加引號的都是我們data裡的資料讀取
2.如果想使用字串需要加上引號
3.裡面可以寫表示式
4.裡面也可以呼叫定義好的方法，拿到的是方法的返回值 */
var vm = new Vue({
el: "#app",
data: {
divName: "title",
inputType: "button"
}
})
</script>
v-on 進行事件的繫結，我們用的最多的是click事件繫結 簡寫@
：click="dianjishijian(引數)" 可以傳引數
<body>
<div id="app">
<h3>{{title}}</h3>
<!-- v-on：事件型別 = “函式名” -->
<button v-on:click="changeTitle1">修改</button>
<button @click="changeTitle">修改2</button>
<button @dblclick="dbl">雙擊</button>
</div>
</body>
<script>
const vm = new Vue({
el: "#app",
data: {
title: "天亮教育"
},
methods: {
changeTitle() {
console.log("點選");
console.log(this.title);//天亮教育
// console.log(title1);//實參
},
changeTitle1() {
console.log("修改");
},
dbl() {
console.log("雙擊了")
}
}
})
</script>
事件修飾符：
1.stop阻止冒泡
2.prevent阻止預設事件
3.capture新增事件偵聽器時使用事件捕獲模式
4.self只當事件在該元素本身（比如不是子元素）觸發時觸發回撥
5.once事件只觸發一次
//阻止事件冒泡 .box { width: 100px; height: 100px; background-color: red; } .box1 { width: 50px; height: 50px; background-color: blue; } </style> </head> <body> <div id="app"> <div class="box" @click="clickBox"> <div class="box1" @click.stop="clickInner"></div> </div> </div> </body> <script> const vm = new Vue({ el:"#app", data:{ }, methods: { clickBox() { console.log("點選了外盒子"); }, clickInner(){ console.log("點選的內盒子"); } } }) </script> //阻止預設事件 <body> <div id="app"> <a href="#" @click.prevent ="aclick">跳轉</a> </div> </body> <script> var vm = new Vue({ el:"#app", data:{ }, methods:{ aclick(){ console("跳轉") } } }) </script> //捕獲模式 <body> <div id="app"> <div class="box" @click.capture="clickBox"> <div class="box1" @click.capture="clickInner"> <div class="box2" @click = "clickInner2"></div> </div> </div> </div> <!-- 捕獲從外向裡 --> </body> <script> const vm = new Vue({ el: "#app", data: { }, methods: { clickBox() { console.log("點選了外盒子"); }, clickInner() { console.log("點選的內盒子"); }, clickInner2() { console.log("點選了最內的盒子"); } } //只當事件在該元素本身（比如不是子元素）觸發時觸發回撥 <body> <div id="app"> <div class="box" @click.self="clickBox"> <div class="box1" @click.self="clickInner"> <div class="box2" @click.self="clickInner2($event)"></div> </div> </div> </div> <!-- 捕獲從外向裡 --> </body> <script> const vm = new Vue({ el: "#app", data: { }, methods: { clickBox() { console.log("點選了外盒子"); }, clickInner() { // console.log(e.target) console.log("點選的內盒子"); }, clickInner2(e) { console.log(e.target) console.log("點選了最內的盒子"); } } }) </script> //事件只觸發一次 <body> <div id="app"> <button @click.once="boxclick">點選</button> </div> </body> <script> var vm = new Vue({ el:"#app", data:{}, methods: { boxclick(){ console.log("點選"); } } })
v-model資料雙向繫結
作用：資料雙向繫結
注意：繫結的是表單控制元件
<body>
<div id="app">
<!-- 作用：資料雙向繫結
注意：繫結的是表單控制元件 -->
<input type="text" v-model="num1">
<button @click = "btn">點選</button>
</div>
</body>
<script>
var vm = new Vue ({
el:"#app",
data:{
num1:1
},
methods:{
btn(){
console.log(this.num1)
}
}
})
</script>
V-for
1.便利陣列，引數(item,index)inlist
2.便利物件，引數(value,key,index)inlist
3.便利數字，numin10(1~10)
<body>
<div id="app">
{{title}}
<ul>
<!-- i為索引 item為內容 -->
<input type="text" v-model="item1">
<button @click="search">檢索</button>
<li v-for="(item,i) in list" @click="show(item.name)" >id：{{item.id}} ----值：{{item.name}}</li>
</ul>
<ul>
<li v-for="(item,i) in list1">id：{{item.id}} ----值：{{item.name}} </li>
</ul>
</div>
</body>
<script>
const vm = new Vue({
el: "#app",
data: {
title: "hello",
obj: {
age: 10
},
list: [{
id: 1,
name: "李白"
},
{
id: 2,
name: "杜甫"
},
{
id: 3,
name: "孟浩然"
}],
list1:[],
item1: null
},
methods:{
show(name){
alert(name);
},
search(){
this.list1 = this.list.filter(item=>{
return item.name == this.item1;
})
}
}
})
</script>