Vue學習筆記

入門
1. data:用于定義屬性
2. methods用于定義的函數
3. {{}}用于輸出對象的屬性和函數的傳回值
4. 當vue執行個體被建立時,它向vue的響應式系統中加入其data對象中能找到的是以屬性當這些屬性值發生改變時,html視圖也會發生相應的變化

模闆文法

文本:{{}}

<!DOCTYPE html>
  <html>
      <head>
          <meta charset="utf-8" />
          <title>vue測試</title>
      </head>
      <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
      <body>
          <div id="app">
              <p>{{message}}</p>
              <p> {{test()}} </p>
          </div>

          <div id="vue_app">

              <p> {{message2}} </p>
          </div>
      </body>
      <script>
          new Vue({
              el: "#app",
              data: {
                  message: "Hello World",
              },
              methods: {
                  test: function() {
                      return this.message;
                  }
              }
          });
          var data = {
              message2: "Hello Vue"
          };
          var vue = new Vue({
              el: "#vue_app",
              data: data
          });
          document.write(data.message2 == vue.message2); //true
        document.write("<br>")
        document.write(vue.$data == data); //true
          data.message2 = "HELLO VUE";
      </script>
  </html>

Html: v-html
屬性: v-bind:url,v-html:target,v-bind:class,v-bind:id
js表達式
if語句
過濾器

<!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title> vue</title>
         <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
     </head>
     <style>
         .class1{
             background-color: aqua;
             font-size: larger;
         }
 </style>
     <body>
         <div id="app">
             <!-- v-html使用 -->
             <p v-html="message"></p>
             <!-- v-model與v-bind使用 -->
             <span>點選切換顔色</span>
             <input type="checkbox" v-model="test" />
             <p v-bind:class="{class1:test}">Test</p>
             <!-- vue對于js表達式的支援 -->
             <p>{{10+10}}</p>
             <p>{{flag==true?"Yes":"No"}}</p>
             <p>{{name.split('').reverse().join('')}}</p>
             <!-- v- 标簽使用 -->
             <button v-on:click="a">點選切換</button>
             <p v-if="seen">you can see me</p>
             <a v-bind:href="url" v-bind:target="target">百度一下</a>
             <br />
             <!-- 雙向資料綁定 -->
             <input type="text" v-model="message1" />
             <p v-html="message1"></p>
             <h2>字元串反轉</h2>
             <input type="text" v-model="message2" />
             <button v-on:click="reverse">點選反轉</button>
             <br />
             <!-- 過濾器 -->
             <span>原始資料:</span><input type="text" v-model="message3" />
             <span>過濾後的資料:</span>
             <span> {{message3 | format("2131")}} </span>
         </div>
     </body>
     <script>
         var vue = new Vue({
             el: "#app",
             data: {
                 message: "Hello World",
                 test: false,
                 flag: true,
                 name: "Jamin",
                 seen: false,
                 url: "http://www.baidu.com",
                 target: "_blank",
                 message1: "測試",
                 message2: "123",
                 message3: ""
             },
             methods: {
                 a: function() {
                     if (this.seen == true) {
                         this.seen = false;
                     } else {
                         this.seen = true;
                     }
                 },
                 reverse: function() {
                     this.message2 = this.message2.split('').reverse().join('');
                 }
             },
             filters: {
                 format: function(value, a) {
                     return value.charAt(0).toUpperCase() + value.slice(1) + a;
                 }
             }
         })
     </script>

     </html>

條件語句與循環語句

<!DOCTYPE html>
 <!-- 循環判斷 -->
 <html>
     <head>
         <meta charset="utf-8">
         <title>條件與循環語句</title>
         <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
     </head>
     <body>
         <div id="app">
             <h1 v-if="ok">Hello Vue</h1>
             <span>輸入你的成績</span>
             <input type="text" v-model="grade">
             <span>你的等級為:</span>
             <p v-if="grade>=90">優秀</p>
             <p v-else-if="grade>=60">及格</p>
             <p v-else>不及格</p>
             <p v-show="show">123</p>
             <ul>
                 <li v-for="(value,key,index) in object">{{index}}:{{key}}:{{value}}</li>
             </ul>
             <ol>
                 <li v-for="n in 10">{{n}}</li>
             </ol>

             <ul>
                 <li v-for="people in   sites ">{{people.name}}</li>
         </ul>
         <div v-for="m in 9">
        <b v-for="n in m">
            {{m}}*{{n}}={{m*n}}
        </b>
    </div>
     </div>
 </body>
 <script>
     new Vue({
         el: "#app",
         data: {
             ok: true,
             grade: "",
             show: 213,
             object: {
                 name: "張三",
                 age: 12,
                 sex: "男"
             },
             sites: [{
                 name: "張三",
                 age: 12
             }, {
                 name: "李四",
                 age: 16
             }, {
                 name: "王五",
                 age: 18
             }]
         }
     });
 </script>
