小白學VUE——入門篇

小白學VUE——入門

文章目錄

小白學VUE——入門

結語

前言：什麼是VUE?

Vue.js（讀音 /vjuː/, 類似於 view）是一套構建用戶界面的漸進式框架。 Vue 只關注視圖層，採用自底向上增量開發的設計。 Vue 的目標是通過儘可能簡單的 API 實現響應的數據綁定和組合的視圖組件。

環境準備：

vue的js文件

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

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

unpkg：https://unpkg.com/vue/dist/vue.js, 會保持和 npm 發佈的最新的版本一致。

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
2.VSCODE軟件
(2).使用內部導入方法

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

vscode

安裝之後下載如下插件

Vue入門程序

插值：數據綁定最常見的形式就是使用 **{{…}}（雙大括號）**的文本插值：

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


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

</head>
<body>
    

    <!-- 插值表達式 獲取data裏面定義的值 {{message}} -->
    <div id="app">{{ message }}</div>

    <script>
        //創建一個VUE對象
        var app = new Vue({
            el: "#app",//綁定VUE作用的範圍
            data: {//定義頁面中顯示的模型數據
                message: 'hello vue'
            }
        });

    </script>

</body>
</html>

抽取代碼片段

步驟：文件-首選項-用戶片段
輸入片段名稱回車

點擊新建用戶片段

複製以下片段覆蓋之前的註釋內容

{
	"vh": {
		"prefix": "vh", // 觸發的關鍵字 輸入vh按下tab鍵
		"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>",
			"    <script src=\"js/vue.min.js\"></script>",
			"</head>",
			"",
			"<body>",
			"    <div id=\"app\"></div>",
			"    <script>",
			"        var vm=new Vue({",
			"           el:'#app',",
			"           data:{},",
			"           methods:{}",
			"        });",
			"    </script>",
			"</body>",
			"",
			"</html>",
		],
		"description": "vh components"
		}
	}

此時，新建一個html文件，輸入vh在按下tab鍵即可快速填充內容

vue標準語法：

v-bind指令

事件單向綁定

<body>
    <div id="app">
    
        <h1 v-bind:title="message">
            {{content}}
        </h1>

        <!-- 簡寫方式 -->
        <h2 :title="content">{{message}}</h2>


    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               content: '我是標題',
               message: '頁面加載於' + new Date().toDateString()
           }
           
        });
    </script>
</body>

效果：

事件雙向綁定

<body>
    <div id="app">
        <!-- 事件單向綁定 -->
        <input type="text" v-bind:value="searchMap.keyword">
        <!-- 事件雙向綁定 -->
        <input type="text" v-model="searchMap.keyword">

        <p>{{searchMap.keyword}}</p>
    </div>

    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               searchMap:{
                   keyword: "vue"
               }
           }
        });
    </script>
</body>

效果：

v-on:click事件監聽指令

事件監聽可以使用 v-on 指令：

<body>
    <div id="app">
        <!-- 綁定單擊事件 -->
        <button type="button" v-on:click="search()">Click me</button>

        <!-- 簡寫方式 -->
        <button type="button" @click="search()">Click me again</button>
        <!-- 支持不加括號，但是建議加上括號 -->
        <button type="button" @click="search">hello</button>
    </div>

    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               message: "hello vue"
           },
           methods:{//methods裏面可以定義多個方法
                search(e){
                   alert(this.message); 
                }
           }
        });
    </script>
</body>

v: on:submit.prevent指令

<body>
    <div id="app">
        <form action="save" v-on:submit.prevent="onSubmitForm">
            <input type="text" id="name" v-model="username">
            <button type="submit">save</button>
        </form>

    </div>

    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               username: ""
           },
           methods:{
               onSubmitForm(){
                   if(this.username){
                       console.log("提交表單");
                   }else{
                    alert('請輸入用戶名');
                   }
               }
           }
        });
    </script>
</body>

效果:
當輸入框沒有任何信息，提交表單；

輸入框不爲空：

v-if 判斷指令

條件判斷使用 v-if v-else v-else-if指令：

<body>
    <div id="app">

        <h1>是否繼續努力？</h1>

        <input type="radio" v-model="ok" name="ok" value="true">是的
        <br>
        <input type="radio" v-model="ok" name="ok" value="false">不
        <br>

        <span v-if="ok">{{yes}}</span>
        <span v-else>{{no}}</span>

    </div>


    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               yes: "加油，勝利就在終點等着你！你會成功的！",
               no: "小夥子，跌倒不算什麼。站起來，別放棄！",
               ok: false
           },
           methods:{}
        });
    </script>
</body>

效果

敲代碼累了，發個表情包激勵一下自己！

v-if 循環指令

循環使用 v-for 指令。

v-for 指令需要以 site in sites 形式的特殊語法， sites 是源數據數組並且 site 是數組元素迭代的別名。

v-for 可以綁定數據到數組來渲染一個列表

<body>
    <div id="app">
        <!-- 打印1-10 -->
        <ul>
            <li v-for="n in 10">{{n}}</li>
        </ul>

        <!-- 打印無序 -->
        <ol>
            <li v-for="(n, index) in 10">{{n}} -- {{index}}</li>
        </ol>

        <!-- 打印數組 -->
        <table>
                <tr>
                    <td v-for="msg in message"> {{msg}} </td>
                </tr>

                <tr>
                    <td v-for="item in items"> {{ item.name }}   </td> 
                </tr>

                <tr>
                    <td v-for="item in items"> {{ item.age }}   </td> 
                </tr>
                
        </table>



    </div>

    <script>
        var vm=new Vue({
           el:'#app',
           data:{
                message: ["java","python","javascript"],
               items: [ 
                   {name: "jack",age:19},
                   {name: "lucy",age:20},
                   {name: "tom",age:21},
                   {name: "mary",age:22} 
                ]
           },
           methods:{}
        });
    </script>
</body>

效果：

結語

水平有限，僅供參考，若有紕漏，希望隨時指出！

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.