Vue

時間 2019-11-12

標籤 vue 简体版

原文原文鏈接

Vue介紹

官方文檔：點我開車javascript

是一個漸進式JavaScript 框架
做用：是動態構建用戶界面：將後臺的數據在前臺的界面上動態的顯示出css

特色

遵循MVVM模式 M：model數據 V：視圖界面 VM：調度者
編碼簡潔，體積小，運行效率高
它自己只關注UI，能夠輕鬆引入Vue插件或其餘第三方庫開發項目html

Vue擴展插件

一、Vue-cli ：腳手架：下載基於Vue的項目寫好了配置聲明好了依賴
二、axios ：ajax 請求
三、Vue-route ；路由
四、vuex ：狀態管理
五、vue-lazyload ：懶加載
六、vue-scroller ：頁面滑動相關
七、mint-ui ：基於vue的ui組件（移動端）
八、element-UI ：基於vue的ui組件（PC端）
ps:
　　vue.js devtools 調試神器vue

<!DOCTYPE html>
<html>
<head>
    <title>My first Vue app</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
</head>
<body>
<div id="watch-example">
    <p>
        Ask a yes/no question:
        <input v-model="question">
    </p>
    <p>{{ answer }}</p>
    <p><img :src="img" alt=""></p>
</div>

<script> var watchExampleVM = new Vue({
    el: '#watch-example',
    data: {
        question: '',
        answer: 'I cannot give you an answer until you ask a question!',
        img:''
    },
    watch: {
        // 若是 question  發生改變，這個函數就會運行
        question: function (newQuestion, oldQuestion) {
            this.answer = 'Waiting for you to stop typing...'
            this.debouncedGetAnswer()
        }
    },
    created: function () {
        // `_.debounce` 是一個經過 Lodash 限制操做頻率的函數。
        // 在這個例子中，咱們但願限制訪問 yesno.wtf/api 的頻率
        // AJAX 請求直到用戶輸入完畢纔會發出。想要了解更多關於
        // `_.debounce` 函數 (及其近親 `_.throttle`) 的知識，
        // 請參考：https://lodash.com/docs#debounce
        this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
    },
    methods: {
        getAnswer: function () {
            if (this.question.indexOf('?') === -1) {
                this.answer = 'Questions usually contain a question mark. ;-)'
                return
            }
            this.answer = 'Thinking...'
            var vm = this
            axios.get('https://yesno.wtf/api')
                .then(function (response) {
                    console.log(response)
                    vm.answer = _.capitalize(response.data.answer)
                    vm.img = _.capitalize(response.data.image)

                })
                .catch(function (error) {
                    vm.answer = 'Error! Could not reach the API. ' + error
                })
        }
    }
}) </script>
</body>
</html>

vue案例先後端交互

模板語法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
<div id="app">  <!--view 視圖-->
    <input type="text" v-model="username">
    <p>hello {{username}}</p>
    <h2>雙大括號表達式</h2>
    <p>{{msg.toUpperCase()}}</p>
    <p v-text="msg"></p>
    <p v-html="msg"></p>
    <h2>強制數據綁定</h2>
    <img v-bind:src="img_url">
    <img :src="img_url">
    <h2>綁定事件監聽</h2>
    <button v-on:click="test1">點我開車</button>
    <button @click="test2(msg)">點我開車</button>

</div>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">
    const VM = new Vue({ //配置對象
        el: '#app', //element :選擇器
        data: {  // 數據 model
            username: 'mogu',
            msg: '<a href="https://www.cnblogs.com/nixindecat">I am come back</a>',
            img_url: 'https://i1.hdslb.com/bfs/face/85b49d96bd506c84831eca97c35534cfb696b578.jpg@68w_68h.webp'
        },
        methods: {
            test1() {
                alert('我在測試！')
            },
            test2(func) {
                alert(func)
            }
        }
    })
</script>
</body>
</html>

View Code

class與style的綁定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .acss {
            color: red;
        }
        .bcss {
            color: blue;
        }
        .ccss {
            font-size: 20px;
        }
    </style>
</head>

<body>
<div id="app">
    <h2>class的綁定</h2>
    <p class="ccss" :class="A">xxx字符串測試</p>
    <p :class="{acss:a,bcss:b}">xxx對象測試</p>
    <p :class="['acss','ccss']">xxx數組測試</p>
    <h2>style的綁定</h2>
    <p :style="{color : active,fontSize:fontsize +'px'}">style的綁定</p>


    <button @click="update">update</button>
</div>

</body>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            A: 'acss',
            a: true,
            b: false,
            active:'red',
            fontsize:20
        },
        methods: {
            update() {
                this.A = 'bcss';
                this.a = false;
                this.b = true;
                this.active = 'green';
                this.fontsize = 30
            }
        }
    })
</script>
</html>

View Code

計算屬性和監視

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>

<body>
<div id="app">  <!--view 視圖-->
    姓：<input type="text" placeholder="First name" v-model="First_name"><br>
    名：<input type="text" placeholder="Last name" v-model="Last_name"><br>
    姓名1（單向）：<input type="text" placeholder="Full name1" v-model="fullname1"><br>
    姓名2（單向）：<input type="text" placeholder="Full name2" v-model="fullname2"><br>
    姓名3（雙向）：<input type="text" placeholder="Full name3" v-model="fullname3"><br>
    <p>{{fullname1}}</p>
    <p>{{fullname1}}</p>
    <p>{{fullname1}}</p>
