day03---Vue(03)

時間  2021-08-14
標籤 html vue app 框架 ide 工具 網站 this code 欄目 HTML 简体版
原文   原文鏈接

1、介紹

一、Vue.js 是什麼html

Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架。
Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。另外一方面，當與現代化的工具鏈以及各類支持類庫結合使用時，Vue 也徹底可以爲複雜的單頁應用提供驅動。
官方網站：https://cn.vuejs.orgvue

二、初始Vue.jsapp

首先引入vue.min.js到項目文件目錄下。
建立 demo.html框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <!-- id標識vue做用的範圍 -->
        <div id="app">
            <!-- {{}} 插值表達式，綁定vue中的data數據 -->
            {{ message }}
        </div>
        
        <script src="vue.min.js"></script>
        <script>

            // 建立一個vue對象
            new Vue({
                el: '#app',//綁定vue做用的範圍
                data: {//定義頁面中顯示的模型數據
                    message: 'Hello Vue!'
                }
            })

        </script>
</body>
</html>

這就是聲明式渲染：Vue.js 的核心是一個容許採用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統
這裏的核心思想就是沒有繁瑣的DOM操做，例如jQuery中，咱們須要先找到div節點，獲取到DOM對象，而後進行一系列的節點操做ide

三、在vs code中建立代碼片斷工具

文件 =>  首選項 => 用戶代碼片斷 => 新建全局代碼片斷/或文件夾代碼片斷：vue-html.code-snippets網站

注意：製做代碼片斷的時候，字符串中若是包含文件中複製過來的「Tab」鍵的空格，要換成「空格鍵」的空格ui

{
    "vue htm": {
        "scope": "html",
        "prefix": "vuehtml",
        "body": [
            "<!DOCTYPE html>",
            "<html lang=\"en\">",
            "",
            "<head>",
            "    <meta charset=\"UTF-8\">",
            "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
            "    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
            "    <title>Document</title>",
            "</head>",
            "",
            "<body>",
            "    <div id=\"app\">",
            "",
            "    </div>",
            "    <script src=\"vue.min.js\"></script>",
            "    <script>",
            "        new Vue({",
            "            el: '#app',",
            "            data: {",
            "                $1",
            "            }",
            "        })",
            "    </script>",
            "</body>",
            "",
            "</html>",
        ],
        "description": "my vue template in html"
    }
}

2、基本語法

一、基本數據渲染和指令this

你看到的 v-bind 特性被稱爲指令。指令帶有前綴 v-
除了使用插值表達式{{}}進行數據渲染，也可使用 v-bind指令，它的簡寫的形式就是一個冒號（:）
建立 01-基本數據渲染和指令.htmlcode

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
                    
        <!-- 若是要將模型數據綁定在html屬性中，則使用 v-bind 指令
            此時title中顯示的是模型數據
        -->
        <h1 id="app" v-bind:title="message">
            {{ content }}
        </h1>

        <!-- v-bind 指令的簡寫形式： 冒號（:） -->
        <h1 id="app"  :title="message">
            {{ content }}
        </h1>

    </div>

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

            // 建立一個vue對象
        new Vue({
                el: '#app',//綁定vue做用的範圍
                data: {
                        content: '我是標題',
                        message: '頁面加載於 ' + new Date().toLocaleString()
                    }
        })
        </script> 
</body>
</html>

二、雙向數據綁定

雙向數據綁定和單向數據綁定：使用 v-model 進行雙向數據綁定
建立 02-雙向數據綁定.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- v-bind:value只能進行單向的數據渲染 -->
        <input type="text" v-bind:value="searchMap.keyWord">
        <!-- v-model 能夠進行雙向的數據綁定  -->
        <input type="text" v-model="searchMap.keyWord">

        <p>您要查詢的是：{{searchMap.keyWord}}</p>
    </div>
    <script src="vue.min.js"></script>
    <script>

        // 建立一個vue對象
      new Vue({
            el: '#app',//綁定vue做用的範圍
            data: {
                searchMap:{
                keyWord: '尚硅谷'
                }
    }
        })
    </script>    
    
</body>
</html>

三、事件

