10分鐘快速入門vue.js

時間 2020-05-08

原文原文鏈接

Vue.js是一個輕巧、高性能、可組件化的MVVM庫，一套用於構建用戶界面的漸進式框架，上手簡單，兼容強大。html

官方文檔：https://cn.vuejs.org/v2/guide/vue

下面咱們就直接來使用一下vue:npm

引入vue.js:小程序

<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生產環境版本，優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

建立一個vue對象，綁定某個節點，該節點下的全部dom將被這個vue對象接管：微信小程序

vue對象相似微信小程序,data裏面的屬性能夠在頁面上經過「{{}}」（雙大括號）形式來映射，而且是雙向綁定的。微信

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>這是一個vue項目</title>
    </head>
    <body>
        
        <div id="app"> {{msg}} </div>
        
        
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script>
            
            var app = new Vue({ el:'#app',//接管的父類節點容器
 data:{ msg:"Hello world" } }) </script>
    </body>
</html>

運行以下：app

常規操做：框架

vue的事件能夠用v-on:click來綁定，也能夠簡寫爲 @click，常規方法定義在vue對象的methods裏面dom

vue的條件執行能夠用 v-if、v-else-if、v-else來執行，v-else必須跟在v-if或v-else-if後面ide

vue的循環能夠用 v-for 來執行

下面一塊兒來看下這些屬性的用法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>這是一個vue項目</title>
    </head>
    <body>
        
        <div id="app"> {{msg}} <button @click="changeMsg()">點擊看看</button>
            
            <p v-if="score > 90">今晚出去嗨</p>
            <p v-else-if="score >= 60">在家看電視</p>
            <p v-else="score < 60">房間學習vue</p>

            <ul>
                <li v-for="(item,index) in weekList">{{item}}-----{{index}}</li>
            </ul>
        </div>
        
        
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script>
            
            var app = new Vue({ el:'#app',//接管的父類節點容器
 data:{ msg:"Hello world", score:59, weekList:["週一","週二","週三","週四","週五","週六","週日"], }, methods:{ changeMsg: function(){ this.msg = "Hello vue"; } } }) </script>
    </body>
</html>