vue 的基本語法

時間 2019-11-09

標籤 vue 基本語法简体版

原文原文鏈接

做爲國內目前最火的框架，功能強大，語法簡單，基於Angular 基礎上，比angular 更輕量，更適配於移動端javascript

先引入vue文件。。html

<script src="js/Vue.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
            window.onload=function(){
                new Vue({       
                    el:".oDiv",      //el  是固定的語法 必須這麼寫
                    data:{　　　　　　//data 也是固定的語法 
                        a:"welcome to vue" 
                    }
                })
            };
        </script>

和angular 同樣綁定數據到元素vue

<div class="div">
     <p>{{a}}</p>
</div>

是否是很簡單。java

new Vue 裏面能夠隨便寫 array、json 、string 均可以json

循環遍歷和angular 同樣可是再也不是 ng-repeat 而是 v-for="item in arr"框架

還有好多angular 的指令和vue的差很少函數

好比：v-modelthis

　　 v-if spa

　　　v-elsecode

　　　v-show

　　　v-bind等等

vue 的事件比angular 也簡單不少好比 ng-click="get()"

在 vue 裏是 v-click="get()" 能夠簡寫爲 @click="get()"

這些事件的方法寫在實例化vue對象裏面

<script type="text/javascript">
            window.onload=function(){
                new Vue({       
                    el:".oDiv",      //el  是固定的語法 必須這麼寫
                    data:{　　　　　　//data 也是固定的語法 
                        a:"welcome to vue" 
                    },
                    methods:{　　　　// methods  也是固定的語法
                         get:function(){
                               alert('welcome to vue')
                         }
                    }
                })
            };
</script>

<input type="button" value="按鈕" @click="get()" />

若是不須要傳參後面的括號也不用寫。可是爲了寫法規範帶上比較好。

附上小的練習留言板

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/Vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            window.onload=function(){
                new Vue({
                    el:".div",
                    data:{
                        a:"",
                        arr:[]
                    },
                    methods:{
                     // 這裏的this 指的是 vue 對象
                        add:function(){
                            if(this.a!=""){
                                this.arr.unshift(this.a);
                                this.a="";
                            }
                        },
                        remove:function(index){
                            this.arr.splice(index,1);
                        }
                    }
                })
            };
        </script>
    </head>
    <body>
        <div class="div">
            <input type="text" v-model="a" @keyup.13="add()" />
            <input type="button" value="按鈕" @click="add()" />
            <p v-if="this.arr.length==0">暫無留言</p>
            <ul>
                <li v-for="item in arr">{{item}}
                    <a href="javascript:;" @click="remove($index)">刪除</a>
                </li>
            </ul>
        </div>
    </body>
</html>