需求：點擊查詢按鈕，按照輸入框中輸入的內容查找公司相關信息
在前面的例子基礎上，data節點中增長 result，增長 methods節點 並定義 search方法。
html中增長 button 和 p。
使用 v-on 進行數件處理，v-on:click 表示處理鼠標點擊事件，事件調用的方法定義在 vue 對象聲明的 methods 節點中。
建立 03-事件.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <div id="app">
            <!-- v-on 指令綁定事件，click指定綁定的事件類型，事件發生時調用vue中methods節點中定義的方法 -->
            <button v-on:click="search()">查詢</button>

            <p>您要查詢的是：{{searchMap.keyWord}}</p>
            <p><a v-bind:href="result.site" target="_blank">{{result.title}}</a></p>

            <!-- v-on 指令的簡寫形式 @ -->
            <button @click="search()">查詢</button>
        </div>
        <script src="vue.min.js"></script>
        <script>
    
            // 建立一個vue對象
          new Vue({
                el: '#app',//綁定vue做用的範圍
                data: {
                    searchMap:{
                        keyWord: '尚硅谷'
                    },
                    //查詢結果
                    result: {}
                },
                methods:{
                    search(){
                        console.log('search');
                        this.result = { 
                            "title":"尚硅谷",
                            "site":"http://www.atguigu.com"
                        }
                    }
                }
            })
        </script>    
</body>
</html>

四、修飾符

修飾符 (Modifiers) 是以半角句號（.）指明的特殊後綴，用於指出一個指令應該以特殊方式綁定。
例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件調用 event.preventDefault()：
即阻止事件本來的默認行爲

建立 04-修飾符.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

    </script>


    <div id="app">
    <!-- 修飾符用於指出一個指令應該以特殊方式綁定。
     這裏的 .prevent 修飾符告訴 v-on 指令對於觸發的事件調用js的 event.preventDefault()：
     即阻止表單提交的默認行爲 -->
     <form action="save" v-on:submit.prevent="onSubmit">
        <label for="username">
            <input type="text" id="username" v-model="user.username">
            <button type="submit">保存</button>
        </label>
    </form>
    </div>
    <script src="vue.min.js"></script>
    <script>

        // 建立一個vue對象
      new Vue({
        el: '#app',//綁定vue做用的範圍
        data: {
            user: {}
        },
        methods: {
        onSubmit() {
            if (this.user.username) {
                console.log('提交表單')
            } else {
                alert('請輸入用戶名')
            }
        }
    }

        })
    </script>    
</body>
</html>

五、條件渲染

v-if：條件指令
建立 05-條件渲染.html
注意：單個複選框綁定到布爾值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body> 
    <div id="app">
        <input type="checkbox" name="" id="" v-model="ok">是否贊成1{{ok}}
        <p v-if="ok">贊成</p>
        <p v-else>查看協議。。。。。。。。。。</p>
    </div>
    <div id="app2">
            <input type="checkbox" name="" id="" v-model="ok">是否贊成2{{ok}}
            <p v-show="ok">贊成</p>
            <p v-show="!ok">查看協議。。。。。。。。。。</p>
        </div>

    <script src="vue.min.js"></script>
    <script>
        let app = new Vue({
            el:'#app',
            data:{
                ok:false
            }
        })

         let app2 = new Vue({
            el:'#app2',
            data:{
                ok:false
            }
        })
    </script>
</body>
</html>

v-show：條件指令
使用v-show完成和上面相同的功能

 <!-- v:show 條件指令 初始渲染開銷大 -->
<h1 v-show="ok">show：Lorem ipsum dolor sit amet.</h1>
<h1 v-show="!ok">no</h1>

（1）v-if 是「真正」的條件渲染，由於它會確保在切換過程當中條件塊內的事件監聽器和子組件適當地被銷燬和重建。

（2）v-if 也是惰性的：若是在初始渲染時條件爲假，則什麼也不作——直到條件第一次變爲真時，纔會開始渲染條件塊。

（3）相比之下，v-show 就簡單得多——無論初始條件是什麼，元素老是會被渲染，而且只是簡單地基於 CSS 進行切換。

（4）通常來講，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。所以，若是須要很是頻繁地切換，則使用 v-show 較好；若是在運行時條件不多改變，則使用 v-if 較好。

六、列表渲染

v-for：列表循環指令
建立 06-列表渲染.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

        <!-- 一、簡單的列表渲染 -->
        <ul>
            <li v-for="n in 10">{{ n }} </li>
        </ul>
        <ul>
            <!-- 若是想獲取索引，則使用index關鍵字，注意，圓括號中的index必須放在後面 -->
            <li v-for="(n, index) in 5">{{ n }} - {{ index }} </li>
        </ul>

        <script>
            data: {
                userList: [
                    { id: 1, username: 'helen', age: 18 },
                    { id: 2, username: 'peter', age: 28 },
                    { id: 3, username: 'andy', age: 38 }
                ]
            }
        </script>

        <!-- 二、遍歷數據列表 -->
        <table border="1">
            <!-- <tr v-for="item in userList"></tr> -->
            <tr v-for="(item, index) in userList">
                <td>{{index}}</td>
                <td>{{item.id}}</td>
                <td>{{item.username}}</td>
                <td>{{item.age}}</td>
            </tr>
        </table>

</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程