2021年1月20日 星期三

Vue - 初學者的筆記(參考來源於文內)

簡介

Vue.js主要是View跟Model的部分，但是效能、速度以及學習門檻都比React或Angular低，所以上手簡單。


優點：

主要就是專注在web技術上，支援html template、pug (jade)、coffeescript，甚至可與sass、less等加強版CSS做整合，而擴充性質的plugin也是頗多的。

到官網進行安裝?

https://vuejs.org/v2/guide/index.html

官網文件有一堆安裝方式可參考，感覺很複雜，但其實只要像載入jquery方式一樣處理：

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

Hello World

新增一個檔案*.html，程式碼如下：

橘標的資料是vue function指定參數

綠標是引入的檔案

藍字是vue function


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


修改作法：參數另外寫

            

var data = {
                message:'Hello World!'
            }
            new Vue({
                el:'#app',
                data:data
            });

Real-time即時更新頁面

修改作法：使用V-model

       

<div id="app">
	<h1>{{ message }}</h1>
	<input type="text" v-model="message">
        </div>

Debug方式

只要新增一行程式碼，就可以達到效果。「|」在這邊是filter的意思，也就是篩選

       

<div id="app">
	<h1>{{ message }}</h1>
	<input type="text" v-model="message">
            <div>{{ $data | json }}</div>
        </div>

條件判斷、迴圈

  •  v-show ：這是Vue.js特有的寫法，基本上就是等於v-if，所以屬性值就是所謂的運算條件了。

  •  v-if ：同v-show，唯一差別是v-show只是用css dispaly:none來隱藏，但v-if是真的會移除

  •  v-else ： 這是當v-show或v-if條件不成立時需要選擇的答案


實作題目

如果要打個分數，1~10分你會打幾分？我們假設6分才及格，所以當你打6分以上，畫面會出現Vue.js so easy，如果不到6分，畫面上就會出現still learning Vue.js。


實作步驟

  1. 先讓輸入的數字可以即時顯示

  2. 增加分數判斷並顯示字樣

        

<div id="app">
	<h1 class="error">{{ score }}分</h1>
	<p>你覺得vue.js簡單嗎？請輸入1~10分</p>
	<input type="text" v-model="score">
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{score:''}
            });
        </script>


<div v-show="score">
     <p v-if="score >= 6">Vue.js so easy</p>
     <p v-else>still learning Vue.js</p>
 </div>


補充說明

在Vue 2.1版本加入了另外一個html屬性，也是屬於if else家族的，那就是“v-else-if”，用法其實跟else差不多，所以當你有很多else的時候，除了最後一個可以寫v-else以外，從倒數第二個以上的else都可以寫成v-else-if


v-on:click

當你點擊了立即送出後，透啟動v-on:click屬性，屬性值是clickme，所以就會呼叫下方methods裡面clickme的function內容，然後你就會看到文字視窗內容顯示“here I am！”

<div id="app">
            <input type="submit" value="立即送出" v-on:click="clickme">
</div>
<script>
            new Vue({
                el:'#app',

                methods:{
                    clickme: function(){
                        alert("here I am!");
                    }
                }
            });
</script>


        

<div id="app">
            <p>目前已點擊：{{count}}次</p>
            <input type="submit" value="立即送出" v-on:click="clickme">
        </div>
        <script>
            new Vue({
                el:'#app',
                data:{count:0},
                methods:{
                    clickme: function(){
                        this.count+=1;
                    }
                }
            });
        </script>


點選按鈕傳遞參數，會呼叫相同的function但是傳遞不同的參數

<button v-on:click="handleIt('ah')">you say ah</button>


v-on:submit

        

<div id="app">
            <form action="submit.html" v-on:submit="handleIt">
                <button type="submit">立即送出</button>
            </form>
        </div>
        <script>
            new Vue({
                el:'#app',

                methods:{
                    handleIt: function(){
                        alert("here I am!");
                    }
                }
            });
        </script>


v-on:submit.prevent

假設需要一顆按鈕，但不希望直接submit出去，還是希望他按下按鈕之後會跑出“here I am！”，但是不要送出資訊轉到submit.html要怎麼做？只要寫v-on:submit.prevent

<form action="submit.html" v-on:submit.prevent="handleIt">


※ 除了.prevent之外，還有.stop、.self、.capture等等

v-on簡寫

v-on比較常需要寫到，畢竟是在互動性操作下會啟動function的功能，實作的比例很高，所以在vue.js裡就變成有簡寫的方法了。

簡寫的方法很簡單，就是把“v-on:”改寫成@就可以了

            

<form action="submit.html" @submit="handleIt">
                <button type="submit">立即送出</button>
            </form>

for loop

題目一

如何輸出1~10

<span v-for="n in 10">{{ n }}</span>

※ 如果不是用Vue.js v2，是用v1例如版本1.0.26，那n的變數會從0開始輸出10個數字，得到“0123456789”，所以如果想要從1開始記得用n+1


題目二

九九乘法

<div v-for="i in 9">
              <h3>{{ i }}</h3>
              <div v-for="j in 9">{{ i }} x {{ j }}={{ i*j }}</div>
            </div>


題目三

輸出列表清單

<ul>
  <li v-for="item in items">
     {{ item.message }}
  </li>
</ul>

        <script>
            new Vue({
                el:'#app',
                data:{
                    items: [
                      { message: 'Apple' },
                      { message: 'banana' },
                      { message: 'Coconut' }
                    ]
                }
            });
        </script>


<li v-for="(item, index) in items">
     {{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
            new Vue({
                el:'#app',
                data: {
                  parentMessage: '台北市',
                  items: [
                    { message: '中正區' },
                    { message: '中山區' },
                    { message: '大同區' }
                  ]
                }
            });


v-bind

v-bind是vue.js裡負責改變配色、大小等等所用的屬性，也就是說v-bind就是針對css而存在的屬性，v-bind的副屬性，也就是v-bind:style與v-bind:class


v-bind:style

<div v-bind:style="{ color: myColor, fontSize: myFontSize + 'px' }">123</div>
<div v-bind:style="myStyle">123</div>
new Vue({
                el:'#app',
                data:{
                   myColor: 'red',
                   myFontSize: 30,
	       myStyle: {
                      color: 'blue',
                      fontSize: '30px'
                   }
                }
});


v-bind:class

 

<style>
          .active{
            color:red;
            font-size: 30px;
          }
</style>

<div v-bind:class="{ active: myCheck }">123</div>

new Vue({
                el:'#app',
                data:{
                   myCheck: true
                }
});


如果有多個class的話

.active{
            color:red;
            font-size: 30px;
}
.normal{
            color:green;
            font-size: 30px;
}

<div v-bind:class="{ active: myCheck , normal:myCheck2 }">123</div>

new Vue({
                el:'#app',
                data:{
                   myCheck: false,
                   myCheck2: true
                }
});





→參考連結←
on
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)