Vue（一）初識
Vue的意義：將開發者的精力從dom操做解脫，更加專一於數據的操做，
數據驅動，界面的渲染 隨着數據的變化自動變化
1.將開發者的精力從dom中解除， 極少作dom操做
2.經過指令（directive）將元素和數據進行綁定
3.數據變化元素界面變化
4.開發者關注數據的變化
配置：Vue官網下載；或npm install vuejavascript
js引入包後，實例化Vue對象；
var vm = new Vue({//實例化
el: '#btn',//選擇標籤（做用區域）
data: {//變量（數據），關聯頁面的標籤
bool: true
}，
methods:{//寫方法的對象
Fn1(){//方法
},
Fn2(){
}
}
});
渲染數據：
<div id='app'>{{name}}</div>//用插值的方式{{}}來放置data的變量
Vue的數據是雙向數據的綁定，數據相互依賴，缺點是源頭很難找到，可是提高了數據的感知css
指令：
v-if（條件渲染）html
<p v-if='bool'></p>//條件知足時顯示元素 <p v-else></p>//不然顯示元素 <p v-else-if='bool'></p>//條件知足時顯示元素
v-for（列表渲染）用for in和for of都行（注意：若遍歷數組的時候有重複項，要用一個bind綁定數據不然會出錯，如<li v-for='(item,index) in list' v-bind : key=index>{{item}}--{{index}}</li>）vue
//數組
<li v-for='item in list'>{{item}}</li>//item是每一項，list是操做的數組（根據list的長度新建li）
<li v-for='(item,index) in list'>{{item}}--{{index}}</li>//item是每一項，index是數組索引，list是操做的數組（根據list的長度新建li）
<li v-for='item in 20'>{{item}}</li>//直接創造20個li
//字符串
<li v-for='item in "hello vue"'>{{item}}</li>//遍歷字符串，輸出9個li分別是字符每一項
//對象
<li v-for="(val,key,index) in obj">{{key}}:{{val}}---{{index}}</li>//val,key,index分別是對象的每項的屬性，屬性名，索引
v-click（事件指令）java
<button v-on:click="test">點我</button>//相似於onclick，test是Vue實例化中的函數 //v-on:click至關於@click <a v-on:click.stop="doThis"></a>//取消冒泡事件 <div v-on:click.self="doThat">...</div>//只有點擊這個元素自身才會觸發
v-bind（屬性設置）npm
<div v-bind:class='state?"red":"green"'>//v-bind：'屬性名'='屬性值' //能夠寫成<div v-bind:class='state?"red":"green"'>
過濾器：（對數據進行處理的函數）
全局過濾器：和局部過濾的區別（局部過濾器只能在當前的組件中使用）數組
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
</style>
<script src="./vue.js"></script>
</head>
<body>
<div id="box">
{{nowTime|getTime}}
<!-- 這是參數 這是過濾，中間用|隔開-->
</div>
<script>
//全局過濾
Vue.filter('getTime', function (value) {
//中間能夠寫對數據的處理
return value;
});
var vm = new Vue({
el: '#box',
data: {
nowTime: Date.now()
}
});
</script>
</body>
</html>
局部過濾：app
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
</style>
<script src="./vue.js"></script>
</head>
<body>
<div id="box">
{{nowTime|getTime}}
<!-- 這是參數 這是過濾，中間用|隔開-->
</div>
<script>
//局部過濾
var vm = new Vue({
el: '#box',
data: {
nowTime: Date.now()
},
filters: {
getTime: function (value) {
//中間能夠寫對數據的處理
return value;
}
}
});
</script>
</body>
</html>
組件：就是vue的一個拓展實例
全局組件：（整個頁面都能使用）dom
<template id="tp1">
<!-- 組件建立 -->
<div></div>
</template>
var mod = {//組件配置
template: '#tp1',//選中組件
data() {
return {
//寫變量
}
},
methods: {
//寫函數
}
}
Vue.component('mod', mod);//註冊組件
//直接在頁面中輸入 <mod></mod> //便可使用
局部組件：（只能在當前選中做用範圍中使用）函數
let box = new Vue({
el: '#box',//當前做用範圍是id爲box的標籤內
data: {
},
methods: {
},
components: {//新建局部組件
mod: ({
template: '#tp1',
data() {
return {}
},
methods: {
}
})
}
});
組件間數據的傳輸：（相似事件拋發和監聽）
父組件傳給子組件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="box">
<fat></fat>
</div>
<!-- 子組件 -->
<template id="son">
<div>{{callson}}</div>
</template>
<!-- 父組件，父組件中包含子組件 -->
<template id="fat">
<div>
<!-- 當父組件數據改變時，經過將數據保存在自身屬性的方法傳輸 -->
<div>{{fbool}}</div>
<button @click='change'>Change</button>
<!-- 將callson做爲屬性，附帶數據傳輸給子元素 -->
<son :callson='fbool'></son>
</div>
</template>
<script>
Vue.component('son', {
template: '#son',
data: function () {
return {
}
},
props: ['callson'] //子組件在該處接收數據
});
Vue.component('fat', {
template: '#fat',
data: function () {
return {
fbool: false
}
},
methods: { //點擊父組件的按鈕時，父組件內數據改變
change() {
this.fbool = !this.fbool;
}
}
});
var box = new Vue({
el: '#box'
});
</script>
</body>
</html>
子組件傳給父組件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="box">
<fat></fat>
</div>
<template id="son">
<div>
<button @click='change'>Change</button>
<!-- <div>{{sbool}}</div> -->
</div>
</template>
<template id="fat">
<div>
<div>{{fbool}}</div>
<!-- 新建自定義事件，綁定父元素中的函數，傳參數寫在後面用逗號隔開 -->
<son @callfat='changeF'></son>
<!-- 當子元素被點擊時觸發父元素的方法 -->
</div>
</template>
<script>
Vue.component('son', {//點擊子組件的按鈕時，子組件內數據改變
template: '#son',
data: function () {
return {
sbool: false
}
},
methods: {
change() {
this.$emit('callfat');
this.sbool = !this.sbool;
}
}
});
Vue.component('fat', {
template: '#fat',
data: function () {
return {
fbool: false
}
},
methods: {
changeF() {
this.fbool = !this.fbool;
}
}
});
var box = new Vue({
el: '#box'
});
</script>
</body>
</html>
兄弟組件：（結合子傳父，父再傳子）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="box">
<fat></fat>
</div>
<template id="sonf">
<div>
<button @click='change'>Change</button>
<div>First <br>{{sfbool}}</div>
</div>
</template>
<template id="sons">
<div>Second <br>{{callson}}</div>
</template>
<template id="fat">
<div>
<sonf @callfat='changeF'></sonf>
<sons :callson='fbool'></sons>
</div>
</template>
<script>
Vue.component('sonf', {
template: '#sonf',
data: function () {
return {
sfbool: false
}
},
methods: {
change() {
this.$emit('callfat');
this.sfbool = !this.sfbool;
}
}
});
Vue.component('sons', {
template: '#sons',
data: function () {
return {
}
},
props: ['callson']
});
Vue.component('fat', {
template: '#fat',
data: function () {
return {
fbool: false
}
},
methods: {
changeF() {
this.fbool = !this.fbool;
}
}
});
var box = new Vue({
el: '#box'
});
</script>
</body>
</html>
不相鄰兄弟組件：
let angel=new Vue();//引入一個Vue實例
angel.$emit('test','Hello')//傳送方在函數中拋出事件及數據
angel.$on('test',this.change)//接收方接收事件及數據
動畫：
<transition name='aaa'>css中用name值進行動畫 若中間有1個以上元素，須要在外面嵌套一個元素，再給該元素加 <div v-if='show'> <p>Hello</p> <p>World</p> </div> </transition>
.aaa-enter{進入前
opacity: 0;
}
.aaa-enter-to{進入後
opacity: 1;
}
.aaa-enter-active{過渡時間
transition: all 3s;
}
.aaa-leave{離開前
opacity: 1;
}
.aaa-leave-to{離開後
opacity: 0;
}
.aaa-leave-active{過渡時間
transition: all 3s;
}
相關文章
- 1. vue — 初識vue
- 2. (Vue)初識Vue
- 3. 【Vue】Vue初識
- 4. 初識vue框架（一）
- 5. Vue之初識Vue
- 6. Vue學習筆記一：初識vue
- 7. Vue-VueX初識
- 8. vue初識
- 9. 初識vue
- 10. vue--初識
- 更多相關文章...
- • 一對一關聯查詢 - MyBatis教程
- • MySQL唯一約束（UNIQUE KEY） - MySQL教程
- • 適用於PHP初學者的學習線路和建議
- • RxJava操作符（一）Creating Observables
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. vue — 初識vue
- 2. (Vue)初識Vue
- 3. 【Vue】Vue初識
- 4. 初識vue框架（一）
- 5. Vue之初識Vue
- 6. Vue學習筆記一：初識vue
- 7. Vue-VueX初識
- 8. vue初識
- 9. 初識vue
- 10. vue--初識