</div>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">
    const VM = new Vue({ //配置對象
        el: '#app', //element :選擇器
        data: {  // 數據 model
            First_name: 'A',
            Last_name: 'B',
            fullname2: 'A B'
        },
        computed: { //計算屬性
            fullname1() {
                console.log('fullname()');
                return this.First_name + ' ' + this.Last_name
            },
            fullname3: {
                get() {
                    return this.First_name + ' ' + this.Last_name
                },
                set(val) {
                    const names = val.split(' ');
                    this.First_name = names[0];
                    this.Last_name = names[1]
                }
            }
        },
        watch:{  //監聽
            First_name:function (val) {
                this.fullname2=val+' '+this.Last_name
            }
        }
    });
    VM.$watch('Last_name',function (val) {  //監聽
        this.fullname2=this.First_name+' '+val
    })
</script>
</body>
</html>

View Code

條件渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="demo">
    <!--條件渲染指令-->

    <p v-if="ok">successful</p>
    <p v-else>failed</p>
    <p v-show="ok">表白成功</p>
    <p v-show="!ok">表白很成功</p>
    <button @click="ok=!ok">切換</button>

</div>

<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:'#demo',
        data:{
            ok:true
        }
    })

</script>
</body>
</html>

v-if、v-show

列表渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<div id="demo">
    <h2>遍歷數組v-for</h2>
    <table border="1px">
        <thead>
        <tr>
            <th>id</th>
            <th>姓名</th>
            <th>年齡</th>
            <th>信息</th>
            <th>操做</th>
        </tr>
        </thead>

        <tr v-for="(p,index) in persons">
            <td> &nbsp;{{index}} &nbsp;</td>
            <td>&nbsp; {{p.name}}&nbsp;</td>
            <td>&nbsp; {{p.age}}&nbsp;</td>
            <td> &nbsp;{{p.text}} &nbsp;</td>
            <td>
                <button @click="del(index)">刪除</button>
                <button @click="update(index,{name:'cat',age:33,text:'媽媽喊你回家吃飯'})">更新</button>
            </td>
        </tr>
    </table>

    <h2>遍歷對象v-for</h2>
    <ul>
        <li v-for="(v,k) in persons[1]">
            {{k}} : {{v}}
        </li>
    </ul>
    <h2>列表渲染—過濾+排序</h2>

    <label>
        <input type="text"  v-model="searchName">
    </label>

    <table border="1px">
        <thead>
        <tr>
            <th>id</th>
            <th>姓名</th>
            <th>年齡</th>
            <th>信息</th>
            <th>操做</th>
        </tr>
        </thead>

        <tr v-for="(p,index) in filterPersons" >
            <td> &nbsp;{{index}} &nbsp;</td>
            <td>&nbsp; {{p.name}}&nbsp;</td>
            <td>&nbsp; {{p.age}}&nbsp;</td>
            <td> &nbsp;{{p.text}} &nbsp;</td>
            <td>
                <button @click="del(index)">刪除</button>
                <button @click="update(index,{name:'cat',age:33,text:'媽媽喊你回家吃飯'})">更新</button>
            </td>
        </tr>
    </table>
    <br>
    <button @click="setorder(1)">年齡升序</button>
    <button @click="setorder(2)">年齡降序</button>
    <button @click="setorder(0)">恢復順序</button>
</div>


<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#demo',
        data: {
            orderType:0, //0表明本來，1表明升序，2表明降序
            searchName:'',
            persons: [
                {name: '張三', age: 18, text: '道路千萬條'},
                {name: '李三', age: 25, text: '安全第一條'},
                {name: '王五', age: 48, text: '行車不規範'},
                {name: '趙五', age: 37, text: '回家跪衣板'},
                {name: '董璇五', age: 16, text: '片場領盒飯'},
            ]
        },
        computed:{
            filterPersons(){
                const {searchName, persons,orderType} = this
                let fpersons;
                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: {
            del(index) {
                this.persons.splice(index, 1)
            },
            update(index, newdata) {
                this.persons.splice(index, 1, newdata)
            },
            setorder(id){
                this.orderType = id
            }
        }
    })
</script>
</body>
</html>

v-for

事件處理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>綁定監聽</h1>
    <button @click="test1">test1</button>
    <button @click="test2('login')">test2</button>
    <button @click="test3()">test3</button>
    <button @click="test4('mogu',$event)">test4</button>
    <h1>事件修飾符</h1>
    <div>
        <div>@click.stop<p>中止事件冒泡</p></div>
        <div style="height: 160px;background-color: red;width: 300px;" @click="test5">
            <div style="background-color: #3c763d;height: 80px;width: 150px" @click.stop="test6"></div>
        </div>
    </div>
    <div><a href="https://www.baidu.com" @click.prevent="test7">百度揍你</a>
        <p>@click.prevent</p>阻止事件的默認行爲
    </div>
    <h1>按鍵修飾符</h1>
    <input type="text" @keyup.enter="test8">
</div>


<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            test1() {
                alert('test1')
            },
            test2(val) {
                alert(val + ' ' + 'test2')
            },
            test3() {
                alert(event.target.innerHTML)
            },
            test4(mogu) {
                alert(mogu + ' ' + event.target.innerHTML)
            },
            test5() {
                alert('test5')
            },
            test6() {
                alert('test6')
            },
            test7() {
                alert('test7')
            },
            test8() {
                alert(event.target.value + ' ' + event.keyCode)
            }
        }
    })


</script>
</body>
</html>

中止冒泡，阻止默認行爲

過分動畫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .fade-enter-active, .fade-leave-active {
            transition: opacity 1s;
        }
        .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
            opacity: 0;
        }
    </style>
</head>
<body>
<div id="demo">
    <button v-on:click="show = !show">
        Toggle
    </button>
    <transition name="fade">
        <p v-if="show">hello</p>
    </transition>
</div>

<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#demo',
        data: {
            show: true
        }
    })

</script>
</body>
</html>

View Code

相關標籤/搜索

vue+webpack2.0+vuex+vue

element+vue+vue

cli3+vue+vue

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。