Vue新手入門教程

時間 2019-12-19

標籤 vue 新手入門教程简体版

原文原文鏈接

談談我對Vue的理解

vue就是前端上的Java，前端上的C#。有個前端的虛擬DOM引擎，設計理念和Java，C#相似。咱們只須要告訴DOM應該顯示什麼，而不用去操做DOM元素。javascript

如何引用？

下面是一個helloWord,你們運行感覺一下。css

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <meta charset="utf-8">
</head>
<body>
<div id="app">
    <!--使用 v-cloak可以解決插值閃爍問題-->
    <p>{{msg}}</p>
    
</div>
<script type="text/javascript">
    //VM層
    var vm = new Vue({
        el:'#app',//表示，當前咱們new這個vue的實例，要控制頁面上的哪一個區域
        //M層
        data:{//data屬性中存放的是el中要用的數據
            msg:'HelloWorld'//經過Vue提供的指令，很方便的就能把數據渲染到頁面上，程序員不用再操做dom元素了。
        }
    })
</script>
</body>
</html>

運行效果以下：html

這裏當導入了vue.js庫後，裏面會有個Vue的構造器，對應着div。vue構造器中裏面的el綁定div，data綁定數據。前端

解決閃爍問題：

相信新手都遇到過這個問題：vue

能看到{{msg}}是否是很沒有B格？java

這時候加個v-cloak屬性便可解決程序員

代碼以下：有註釋確定能看懂。npm

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <meta charset="utf-8">
    <style type="text/css">
        [v-cloak]{
            display:none;
        }
    </style>
</head>
<body>
<div id="app">
    <!--使用 v-cloak可以解決插值閃爍問題-->
    <p v-cloak>{{msg}}</p>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script type="text/javascript">
    //VM層
    
    var vm = new Vue({
        el:'#app',//表示，當前咱們new這個vue的實例，要控制頁面上的哪一個區域
        //M層
        data:{//data屬性中存放的是el中要用的數據
            msg:'歡迎學習Vue'//經過Vue提供的指令，很方便的就能把數據渲染到頁面上，程序員不用再操做dom元素了。
        }
    })
</script>
</body>
</html>

這時候就看不見{{msg}}了app

v-bind指令:

v-bind是vue中提供的用於綁定屬性的指令實例代碼以下：dom

<!DOCTYPE html>
<html>
<head>
    <title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <meta charset="utf-8">
    <style type="text/css">
        [v-cloak]{
            display:none;
        }
    </style>
</head>
<body>
<div id="app">
    <!--使用 v-cloak可以解決插值閃爍問題-->
    <p v-cloak>{{msg}}</p>
    <input type="button" v-bind:value="value">
</div>
<script type="text/javascript">
    //VM層
    
    var vm = new Vue({
        el:'#app',//表示，當前咱們new這個vue的實例，要控制頁面上的哪一個區域
        //M層
        data:{//data屬性中存放的是el中要用的數據
            msg:'歡迎學習Vue'//經過Vue提供的指令，很方便的就能把數據渲染到頁面上，程序員不用再操做dom元素了。
            ,value:'按鈕'
        }
    })
</script>
</body>
</html>

運行結果：

能夠看到bind可以綁定屬性值。

原理：v-bind會把原屬性值變成js變量解析。

注意：v-bind指令能夠被簡寫位：要綁定的屬性

v-bind中能夠寫合法的js表達式。

v-on指令：

Vue中提供了v-on事件綁定機制。

示例代碼以下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <meta charset="utf-8">
    <style type="text/css">
        [v-cloak]{
            display:none;
        }
    </style>
</head>
<body>
<div id="app">
    <!--使用 v-cloak可以解決插值閃爍問題-->
    <p v-cloak>{{msg}}</p>
    <input type="button" v-bind:value="value" v-on:click="show">
</div>
<script type="text/javascript">
    //VM層
    
    var vm = new Vue({
        el:'#app',//表示，當前咱們new這個vue的實例，要控制頁面上的哪一個區域
        //M層
        data:{//data屬性中存放的是el中要用的數據
            msg:'歡迎學習Vue'//經過Vue提供的指令，很方便的就能把數據渲染到頁面上，程序員不用再操做dom元素了。
            ,value:'按鈕'
        },
        methods:{//這個methods屬性中定義了當前Vue實例全部可用的方法
            show: function(){
                alert("Hello");
            }
        }
    })
</script>
</body>
</html>

截止以下：咱們掌握瞭如何定義一個基本的Vue代碼結構，插值表達式，v-cloak，v-html，v-bind v-on 。

相關標籤/搜索

每日一句

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