vue入門

時間 2019-11-08

標籤 vue 入門简体版

原文原文鏈接

能夠騰訊視頻學習，菜鳥教程html

版本vue2.9vue

Vue3版本 2019 api

Js面向domapp

Vue面向數據 mvvmdom

能夠下載包 vue.min.jsmvvm

1、第一個程序學習

<script src="vue.min.js"></script>
<div id="app">
    <p>{{text}}</p>
</div>
<script>
    new Vue({
        el: '#app',//vue實例的容器 掛載點(掛載元素)  接收參數類型： 選擇器
        //數據模型
        data: {
            text:'hello world'
        }
    })
</script>

二、文本綁定指令 mustache v-text v-html this

<div id="app">
    <p v-text="text"></p>
</div>
<script>
    new Vue({
        el: '#app',//vue實例的容器 掛載點  接收參數類型： 選擇器
        //數據模型
        data: {
            text:'hello world'
        }
    })
</script>

<div id="app">
    <p v-html="text"></p>

</div>
<script>
    new Vue({
        el: '#app',//vue實例的容器 掛載點  接收參數類型： 選擇器
        //數據模型
        data: {
            text:'<h1>hello world</h1>'//這時會有區別
        }
    })
</script>

3、屬性綁定指令 v-bindurl

<div id="app">
    <a v-bind:href="url">qq</a>
    <a :href="url">qq</a><!--簡寫-->
</div>
<script>
    new Vue({
        el: '#app',//vue實例的容器 掛載點  接收參數類型： 選擇器
        //數據模型
        data: {
           url:'https://www.baidu.com',
        }
    })
</script>

不能使用這個spa

4、方法綁定 methods

<div id="app">
    <a v-bind:href="url()">sss</a>
</div>
<script>
    new Vue({
        el: '#app',//vue實例的容器 掛載點  接收參數類型： 選擇器
        //數據模型
        data: {
            protocal:'https:',
           host:'www.baidu.com'

        },
        methods:{
            url:function () {
                return this.protocal+'//'+this.host;
            }

        }
    })
</script>

五、計算屬性 computed

Computed
<div id="app">
    <a v-bind:href="geturl">sss</a>
</div>

//只調用一次
computed:{
    geturl:function () {
        return this.protocal+'//'+this.host;
    }
}

Computed 和methods區別

五、偵聽器監聽數據的變化 watch

六、樣式綁定 class style

七、用戶輸入

在form表單中能夠使用v-model 來雙向數據綁定

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
<script>
    new Vue({
        el: '#app',//vue實例的容器 掛載點  接收參數類型： 選擇器
        //數據模型
        data: {
            protocal:'https:',
           host:'www.baidu.com',
            message:'123333'

        }
    })
</script>

五、事件 v-on

<div id="app">
    <button v-on:click="check">dddd</button>
</div>
<script>
    new Vue({
        el: '#app',//vue實例的容器 掛載點  接收參數類型： 選擇器
        //數據模型
        data: {
            message:'123333'
        },
        methods:{
            check:function () {
                alert('sss');
            }
        }
    })
</script>

v-on 縮寫
<!-- 完整語法 --><a v-on:click="doSomething"></a>
<!-- 縮寫 --><a @click="doSomething"></a>

10、過濾器 filters | 管道文本格式化

過濾器
Vue.js 容許你自定義過濾器，被用做一些常見的文本格式化。由"管道符"指示, 格式以下：

<!-- 在兩個大括號中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>