Vue語法

Vue語法

MVVM

1.什麼是MVVM

MVVM (Model-View-ViewModel) 是一種軟體架構設計模式，由微軟WPF (用於替代WinForm，以前就是用這個技術開發桌面應用程式的)和Silverlight (類似於Java Applet,簡單點說就是在瀏覽器上運行的WPF)的架構師Ken Cooper和Ted Peters 開發，是一種簡化用戶介面的事件驅動編程方式。由John Gossman (同樣也是WPF和Silverlight的架構師)於2005年在他的部落格上發表。

MVVM 源自於經典的MVC (ModI-View-Controller) 模式。MVVM的核心是ViewModel層，負責轉換Model中的數據對象來讓數據變得更容易管理和使用，其作用如下:

  • 該層向上與視圖層進行雙向數據綁定
  • 向下與Model層通過介面請求進行數據交互

1

2.MVVM好處

MVVM模式和MVC模式一樣，主要目的是分離視圖(View)和模型(Model),有幾大好處：

  • 低耦合:視圖(View)可以獨立於Model變化和修改,一個ViewModel可以綁定到不同的
    View上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。
  • 可復用:你可以把一些視圖邏輯放在一個ViewModel裡面，讓很多View重用這段視圖邏輯。
  • 獨立開發:開發人員可以專註於業務邏輯和數據的開發(ViewModel),設計人員可以專註於頁面設計。
  • 可測試:介面素來是比較難於測試的，而現在測試可以針對ViewModel來寫。

Vue.js 就是一個MVVM的實現者，他的核心就是實現了DOM監聽與數據綁定

第一個Vue程式

1.創建一個空的新文件夾，用idea引入

2.創建一個新的html頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
</html>

3.引入Vue.js

<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

4.編寫項目

的id為 `vue` ，進行一個el綁定，data中`message`為固定值，在被綁定的div中使用`{{message}}`顯示 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="vue">
        {{message}}
    </div>
    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#vue",
            data: {
                message: "第一個Vue項目"
            }
        });
    </script>
</body>
</html>

直接默認瀏覽器打開該靜態頁面:

2

Vue基本語法

1.v-bind

現在數據和DOM已經被建立了關聯，所有的東西都是響應式的。我們在控制台操作對象的屬性，介面可以實時更新。

我們可以使用v-bind來綁定元素屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div id="vue">
        <span v-bind:title="message">停這兒別動，這裡有個提示資訊！</span>
    </div>

    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#vue",
            data: {
                message: "第一個Vue項目"
            }
        });
    </script>
</body>
</html>

3

2. v-if、v-else

message的值為 B ，在 div 中利用 v-if 進行判斷 ，

  • 如果為 message=='A' 則顯示 A；
  • 如果為 message=='B' 則顯示 B；
  • 如果不是 A 也不是 B ，則顯示 C；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="vue">
        <h1 v-if="message=='A'">A</h1>
        <h1 v-else-if="message=='B'">B</h1>
        <h1 v-else>C</h1>
    </div>

    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#vue",
            data: {
                message: "B"
            }
        });
    </script>
</body>
</html>

3

3. v-for

data中加入 items 數組資訊，然後利用 v-for 進行循環輸出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="vue">
        <li v-for="item in items">
            姓名：{{item.name}}，年齡：{{item.age}}
        </li>
    </div>
    </body>
    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#vue",
            data: {
                items: [
                    {name: "zc", age: 20},
                    {name: "dongdong", age: 10},
                    {name: "lili", age: 16}
                ]
            }
        })
    </script>
</body>
</html>

4

4. v-on 事件綁定

  • data中message資訊為boom！！
  • methods對象中綁定方法
  • 被綁定的div中加入button，利用 v-on 調用方法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="vue">
        <button v-on:click="sayHi">Click Me</button>
    </div>
    </body>

    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#vue",
            data: {
                message: "boom！！！！"
            },
            methods: {
                //方法必須綁定在Vue的Methods對象中，v-on:事件
                sayHi: (function () {
                    alert(this.message)
                })
            }
        })
    </script>
</body>
</html>

5. 雙向綁定 v-model

在Vue.js 中，如果使用vuex ，實際上數據還是單向的，對於我們處理表單，Vue.js的雙向數據綁定用起來就特別舒服了

即兩者並不互斥，在全局性數據流使用單項,方便跟蹤;局部性數據流使用雙向，簡單易操作。

你可以用v-model指令在表單 <input>、<textarea> 及<select> 元素上創建雙向數據綁定。它會根據控制項類型自動選取正確的方法來更新元素。

注意：v-model會忽略所有元素的value、checked、selected特性的初始值而總是將Vue實例的數據作為數據來源，你應該通過JavaScript在組件的data選項中聲明。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="vue">
        輸入框:
        <input type="text" value="" v-model="text">
        <p>value:{{text}}</p>
        <br>
        文本域：
        <textarea v-model="textarea"></textarea>
        <p>value:{{textarea}}</p>
        <br>
        單選框：
        <input type="radio" name="sex" value="男" v-model="radio">男
        <input type="radio" name="sex" value="女" v-model="radio">女
        <p>value:{{radio}}</p>
        <br>
        下拉框：
        <select v-model="selected">
            <option value="" disabled>-請選擇-</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <p>value:{{selected}}</p>
    </div>
    </body>
    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#vue",
            data: {
                text: "",
                textarea:"",
                radio: "",
                selected: ""
            }
        })
    </script>
</body>
</html>

5

6.Vue組件

組件是可復用的Vue實例，說白了就是一組可以重複使用的模板，跟JSTL的自定義標籤、Thymeleaf的th:fragment 等框架有著異曲同工之妙。通常一個應用會以一棵嵌套的組件樹的形式來組織：

6

基礎版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="vue">
        <zc></zc>
    </div>
    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script>
        Vue.component("zc",{
            template: '<h1>template</h1>'
        })
        var vm = new Vue({
            el: "#vue"
        })
    </script>
</body>
</html>

7

拓展版

  • 綁定div，data中加入數組資訊
  • 添加vue組件 zc
  • 利用 v-for 循環數組， v-bind 綁定數組
  • 在vue組件中用 props 接收，再添加到 template 中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="vue">
        <zc v-for="item in items" v-bind:zc="item"></zc>
    </div>
    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script>
        Vue.component("zc",{
            props: ['zc'],
            template: '<li>{{zc}}</li>'
        })
        var vm = new Vue({
            el: "#vue",
            data: {
                items: ['Java','Python','Php']
            }
        })
    </script>
</body>
</html>

8

個人部落格為：
MoYu's Github Blog
MoYu's Gitee Blog

Tags:

VirMach 便宜 VPS