【Vue】vuejs基本語法

阿新 • • 發佈：2022-05-19

vue.min.js地址：　　https://cn.vuejs.org/js/vue.min.js

使用 CDN 方法
以下推薦國外比較穩定的兩個 CDN，國內還沒發現哪一家比較好，目前還是建議下載到本地。

Staticfile CDN（國內） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js

unpkg：https://unpkg.com/[email protected]/dist/vue.min.js。

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

CDN vue.min.js

引用vue.min.js

<script src="vue.min.js"></script>

每個 Vue 應用都需要通過例項化 Vue 來實現。

<script>
    // 每個 Vue 應用都需要通過例項化 Vue 來實現。
    new Vue({
        // el 引數，它是DOM元素中的 id
        el:'#app',
        // data 用於定義屬性
        data:{
            // 資料
            message:"Vue_Hello World！~"
        },
         
// methods 用於定義的函式
        methods:{
        }
    })
</script>

資料繫結

　　最常見的形式就是使用 {{...}}（雙大括號）的文字插值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue_demo</title>
    <script src="vue.min.js"></script>
</head> 

<body>
    <!--繫結元素-->
    <div id="app">
        <h1>HTML_HelloWorld !~</h1>
        <!--資料繫結 寫法： {{...}} 用於輸出物件屬性和函式返回值-->
        <h1>{{ message }}</h1>

    </div>
<script>
    // 每個 Vue 應用都需要通過例項化 Vue 來實現。
    new Vue({
        // el 引數，它是DOM元素中的 id
        el:'#app',
        // data 用於定義屬性
        data:{
            // 資料
            message:"Vue_Hello World！~"
        },
        // methods 用於定義的函式
        methods:{
            doSamothing:function(){
　　　　 　　 }
        }
    })
</script>
</body>
</html>

指令

指令是帶有 v- 字首的特殊屬性，用於在表示式的值改變時，將某些行為應用到 DOM 上

v-html 輸出html程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue_demo</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-html 用於輸出 html 程式碼-->
        <div v-html="message"></div>
    </div>
<script>
    new Vue({
        el:'#app',
        data:{
            message:"Vue_Hello World！~"
        }
    })
</script>
</body>
</html>

引數

引數在指令後以冒號指明

v-bind HTML屬性中的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue_demo</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{ message }}</h1>
        <!-- HTML屬性中的值應使用 v-bind 指令, href 是引數 -->
        <pre><a v-bind:href="url">百度一下</a></pre>
        <div v-bind:class="{'class1':use}">
            v-bind:class 指令
        </div>
    </div>
<script>
    new Vue({
        el:'#app',
        data:{
            message:"Vue_Hello World！~",
            url:'http://www.baidu.com',
            use:false
        }
    })
</script>
</body>
</html>

修飾符

修飾符是以半形句號 . 指明的特殊字尾，用於指出一個指令應該以特殊方式繫結

v-model 雙向資料繫結

用於 input、select、textarea、checkbox、radio 等表單控制元件元素

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue_demo</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <!--繫結元素-->
    <div id="app">
        <h1>HTML_HelloWorld !~</h1>
        <!--資料繫結 寫法： {{...}} 用於輸出物件屬性和函式返回值-->
        <h1>{{ message }}</h1>
        <!-- 資料雙向繫結 寫法：v-model 用於 input、select、textarea、checkbox、radio 等表單控制元件元素-->
        <!-- 好處：所有引用message值的地方同步刪改 -->
        <input type="text" v-model="message">
    </div>
<script>
    // 每個 Vue 應用都需要通過例項化 Vue 來實現。
    new Vue({
        // el 引數，它是DOM元素中的 id
        el:'#app',
        // data 用於定義屬性
        data:{
            // 資料
            message:"Vue_Hello World！~"
        },
        // methods 用於定義的函式
        methods:{
        }
    })
</script>
</body>
</html>

v-if 根據表示式的值(true 或 false )來決定是否執行元素操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue_demo</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 如果seen = true 則顯示p內容 否則顯示內容-->
        <p v-if="seen">現在你看到我了</p>
        <a v-if="!seen">this is what</a>
    </div>

    <script>
    var nv = new Vue({
        el: '#app',
        data: {
            seen: true
      }
    })
    </script>
</body>
</html>

v-on 監聽DOM 事件，引數是監聽的事件名

<a v-on:click="doSomething">
<!-- 縮寫 -->
<a @click="doSomething"></a>

縮寫

v-bind縮寫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue_demo</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="app">
    <h1>{{ message }}</h1>
    <!-- HTML屬性中的值應使用 v-bind 指令, href 是引數 -->
    <pre><a v-bind:href="url">百度一下</a></pre>
    <div :class="{'class1':use}">
    v-bind:class 指令
</div>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            message:"Vue_Hello World！~",
            url:'http://www.baidu.com',
            use:false
        }
    })
</script>
</body>
</html>

函式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue_demo</title>
    <script src="vue.min.js"></script>
    <style type="text/css">
    </style>
</head>
<body>
<div id="app">
    <h1>{{ message }}</h1>
    <!-- HTML屬性中的值應使用 v-bind 指令, href 是引數 -->
    <pre><a v-bind:href="url">百度一下</a></pre>
    <div :class="{'class1':use}">
        v-bind:class 指令
    </div>
    <br/>
    <form action="demo.html" v-on:submit="submitFun">
        <button type="submit">提交</button>
    </form>
</div>
<script>
    var nv = new Vue({
        el:'#app',
        data:{
            message:"Vue_Hello World！~",
            url:'http://www.baidu.com',
            use:false
        },
        methods:{
            submitFun:function(){
                alert("提交提示")
            }
        }
    })
</script>
</body>
</html>