</html>

1. v-show與v-if差別
        1. v-show在dom樹中顯示等同與display:none v-if直接不顯示
        2. v-show消耗更高的初始渲染 v-if更多小号切換渲染
        3. v-show中定義的值為0、null、undefined、false 時為假其餘為真

計算屬性computed

<!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title>computed</title>
         <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
     </head>
     <body>
         <div id="app">
             <p>"源message"{{message}}</p>
             <p>"計算首次調用"{{reversedMessage}}</p>
             <p>"方法首次調用"{{resver()}}</p>
             <p>"計算二次調用"{{reversedMessage}}</p>
             <p>"方法二次調用"{{resver()}}</p>
         </div>
         <script>
             var i = 1;
             new Vue({
                 el: "#app",
                 data: {
                     message: "Vue"
                 },
                 computed: {
                     reversedMessage: function() {
                         i += 1;
                         return this.message.split("").reverse().join("") + i;
                     }
                 },
                 methods: {
                     resver: function() {
                         i += 1;
                         return this.message.split("").reverse().join("") + i;
                     }
                 }
             })
         </script>
     </body>
 </html>

1.computed 與method的差別

computed依賴緩存

監聽屬性

<!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title>監聽屬性</title>
         <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
     </head>
     <body>
         <div id="app">
             <p> {{counter}} </p>
             <button @click="counter++">點選增加</button>
             <br />
             <span>千米:</span><input v-model="kilometers" type="text" />
             <span>米:</span><input v-model="meters" type="text" />
             <p id="info"></p>
         </div>
         <script>
             vue = new Vue({
                 el: "#app",
                 data: {
                     counter: 1,
                     kilometers: 0,
                     meters: 0
                 },
                 watch: {

                     kilometers: function(value) {
                         this.kilometers = value;
                         this.meters = this.kilometers * 1000;

                     },
                     meters: function(value) {
                         this.kilometers = value / 1000;
                         this.meters = value;
                     }
                 }
             });
             vue.$watch("counter", function(nval, oval) {
                 alert("以前的值" + oval + "現在變成了" + nval);
             });
             vue.$watch("kilometers", function(newValue, oldValue) {
                 document.getElementById("info").innerHTML = "以前的值" + oldValue + "現在變成了" + newValue;
             });
         </script>
     </body>
 </html>

Vue表單

