1. 程式人生 > >Vue新手入門教程——helloworld

Vue新手入門教程——helloworld

Vue:漸進式JavaScript框架

如何安裝使用??    -->官網下載vue.js然後在自己的專案中引入 https://cn.vuejs.org/v2/guide/installation.html

<!--通過外鏈方式引入vue.js  注意:Vue就是一個全域性變數-->
<script type="text/javascript" src="js/vue.min.js"></script>

Vue入門_helloworld:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Vue入門_helloworld</title>
    <!--通過外鏈方式引入vue.js  注意:Vue就是一個全域性變數-->
    <script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<!--①建立一個html元素-->
<div id="zq">{{name}}<!--③使用{{ }}}--></div>
<script type="text/javascript">
    /*②建立一個vue物件,掛載到指定zq的html標籤上    */
    var test = new Vue({
        el:"#zq",
        data:{
            name:"helloworld"
        }
    })
</script>
</body>
</html>

效果圖: