列表搜索過濾
<!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>
</head>
?
<body>
?? <div id="app">
? ? ?? <input type="text" v-model="searchName">
? ? ?? <ul>
? ? ? ? ?? <li v-for="(p,index) in filterPersons" :key="index">
? ? ? ? ? ? ?? {{index}}---{{p.name}}---{{p.age}}
? ? ? ? ?? </li>
? ? ? ? ?? <br>
? ? ? ? ?? <button @click="setOrderType(1)">年齡升序</button>
? ? ? ? ?? <button @click="setOrderType(2)">年齡降序</button>
? ? ? ? ?? <button @click="setOrderType(0)">原本順序</button>
? ? ?? </ul>
?? </div>
?? <script src="../vue.js"></script>
?? <script>
? ? ?? const vm = new Vue({
? ? ? ? ?? el: '#app',
? ? ? ? ?? data: {
? ? ? ? ? ? ?? searchName: '',
? ? ? ? ? ? ?? orderType: 0,//原本順序為0，升序為1，降序為2
? ? ? ? ? ? ?? persons: [
? ? ? ? ? ? ? ? ?? { name: 'wym', age: 18 },
? ? ? ? ? ? ? ? ?? { name: 'lin', age: 19 },
? ? ? ? ? ? ? ? ?? { name: 'shi', age: 20 }
? ? ? ? ? ? ?? ],
? ? ? ? ?? },
? ? ? ? ?? computed: {
? ? ? ? ? ? ?? filterPersons() {
? ? ? ? ? ? ? ? ?? //獲取數據
? ? ? ? ? ? ? ? ?? const { searchName, persons, orderType } = this;
? ? ? ? ? ? ? ? ?? let fPersons;
? ? ? ? ? ? ? ? ?? //filter() 方法創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。
? ? ? ? ? ? ? ? ?? fPersons = persons.filter(p => p.name.indexOf(searchName) != -1);
? ? ? ? ? ? ? ? ?? //排序
? ? ? ? ? ? ? ? ?? if (orderType !== 0) {
? ? ? ? ? ? ? ? ? ? ?? fPersons.sort(function (p1, p2) {//返回負數p1在前，返回正數p2在前
? ? ? ? ? ? ? ? ? ? ? ? ?? if (orderType == 2) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? return p2.age - p1.age;//降序
? ? ? ? ? ? ? ? ? ? ? ? ?? } else {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? return p1.age - p2.age;//升序
? ? ? ? ? ? ? ? ? ? ? ? ?? }
? ? ? ? ? ? ? ? ? ? ?? })
? ? ? ? ? ? ? ? ?? }
? ? ? ? ? ? ? ? ?? return fPersons;
? ? ? ? ? ? ?? }
? ? ? ? ?? },
? ? ? ? ?? methods: {
? ? ? ? ? ? ?? setOrderType(thisType) {
? ? ? ? ? ? ? ? ?? this.orderType = thisType;
? ? ? ? ? ? ?? }
? ? ? ? ?? }
? ? ?? })
?? </script>
</body>
?
</html>
數組的filter方法
filter() 方法創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。
filter() 不會對空數組進行檢測。
filter() 不會改變原始數組。
數組的排序方法sort
如果調用該方法時沒有使用參數，將按字母順序對數組中的元素進行排序，說得更精確點，是按照字符編碼的順序進行排序。
兩個參數a，b
若 a 小于 b，在排序后的數組中 a 應該出現在 b 之前，則返回負值。
若 a 等于 b，則返回 0。
若 a 大于 b，則返回正值。
事件處理
<!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>
</head>
?
<body>
?? <div id="app">
? ? ?? <!-- 綁定監聽 -->
? ? ?? <button @click="test">test</button>
? ? ?? <button @click="test1(123)">test1</button>
? ? ?? <button @click="test2">test2</button>
? ? ?? <button @click="test3(123,$event)">test3</button>
?
? ? ?? <!-- 事件修飾 -->
? ? ?? <div style="width: 200px;height:200px;background-color:red" @click="test4">
? ? ? ? ?? <div style="width: 100px;height:100px;background-color:blue" @click.stop="test5"></div>
? ? ?? </div>
?
? ? ?? <a @click.prevent="test6">baidu</a>
? ? ?? <br>
? ? ?? <!-- 按鍵修飾符 -->
? ? ?? <input type="text" @keyup.enter="test7">
? ? ?? <br>
? ? ?? <input type="text" @keyup.13="test7">
?? </div>
?
?? <script src="../vue.js"></script>
?? <script>
? ? ?? //創建實例
? ? ?? const vm = new Vue({
? ? ? ? ?? el: '#app',
? ? ? ? ?? data: {
? ? ? ? ? ? ?? test() {
? ? ? ? ? ? ? ? ?? alert("abc")//abc
? ? ? ? ? ? ?? },
? ? ? ? ? ? ?? test1(number) {
? ? ? ? ? ? ? ? ?? alert(number)//123
? ? ? ? ? ? ?? },
? ? ? ? ? ? ?? test2(event) {
? ? ? ? ? ? ? ? ?? alert(event.target.innerHTML)//test2
? ? ? ? ? ? ?? },
? ? ? ? ? ? ?? test3(number, event) {
? ? ? ? ? ? ? ? ?? alert(event.target.innerHTML)//test3
? ? ? ? ? ? ?? },
? ? ? ? ? ? ?? test4() {
? ? ? ? ? ? ? ? ?? alert('out')
? ? ? ? ? ? ?? },
? ? ? ? ? ? ?? test5(event) {
? ? ? ? ? ? ? ? ?? // event.stopPropagation();//阻止冒泡
? ? ? ? ? ? ? ? ?? alert('inner')
? ? ? ? ? ? ?? },
? ? ? ? ? ? ?? test6(event) {
? ? ? ? ? ? ? ? ?? // event.preventDefault();//阻止事件默認行為
? ? ? ? ? ? ?? },
? ? ? ? ? ? ?? test7(event) {
? ? ? ? ? ? ? ? ?? //點擊enter鍵時返回輸入的內容
? ? ? ? ? ? ? ? ?? // if (event.keyCode == 13) {
? ? ? ? ? ? ? ? ?? // ? ? alert(event.target.value)
? ? ? ? ? ? ? ? ?? // }
? ? ? ? ? ? ? ? ?? alert(event.target.value)
? ? ? ? ? ? ?? }
? ? ? ? ?? }
? ? ?? })
?? </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>
</head>
?
<body>
?? <div id="app">
? ? ?? <form action="/xxx" @submit.prevent="handleSubmit">
? ? ? ? ?? <span>userName:</span>
? ? ? ? ?? <input type="text" v-model="username">
? ? ? ? ?? <br>
? ? ? ? ?? <span>password:</span>
? ? ? ? ?? <input type="text" v-model="password">
? ? ? ? ?? <br>
? ? ? ? ?? <span>sex</span>
? ? ? ? ?? <input type="radio" id="female" value="女" v-model="sex">
? ? ? ? ?? <label for="female">女</label>
? ? ? ? ?? <input type="radio" id="male" value="男" v-model="sex">
? ? ? ? ?? <label for="male">男</label>
? ? ? ? ?? <br>
? ? ? ? ?? <span>favorite</span>
? ? ? ? ?? <input type="checkbox" id="basket" value="basket" v-model="likes">
? ? ? ? ?? <label for="basket">籃球</label>
? ? ? ? ?? <input type="checkbox" id="foot" value="foot" v-model="likes">
? ? ? ? ?? <label for="foot">足球</label>
? ? ? ? ?? <input type="checkbox" id="pingpang" value="pingpang" v-model="likes">
? ? ? ? ?? <label for="pingpang">乒乓</label>
? ? ? ? ?? <br>
? ? ? ? ?? <span>city</span>
? ? ? ? ?? <select v-model="cityID">
? ? ? ? ? ? ?? <option value="">未選擇</option>
? ? ? ? ? ? ?? <option :value="p.id" v-for="(p,index) in allCity" :key="index">{{p.name}}</option>
? ? ? ? ?? </select>
? ? ? ? ?? <br>
? ? ? ? ?? <span>介紹</span>
? ? ? ? ?? <textarea cols="30" rows="10" v-model="description"></textarea>
? ? ? ? ?? <br>
? ? ? ? ?? <input type="submit" value="注冊">
? ? ?? </form>
?? </div>
?
?? <script src="../vue.js"></script>
?? <script>
? ? ?? //創建實例
? ? ?? const vm = new Vue({
? ? ? ? ?? el: '#app',
? ? ? ? ?? data: {
? ? ? ? ? ? ?? username: '',
? ? ? ? ? ? ?? password: '',
? ? ? ? ? ? ?? sex: '',
? ? ? ? ? ? ?? likes: ['foot'],
? ? ? ? ? ? ?? allCity: [{ id: 1, name: 'BJ' }, { id: 2, name: 'SH' }, { id: 3, name: 'GD' }],
? ? ? ? ? ? ?? cityID: '3',
? ? ? ? ? ? ?? description: '輸入內容'
? ? ? ? ?? },
? ? ? ? ?? methods: {
? ? ? ? ? ? ?? handleSubmit() {
? ? ? ? ? ? ? ? ?? console.log(this.username + " " + this.password + " " + this.sex + " " + this.likes + " " + this.allCity[this.cityID - 1].name + " " + this.description)
? ? ? ? ? ? ?? }
? ? ? ? ?? }
? ? ?? })
?? </script>
</body>
?
</html>
Vue實例生命周期
初始化：new Vue()=>beforeCreate=>created=>beforeMount=>mounted(掛載)
更新：=>beforeUpdate=>updated
銷毀死亡：=>beforeDestroy=>destroy
其中最常用的是mounted和beforeDestroy：
mounted：發送Ajax請求，啟動定時器等異步任務
beforeDestroy：做收尾工作，清除定時器等。
<!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>
</head>
?
<body>
?? <div id="app">
? ? ?? <button @click="destoryVm">destory vue</button>
? ? ?? <p v-show="isShow">wym</p>
?? </div>
?
?? <script src="../vue.js"></script>
?? <script>
? ? ?? //創建實例
? ? ?? const vm = new Vue({
? ? ? ? ?? el: '#app',
? ? ? ? ?? data: {
? ? ? ? ? ? ?? isShow: true,
? ? ? ? ?? },
? ? ? ? ?? mounted() {//初始化顯示后立即調用
? ? ? ? ? ? ?? //使用箭頭函數；如果不使用箭頭函數，this指向window；this函數沒有自己的this，繼承上面的this；當使用回調函數的時候就使用箭頭函數
? ? ? ? ? ? ?? this.intervalId = setInterval(() => {
? ? ? ? ? ? ? ? ?? console.log("1")
? ? ? ? ? ? ? ? ?? this.isShow = !this.isShow
? ? ? ? ? ? ?? }, 1000)
? ? ? ? ?? },
? ? ? ? ?? beforeDestroy() {
? ? ? ? ? ? ?? //防止內存泄漏,要不然setInterval一直觸發
? ? ? ? ? ? ?? clearInterval(this.intervalId);
? ? ? ? ?? },
? ? ? ? ?? methods: {
? ? ? ? ? ? ?? destoryVm() {
? ? ? ? ? ? ? ? ?? this.$destroy();
? ? ? ? ? ? ?? }
? ? ? ? ?? }
? ? ?? })
?? </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>
?? <style>
? ? ?? .fade-enter-active,
? ? ?? .fade-leave-active {
? ? ? ? ?? transition: opacity 1s;
? ? ?? }
?
? ? ?? .fade-enter,
? ? ?? .fade-leave-to {
? ? ? ? ?? opacity: 0;
? ? ?? }
?
? ? ?? .slide-fade-enter-active {
? ? ? ? ?? transition: all 0.3s ease;
? ? ?? }
?
? ? ?? .slide-fade-leave-active {
? ? ? ? ?? transition: all 0.8s ease;
? ? ?? }
?
? ? ?? .slide-fade-enter,
? ? ?? .slide-fade-leave-to {
? ? ? ? ?? transform: translateX(10px);
? ? ? ? ?? opacity: 0;
? ? ?? }
?
? ? ?? .bounce-enter-active {
? ? ? ? ?? -webkit-animation: bounce-in .5s;
? ? ? ? ?? animation: bounce-in .5s;
? ? ?? }
?
? ? ?? .bounce-leave-active {
? ? ? ? ?? -webkit-animation: bounce-in .5s reverse;
? ? ? ? ?? animation: bounce-in .5s reverse;
? ? ?? }
?
? ? ?? @keyframes bounce-in {
? ? ? ? ?? 0% {
? ? ? ? ? ? ?? transform: scale(0);
? ? ? ? ?? }
?
? ? ? ? ?? 50% {
? ? ? ? ? ? ?? transform: scale(1.5);
? ? ? ? ?? }
?
? ? ? ? ?? 100% {
? ? ? ? ? ? ?? transform: scale(1);
? ? ? ? ?? }
? ? ?? }
?? </style>
</head>
?
<body>
?? <div id="app">
? ? ?? <button @click="isShow=!isShow">toggle</button>
? ? ?? <transition name="fade">
? ? ? ? ?? <p v-show="isShow">hello</p>
? ? ?? </transition>
?? </div>
?
?? <div id="app1">
? ? ?? <button @click="isShow=!isShow">toggle</button>
? ? ?? <transition name="slide-fade">
? ? ? ? ?? <p v-show="isShow">hello</p>
? ? ?? </transition>
?? </div>
?
?? <div id="example-2">
? ? ?? <button @click="show = !show">Toggle show</button>
? ? ?? <transition name="bounce">
? ? ? ? ?? <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at
? ? ? ? ? ? ?? lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
? ? ?? </transition>
?? </div>
?? <script src="../vue.js"></script>
?? <script>
? ? ?? //創建實例
? ? ?? const vm = new Vue({
? ? ? ? ?? el: '#app',
? ? ? ? ?? data: {
? ? ? ? ? ? ?? isShow: true,
? ? ? ? ?? }
? ? ?? })
?
? ? ?? const vm1 = new Vue({
? ? ? ? ?? el: '#app1',
? ? ? ? ?? data: {
? ? ? ? ? ? ?? isShow: true,
? ? ? ? ?? }
? ? ?? })
?
? ? ?? new Vue({
? ? ? ? ?? el: '#example-2',
? ? ? ? data: {
? ? ? ? ? ? ?? show: true
? ? ? ? ?? }
? ? ?? })
?? </script>
</body>
?
</html>
先寫一個transition標簽，給他屬性name賦值xxx
在css里寫：
.xxx-leave-active:消失時候的動效
.xxx-enter-active:出現時候的動效
.xxx-enter/.xxx-leave-to:動效最后的效果
過濾器
<!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>
?? <!-- 一個moment插件 -->
?? <script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.js"></script>
</head>
?
<body>
?? <div id="app">
? ? ?? <p>{{date}}</p>
? ? ?? <p>{{date|dateString}}</p>
? ? ?? <p>{{date|dateString('YY-MM-DD HH:mm:ss')}}</p>
?? </div>
?
?? <script src="../vue.js"></script>
?? <script>
? ? ?? //創建實例
? ? ?? Vue.filter('dateString', function (value, format) {
? ? ? ? ?? return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss')
? ? ?? })
? ? ?? const vm = new Vue({
? ? ? ? ?? el: '#app',
? ? ? ? ?? data: {
? ? ? ? ? ? ?? date: new Date()
? ? ? ? ?? }
? ? ?? })
?? </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>
?? <style>
? ? ?? /* 防止在加載完成前出現{{}} */
? ? ?? [v-cloak] {
? ? ? ? ?? display: none;
? ? ?? }
?? </style>
</head>
?
<body>
?? <div id="app">
? ? ?? <!-- ref自定義屬性 -->
? ? ?? <p ref="content">helloworld</p>
? ? ?? <button @click="hint">提示</button>
? ? ?? <p v-cloak>{{msg}}</p>
?
? ? ?? <p v-upper-text="msg1"></p>
? ? ?? <p v-lower-text="msg1"></p>
?
? ? ?? <p v-upper-text="msg2"></p>
? ? ?? <p v-lower-text="msg2"></p>
?? </div>
?
?? <script src="../vue.js"></script>
?? <script>
? ? ?? //創建實例
? ? ?? //全局指令
? ? ?? Vue.directive('upper-text',function(el,binding){
? ? ? ? ?? el.textContent=binding.value.toUpperCase()
? ? ?? })
? ? ?? const vm = new Vue({
? ? ? ? ?? el: '#app',
? ? ? ? ?? data: {
? ? ? ? ? ? ?? msg: 'nihao',
? ? ? ? ? ? ?? msg1:'Helloworld',
? ? ? ? ? ? ?? msg2:'Nihaoshijie'
? ? ? ? ?? },
? ? ? ? ?? methods:{
? ? ? ? ? ? ?? hint(){
? ? ? ? ? ? ? ? ?? //調用自定義屬性
? ? ? ? ? ? ? ? ?? alert(this.$refs.content.textContent);
? ? ? ? ? ? ?? }
? ? ? ? ?? },
? ? ? ? ?? //局部指令
? ? ? ? ?? directives:{
? ? ? ? ? ? ?? 'lower-text'(el,binding){
? ? ? ? ? ? ? ? ?? el.textContent=binding.value.toLowerCase()
? ? ? ? ? ? ?? }
? ? ? ? ?? }
? ? ?? })
?? </script>
</body>
?
</html>