<!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title>Form表單</title>
         <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
     </head>
     <body>
         <div id="app">
             <h3>雙向輸出</h3>
             <input type="text" v-model="message" />
             <p> 輸入的内容為:{{message}}</p>
             <br />
             <h3>單個複選框</h3>
             <input type="checkbox" id="test" v-model="checked" value="測試" /><label for="test">測試</label>
             <p>選擇為{{checked}}</p>
             <h3>多個複選框</h3>
             <span>請選擇:</span>
             <input type="checkbox" id="test1" v-model="check" value="測試1" /><label for="test1">測試1</label>
             <input type="checkbox" id="test2" v-model="check" value="測試2" /> <label for="test2">測試2</label>
             <input type="checkbox" id="test3" v-model="check" value="測試3" /><label for="test3">測試3</label>
             <p>選擇為{{check}}</p>
             <h3>單選框</h3>
             <input type="radio" v-model="test4" value="測試4" id="test4" /><label for="test4">測試4</label>
             <input type="radio" v-model="test4" value="測試5" id="test5" /><label for="test5">測試5</label>
             <p>選擇為{{test4}}</p>
             <h3>下拉框</h3>
             <select v-model="select">
                 <option value="測試1">1</option>
                 <option value="測試2">2</option>
             </select>
             <p>你的選擇為{{select}}</p>
             <h3>全選 1</h3>
             <input type="checkbox" v-model="allChecked" id="allChecked" @change="checkedAll" /><label for="allChecked">全選</label>
             <span>{{allChecked}}</span>
             <br />
             <input type="checkbox" value="Test6" v-model="checkName" id="test6" /><label for="test6">Test6</label>
             <input type="checkbox" value="Test7" v-model="checkName" id="test7" /><label for="test7">Test7</label>
             <input type="checkbox" value="Test8" v-model="checkName" id="test8" /><label for="test8">Test8</label>
             <p>{{checkName}}</p>
             <h3>全選2</h3>
             <input type="checkbox" id="checkbox" v-model="checkAll" @change="allchecked" /><label for="checkbox">全選</label>
             <label v-for="list in checkList"><input type="checkbox" v-model="checkListOn" v-bind:value="list.name" />{{list.name}}</label>
             <p>{{checkListOn}}</p>
         </div>
     </body>
     <script>
         var vue = new Vue({
             el: "#app",
             data: {
                 message: "測試",
                 check: [],
                 checked: false,
                 test4: "",
                 select: "",
                 checkName: [],
                 checkArray: ["Test6", "Test7", "Test8"],
                 allChecked: false,
                 checkList: [{
                     name: "測試1"
                 }, {
                     name: "測試2"
                 }, {
                     name: "測試3"
                 }],
                 checkListOn: [],
                 checkAll: false
             },
             methods: {
                 checkedAll: function() {
                     if (this.allChecked) {
                         this.checkName = this.checkArray;
                     } else {
                         this.checkName = [];
                     }
                 },
                 allchecked: function() {
                     if (this.checkAll) {
                         var checkArray = [];
                         for (var i = 0; i < this.checkList.length; i++) {
                             checkArray.push(this.checkList[i].name);
                         }
                         this.checkListOn = checkArray;
                     } else {
                         this.checkListOn = [];
                     }
                 }
             },
             watch: {
                 "checkName": function() {
                     if (this.checkName.length == 3) {
                         this.allChecked = true;
                     } else {
                         this.allChecked = false;
                     }
                 },
                 "checkListOn": function() {
                     if (this.checkListOn.length == this.checkList.length) {
                         this.checkAll = true;
                     } else {
                         this.checkAll = false;
                     }
                 }
             }
         })
     </script>
 </html>

修飾符

.lazy: 預設情況下v-model是雙向同步的,但你可以添加.lazy轉變為在change事件中同步
.number:自動将使用者的輸入值轉為number類型,如果原值的轉換結果為NaN則傳回原值
.trim:自動過濾首尾空格

元件:封裝可重用的代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue元件</title>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <test></test>
            <test2></test2>
            <child message="Hello Vue"></child>
            <!-- 動态綁定 -->
            <child v-bind:message="message1"></child>
            <check1></check1>
            <br />
            <p>{{total}}</p>
            <test3 v-on:increment="incrementTotal"></test3>
            <br />
            <test3 v-on:increment="incrementTotal"></test3>
        </div>
    </body>`
    <script>
        // 全局元件
        Vue.component("test", {
            template: "<h1>測試</h1>"
        });
        //局部元件
        var Child = {
            template: "<h3>測試2</h3>"
        };
        Vue.component("child", {
            //父元件用來傳遞資料的屬性
            props: ["message"],
            template: "<h5>{{message}}</h5>"
        });
        Vue.component("test3", {
            template: '<div><button v-on:click="incrementHandler(1)">-</button>{{count}}<button v-on:click="incrementHandler(2)">+</button></div>',
            data: function() {
                return {
                    count: 0
                }
            },
            methods: {
                incrementHandler: function(value) {
                    if (value == 1) {
                        this.count -= 1;
                        this.$emit('increment', value);
                    } else {
                        this.count += 1;
                        this.$emit('increment', value);
                    }
                }
            }
        })
        //props驗證(版本要是開發者版本)
        Vue.component("check1", {
            props: {
                age: {
                    //資料類型
                    type: [Number, Boolean],
                    //必填項
                    required: true,
                    //初始值
                    default: 100,

                }
            },
            template: "<h6>測試props驗證{{age}}</h6>"
        })
        new Vue({
            el: "#app",
            components: {
                "test2": Child
            },
            data: {
                message1: "Hello",
                total: 0
            },
            methods: {
                incrementTotal: function(value) {
                    if (value == 1) {
                        this.total--;
                    } else {
                        this.total++;
                    }
                }
            }
        });
        /* prop是單項綁定的,當父元件的值發生變化時會傳遞到子元件但不會反過來 */
    </script>
</html>

自定義指令
1. 鈎子
  1. 鈎子函數
    - bind:第一次綁定到元素時調用
    - insterted:被綁定的元素插入到父節點時調用
    - update:被綁定元素所在的模闆更新時調用
    - comppantUpdated:被綁定元素所在模闆完成一次更新周期時調用
    - unbind:隻調用一次,指令與元素解綁時調用
  2. 鈎子參數
    - el:指定所綁定的元素,可以直接用來操作DOM
    - binding:一個對象
      - name:指令名,不包括v-字首
      - oldValue:指令綁定的前一個值,僅在update和compantUpdated鈎子中可用
      - expreession: 綁定值的表達式或變量名
      - arg:轉給指令的參數
      - modifiers:一個包含修飾符的對象
    - vnode:Vue編譯出的虛拟節點
    - oldVnode:上一個虛拟節點,僅在update和compantUpdated鈎子中可用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>自定義指令</title>
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-focus />
            <p v-test="{color:'red',text:'測試'}"></p>
        </div>

    </body>
    <script>
        //聚焦
        Vue.directive("focus", {
            inserted: function(el) {
                el.focus();
            }
        });

        new Vue({
            el: "#app",
            directives: {
                test: {
                    inserted: function(el, binding) {
                        el.innerHTML = binding.value.text;
                        el.style.backgroundColor = binding.value.color;
                    }
                }
            }

        })
    </script>
</html>

Vue路由

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
        <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
        <title>路由</title>
        <style>
            ._active {
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <p>
                <!-- to屬性 -->
                <!-- 字元串 -->
                <router-link to="foo">Go to Foo1</router-link>
            </p>
            <p>
                <!--  使用v-bind的JS表達式 -->
                <router-link v-bind:to="'foo'">Go to Foo2</router-link>
            </p>
            <p>
                <!--不寫bind -->
                <router-link :to="'foo'">Go to foo3</router-link>
            </p>
            <p>
                <!--  使用path -->
                <router-link :to="{path:'foo'}">path</router-link>
            </p>
            <p>
                <!-- 命名路由 -->
                <router-link :to="{name:'user',params:{userId:123},path:'foo'}">命名路由</router-link>
            </p>
            <p>
                <!-- 帶參數查詢 "/foo?test=test1"-->
                <router-link :to="{path:'foo',query:{test:'test1'}}">帶參數查詢</router-link>
            </p>
            <p>
                <!--  replace-->
                <router-link :to="{path:'foo'}" replace>replace</router-link>
            </p>
            <p>
                <!-- 在目前路徑下追加foo 而不是跳轉到foo -->
                <router-link :to="'foo'" append>append</router-link>
            </p>
            <p>
                <router-link to="foo" tag="li">li标簽</router-link>
            </p>
            <p>
                <!-- 激活後的樣式 -->
                <router-link to="foo" active-class="_active">active-class</router-link>
            </p>
            <p>
                <!--  當連結被精準比對時-->
                <router-link to="foo" exact-active-class="_active">當連結被精準比對時</router-link>
            </p>
            <!-- active-class與exact-active-class的差別 router-link預設為模糊比對,
            當設定<router-link to="foo/1" exact-active-class> 與<router-link to="foo/1" active-class>
            當使用者 點選foo時會觸發active-class而不會觸發exact-active-class
            -->
            <p>
                <!-- event事件 -->
                <router-link to="foo" event="mouseover">事件-當滑鼠移動到這裡時</router-link>
            </p>
            <p>
                <router-link to="/bar">Go to Bar</router-link>
            </p>
            <router-view></router-view>
        </div>
    </body>
    <script>
        //  定義路由元件
        const Foo = {
            template: '<div>foo</div>'
        }
        const Bar = {
            template: '<div>bar</div>'
        };
        //定義路由
        const routes = [{
                path: '/foo',
                component: Foo
            },
            {
                path: '/bar',
                component: Bar
            }
        ]
        //建立路由執行個體,然後傳路由的配置
        const router = new VueRouter({
            routes
        });
        //建立和挂載根執行個體
        const app = new Vue({
            router
        }).$mount("#app");
    </script>
</html>

vue過渡動畫
1. 過渡
  1. enter:定義進入過渡時的開始狀态,在元素插入之前生效,在元素被插入之後的下一幀移除
  2. v-enter-active:定義進入過渡生效時的狀态,在元素插入之前生效,在過渡動畫完成之後移除
  3. v-enter-to:定義進入過渡的結束狀态,在元素被插入之後,在元素被插入之後下一幀生效,在過渡/動畫完成之後移除
  4. v-leave-active:定義離開過渡生效時的狀态,在離開過渡時立即觸發,在過渡完成之後移除
  5. v-leave-to:在離開過渡之後的下一幀生效,在過渡完成之後移除
    
    Vue學習筆記
2. 自定義類名
  1. enter-class
  2. enter-active-class
  3. enter-to-class
  4. leave-class
  5. leave-active-class
  6. leave-to-class
3. 顯性過渡持續時間 <transition :duration="1000">...</transition> <transition :duration="{enter:500,leave:800}" </transition>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css" />
        <title>動畫執行個體</title>
        <style>
            .fade-enter-active,.fade-leave-active{
            transition: opacity 2s
        }
        .fade-enter,.fade-leave-to{
            opacity: 0
        }
        .test-enter-active{
            animation:test-in .5s;
            }
        .test-leave-active{
                animation: test-in .5s reverse;
            }
            @keyframes test-in{
                0%{
                    transform: scale(0);
                }
                50%{
                    transform: scale(1.5);
                }
                100%{
                    transform: scale(1);
                }
            }
        </style>
    </head>
    <body>
        <div id="app">
            <input type="button" v-on:click="show=!show" value="點選" />
            <transition name=" fade">
                <p v-show="show" v-bind:style="styleobj">{{message}}</p>
            </transition>
            <transition name="test">
                <p v-show="show">菜鳥教程 -- 學的不僅是技術，更是夢想！！！</p>
            </transition>
            <transition name="test1" enter-active-class="animated tada" leave-active-class="animated bounceOutRight">
                <p v-show="show">測試1-測試2-測試3</p>
            </transition>
        </div>
    </body>
    <script>
        new Vue({
            el: "#app",
            data: {
                message: "動畫執行個體",
                show: true,
                styleobj: {
                    color: 'red',
                    fontsize: '30px'
                }
            }
        })
    </script>
</html>

Vue混入
ajax

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue 測試執行個體 - 菜鳥教程(runoob.com)</title>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
        <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    </head>
    <body>
        <div id="app">info
            <div id=""></div>
            {{ info }}
        </div>
        <script type="text/javascript">
            var vue = new Vue({
                el: '#app',
                data: {
                    info: null
                }
            });
            var url = "http://how2j.cn/study/json.txt";
            axios.get(url).then(function(response) {
                var jsonObject = response.data;
                var jsonString = JSON.stringify(jsonObject);
                document.getElementById(info).innerHTML = " 資料:" + jsonString;
            })
        </script>
    </body>
</html>

vue-cli
1. 安裝
  1. 安裝node.jshttps://nodejs.org/zh-cn/
  2. 檢測是否安裝成功 node --version
  3. 安裝vue的腳手架 npm install @vue/cli -g
  4. 建立vue項目 vue create 項目名
  5. 安裝路由子產品 npm install vue-router
  6. 安裝axios npm install axios
  7. 啟動 npm run serve
2. 目錄結構
  - node-modules:子產品包
  - public:存放html與title圖示
  - src:使用者自定義檔案,assets靜态檔案,components自定義元件,App.vue主子產品,main.js節點挂載和建立路由的執行個體

作者： JaminYe

出處：https://www.cnblogs.com/JaminYe/p/11381161.html/

Vue學習筆記

繼續閱讀

nagios服務端搭建

沒救了! 困擾程式員一輩子的5個魔咒, 改掉比登天還難！

[轉]如何成長為一名全棧工程師全棧工程師

underscore模闆功能的使用和學習

vue3 transitionvue3 transition元件和vue2 transition元件

CSS之折疊菜單

Apache 虛拟主機搭建過程

web開發之前後端渲染

vue學習筆記day12 vue的生命周期

JavaScript的那些坑之事件代理事件代理事件階段

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題

判斷浏覽器類型與版本以及ios安卓判别

手把手教你配置：Jenkins+Github+Webhook +Nginx自動化打包部署Vue項目