Vue 入門

時間 2020-04-01

標籤 vue 入門简体版

原文原文鏈接

vue是國人開發的一個js框架，國人用得比較多。javascript

Vue等框架與jQuery的區別

jQuery基於dom操做html
Vue框架以數據驅動、組件化開發爲核心vue

下載vue.js

若是安裝了node，執行命令 npm install vue 下載vue.js，可在vue後面加上 @版本號指定要下載的vue.js版本，未指定時默認下載最新穩定版。java

在代碼中引入下載的vue.js：node

<script type="text/javascript" src="vue.js"></script>

上線時要換爲生產版 vue.min.jsnpm

demo vue.js的簡單使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 引入vue.js -->
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 
    </head>
    <body>
        
        <!--留坑，後續填數據 -->
        <div id="app"></div> 
        <div class="red"></div> 
        <div></div> 
        
        <script>
            new Vue({
                el:'#app',  //經過id來指定
                template:'<p>hello vue1</p>'  //要填充的內容。能夠去嵌套元素，好比'<div><p></p></div>'；但只能有一個根元素，'<div></div><div></div>'這樣就不行
            });
            
            new Vue({
                el:'.red',  //經過class來指定
                template:'<p>hello vue2</p>'
            });
            
            new Vue({
                el:'div',  //經過元素名來指定。不經常使用，由於控制不精細
                template:'<p>hello vue3</p>'
            });
                    
        </script>
        
    </body>
</html>

new Vue()只會產生一個Vue對象，只能填一個坑。app

好比有2個<div class="red">，一個new Vue()只能填一個。框架

demo 動態數據

    <div id="app"></div> 

    <script>
        new Vue({
            el:'#app',
            template:'<p>姓名：{{name}}，年齡：{{age}}</p>',  //能夠用{{ }}佔位
            data:function(){
                return{
                    name:'chy',  //數據
                    age:20,
                }
            }
        });
    </script>

1. Vue入坑——vue-router（vue路由）入門
2. Vue入門篇
3. Vue入門
4. vue入門
5. VUE入門
6. vue入門（一）
7. vue入門一
8. 入門VUE
9. Vue CLi3入門
10. VUE 入門
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Neo4j數據庫入門教程 - NoSQL教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

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