半小時入門Vue.js基礎

React.js、Angular.js、Vue.js這三個單頁面的框架，也許就Vue最陌生了，所以最近需要學習學習，同時把相應的一些基礎總結下來。

Vue的體系中，包括Vue.js、Vue-router、Vue-source、webpack等等一系列知識。

本篇文章的目標：掌握Vue.js的入門基礎。

這些所有的demo的github地址：git地址

demo1、Vue的hello world。

Vue是一個JavaScript框架，使用這個框架，需要引入Vue.js。
在本篇文章中，所有的Vue.js都使用官方的cdn託管。

<script src="https://cdn.jsdelivr.net/npm/vue">

一個Vue項目，本質是一個單頁面應用，所以需要一個單頁面的入口

<div id='app'></div>

然後，有了這個入口，就可以新建Vue的實例了。

new Vue({
     el:'#app',//申明瞭vue的入口
     data:{
         message:'hello world!'
     }
});

其中el是必須的，表示Vue的入口，data表示聲明式渲染的數據。可在dom中展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">{{message}}</div>
<script>
    new Vue({
        el:'#app',
        data:{
            message:'hello world!'
        }
    });
</script>
</body>
</html>

demo2、v-bind綁定dom元素的屬性

v-bind:屬性=’綁定數據’，這樣的格式是動態綁定dom屬性的語法。

其中，v-bind是Vue的一個指令。和angular中的指令差不多。（指令在Vue中具有一些特殊的功能）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app" v-bind:title="message">鼠標懸停幾秒鐘查看此處動態綁定的提示信息！</div>
<script>
    new Vue({
        el:'#app',
        data:{
            message:'頁面加載於 ' + new Date().toLocaleString()
        }
    });
</script>
</body>
</html>

demo3、v-if完成的條件渲染

一個單頁面應用，條件渲染是必不可少的一部分。

下面的示例，通過message的值不同，展示不同的界面輸出。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
    <p v-if="message">message爲true</p>
    <p v-if="!message">message爲false</p>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            message:true
        }
    });
</script>
</body>
</html>

demo4、v-for完成的列表渲染

單頁面應用的另一項重要任務就是渲染數組

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in message">姓名：{{item.name}},年齡：{{item.age}}</li>
    </ul>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            message:[{name:'張三',age:23},{name:'李四',age:24},{name:'王五',age:25}]
        }
    });
</script>
</body>
</html>

demo5、用戶輸入的雙向綁定（v-model）

什麼是雙向綁定？

就是用戶輸入什麼，我就能得到什麼，同時我得到的值直接可以反映到dom界面上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
    <input v-model="message" type="text"/>
    <p>用戶輸入的值：{{message}}</p>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            message:'hello'
        }
    });
</script>
</body>
</html>

demo6、Vue的事件v-on。

事件是網頁和用戶交互的核心，Vue使用v-on這個指令來達到交互的目的。

基本語法是：v-on:事件類型=”事件名稱”；

其中，事件定義在methods屬性中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
    <button v-on:click="clickEvent">點擊我</button>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            message:'hello'
        },
        methods:{
            clickEvent: function () {
                alert('觸發了事件');
            }
        }
    });
</script>
</body>
</html>

demo7、Vue的組件

如果說前面的東西都是小兒科，那麼組件的簡單使用，是有必要描述一下的。

最簡單的組件示例

使用Vue.component(name,obj)來定義一個組件，它一般有兩個參數，第一個參數是個字符串，代表組件名稱；第二個參數是個對象，代表組件配置。

組件的第二個參數中，template代表要渲染到界面的東西是什麼！

組件在使用的時候，把它當做div一樣的方式使用就行了。在頁面中類似這樣的語法：

<組件名></組件名>

完整示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
    <ol>
        <!--使用組件-->
        <todo-item></todo-item>
    </ol>

</div>
<script>
    //定義一個最簡單的組件
    Vue.component('todo-item',{
        template:'<li>這是一個組件</li>'
    });
    new Vue({
        el:'#app'
    });
</script>
</body>
</html>

組件可以接受屬性

組件在它的第二個參數對象的屬性中，添加一個props就能夠接受父組件傳遞的屬性。這個props是一個數組，裏面的每一項是父元素的props名字。

組件的定義：

組件的使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
    <ol>
        <!--使用組件-->
        <todo-item
                v-for="item in todoList"
                v-bind:todo="item"
        ></todo-item>
    </ol>

</div>
<script>
    //定義一個最簡單的組件
    Vue.component('todo-item',{
        props:['todo'],
        template:'<li>name:{{todo.name}},age:{{todo.age}}</li>'
    });
    new Vue({
        el:'#app',
        data:{
            todoList:[{name:'張三',age:23},{name:'李四',age:24},{name:'王五',age:25}]
        }
    });
</script>
</body>
</html>

假想的組件使用模板

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

demo8、Vue動畫

在這裏，使用一個最簡單的方式，描述Vue的動畫。

關於動畫的詳細描述在這裏，進入/離開以及列表過度

1、transition組件是用於動畫的一種方式，它有個name屬性。

2、使用不同的class用來描述不同時期的動畫展現。: 進入狀態

v-enter：開始（進入狀態）
v-enter-active：過程（進入狀態）
v-enter-to：結束（進入狀態）; 離開狀態
v-leave：開始（離開狀態）
v-leave-active：過程（離開狀態）
v-leave-to：結束（離開狀態）

其中，上面的V代表transiton組件的name屬性。

3、完整的示例demo如下：

//這是一個通過v-if展示信息的動畫示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-demo</title>
    <style>
        .fade-enter-active, .fade-leave-active {
            transition: opacity .5s
        }
        .fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
            opacity: 0
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">

    <button v-on:click="clickEvent">切換</button>

    <transition name="fade">
        <p v-if="isShow">
            {{message}}
        </p>
    </transition>

</div>
<script>
    new Vue({
        el:'#app',
        data:{
            isShow: true,
            message:'hello world!'
        },
        methods:{
            clickEvent: function () {
                this.isShow = !this.isShow
            }
        }
    });
</script>
</body>
</html>

半小時入門Vue.js基礎

demo1、Vue的hello world。

demo2、v-bind綁定dom元素的屬性

demo3、v-if完成的條件渲染

demo4、v-for完成的列表渲染

demo5、用戶輸入的雙向綁定（v-model）

demo6、Vue的事件v-on。

demo7、Vue的組件

最簡單的組件示例

組件可以接受屬性

假想的組件使用模板

demo8、Vue動畫

[轉帖]使用NMT和pmap解決JVM資源泄漏問題原創

Python實現大麥網搶票的四大關鍵技術點解析

Python 安裝庫指令大全

salesforce零基礎學習（一百三十八）零碎知識點小總結（十）

一款開源的.NET程序集反編譯、編輯和調試神器

關於接口協議，你必須要知道這些！

基於 Milvus + LlamaIndex 實現高級 RAG

【2024-05-21】以茶會友

es6 promise 的具體用法

es6 promise 的具體用法 ES6 Promise用法小結

Web服務器站點設置和IIS安裝設置圖解

通過 Nginx 代理轉發配置實現跨域（API 代理轉發）

Vue初體驗（九）計算屬性

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結