Vue安裝與簡單使用

時間  2020-06-21
標籤 vue 安裝 簡單 使用 简体版
原文   原文鏈接

  • Vue入門 使用Typora打開https://pan.baidu.com/s/1Mf3ZFSthdVUQevqWr777eA 提取碼: hg9b

     

    vue中文官網教學 安裝與使用,我也常常看這個 點擊進入 javascript

  • 認識Vue

    • Vue (讀音 /vjuː/，相似於 **view**) 是一套用於構建用戶界面的**漸進式框架**

  • 安裝Node.js

    • 下載地址 https://nodejs.org/en/download/

       

    • 安裝,直接下一步便可
    • 安裝完成查看node版本號

       

    • 安裝完成,node自帶npm,查看npm版本號

       

    • 安裝nrm(鏡像切換工具),輸入命令,等待安裝好就好了

       

    • 查看全部鏡像源, *表明當前所選鏡像源 

       

    • 若是不是taobao 能夠更換taobao 

       

  • IDEA操做

    • IDEA安裝vue插件

       

    • 建立一個空工程

      • File>>>New>>>Project>>>Empty Project>>>Empty Project>>>Next>>>輸入Project Name>>>Finish

    • 建立一個Module

      • File>>>New>>>Module>Static Web>>>Static Web>>>Next>>>輸入Module Name>>>Finish

    • 這時此Module還爲空,打開IDEA最下面Terminal

      • 進行Module初始化,若是Terminal執行不了npm,須要設置一下cmd

         

         

         

        重啓以後,再進入 IDEA 的 Terminal 進入當前的目錄目錄,輸入下面命令
npm init -y

         

      • 安裝 放在node_modules下文件夾爲 vue 
        npm install vue --save

         

      • 這時的工程解構

         

         

  • 谷歌瀏覽器安裝vue插件

    • GitHub搜索IMI-SOURCE-CODE,下載第一個crx的文件

    • 把.crx改.rar,再解壓到一個文件夾,而後開發者模式添加

  • 操做

    • v-model,v-on:click,new Vue,el,data,methods


      <!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--vue對象的html模版-->
<div id="app">
    <!--雙向綁定,v-model對應的值是數據模型-->
    <input type="text"v-model="num">
    <!--v-on:事件名=js表達式-->
    <!--<input type="button" value="點擊增長一位馬仔" v-on:click="num++">-->
    <input type="button" value="點擊增長一位馬仔" v-on:click="incr">
    <!--兩對大括號:js表達式,例如{{1+1}} 就是2-->
    <h1>你們好,我是{{name}},手下有{{num}}位馬仔</h1>
</div>
</body>
<!--引入vue.js-- 不要用"/>" 必須用"></script>"-->
<script src="node_modules/vue/dist/vue.js"></script>

<script>
    //初始化一個vue實例
    const app=new Vue({
       el:"#app",//el即element,選擇器
        data:{//定義數據模型
           name:"陶攀峯",
            num:100
        },
        methods:{//定義方法
           incr(){
               //this表示Vue實例中的數據,能夠this.屬性 this.方法
               this.num++;
           }
        }
    });

</script>
</html>

       

  • 生命週期

    •  

    • created()「視圖渲染前，尚未造成HTML」和mounted()「視圖已經渲染，已造成HTML」

      <!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--vue對象的html模版-->
<div id="app">
    <!--雙向綁定,v-model對應的值是數據模型-->
    <input type="text" v-model="num">
    <!--v-on:事件名=js表達式-->
    <!--<input type="button" value="點擊增長一位馬仔" v-on:click="num++">-->
    <input type="button" value="點擊增長一位馬仔" v-on:click="incr">
    <!--兩對大括號:js表達式,例如{{1+1}} 就是2-->
    <h1>你們好,我是{{name}},手下有{{num}}位馬仔</h1>
</div>
</body>
<!--引入vue.js-- 不要用"/>" 必須用"></script>"-->
<script src="node_modules/vue/dist/vue.js"></script>

<script>
    //初始化一個vue實例
    const app = new Vue({
        el: "#app",//el即element,選擇器
        data: {//定義數據模型
            name: "陶攀峯",
            num: 100
        },
        methods: {//定義方法
            incr() {
                //this表示Vue實例中的數據,能夠this.屬性 this.方法
                this.num++;
            }
        },
        created() {
            //ajax
            //能夠覆蓋data中的數據
            this.num = 1801957499
        },
        mounted() {
            //能夠覆蓋以前的created中數據
            this.num=1801
        }
    });

</script>
</html>

       

  • 數據使用

    • 花括號

      • 格式:{{表達式}}
      • 說明:
        • 該表達式支持JS語法，能夠調用js內置函數（必須有返回值）
        • 表達式必須有返回結果。例如 {{1 + 1}}，沒有結果的表達式不容許使用，如：{{var a = 1 + 1}};
        • 能夠直接獲取Vue實例中定義的數據或函數,使用函數{{方法名()}},使用屬性{{屬性名}}

    • 單項綁定:v-text,v-html

      • 代碼 
        <h1 v-text="vtext"></h1>
<h1 v-html="vhtml"></h1>


        data: {//定義數據模型
            vtext:"<p style='color: red'>這是測試v-text</p>",
            vhtml:"<p style='color: red'>這是測試v-html</p>"
        }
      • 輸出

         

    • 雙向綁定:v-model

      • v-model的可以使用元素有：
        • input
        • select
        • textarea
        • checkbox
        • radio
        • components（Vue中的自定義組件）
      • 對應類型
        • 多個checkbox對應一個model時，model的類型是一個數組，單個checkbox值默認是boolean類型
        • radio對應的值是input的value值
        • text和textarea默認對應的model是字符串
        • select單選對應字符串，多選對應也是數組
      • 測試
        • HTML  
          <div id="app">
    <input type="checkbox" value="ios" v-model="language">ios<br>
    <input type="checkbox" value="java" v-model="language">java<br>
    <input type="checkbox" value="php" v-model="language">php<br>
    您選擇了:{{language}}<br>
    您選擇了:{{language.join(',')}}<br>
</div>

           

        • JavaScript 
          const app = new Vue({
        el: "#app",
        data: {
            language: []
        }
    });

           

        • 輸出

           

    • v-on(頁面元素綁定事件)

      • 語法v-on:事件名="js片斷或函數名"
      • v-on:click 鼠標左鍵點擊
        • 代碼 
          <div id="app">
    <!--事件中直接寫js片斷-->
    <button v-on:click="num++">增長一個</button><br/>
    <!--事件指定一個回調函數，必須是Vue實例中定義的函數-->
    <button v-on:click="decrement">減小一個</button><br/>
    <h1>有{{num}}個女神迷戀峯哥</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            num:100
        },
        methods:{
            decrement(){
                this.num--;
            }
        }
    })
</script>

           

        • 效果
      • v-on:contextMenu 鼠標右鍵點擊
        • 指令後綴
          • .stop ：阻止事件冒泡到父元素
          • .prevent：阻止默認事件發生
          • .capture：使用事件捕獲模式
          • .self：只有元素自身觸發事件才執行。（冒泡或捕獲的都不執行）
          • .once：只執行一次
        • .prevent 演示 
          <div id="app">
    <!--右擊事件，並阻止默認事件發生-->
    <button v-on:contextmenu.prevent="num++">增長一個</button>
    <br/>
    <!--右擊事件，不阻止默認事件發生-->
    <button v-on:contextmenu="decrement($event)">減小一個</button>
    <br/>
    <h1>有{{num}}個女神迷戀峯哥</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            num: 100
        },
        methods: {
            decrement(ev) {
                //用也能夠禁用默認事件,不會顯示右擊菜單 ev.preventDefault();
                this.num--;
            }
        }
    })
</script>

           

        • 效果
      • v-on:keyup 按鍵修飾符
        • enter 回車調用submit方法代碼 
          <input v-on:keyup.enter="submit">
<!-- 縮寫語法 -->
<input @keyup.enter="submit">

           

        • 事件類型,對應鍵盤字母
          • .enter
          • .tab
          • .delete (捕獲「刪除」和「退格」鍵)
          • .esc
          • .space
          • .up
          • .down
          • .left
          • .right
          • .13 等於.enter
          • .65表示a按鍵
          • .66表示b按鍵,以此類推
        • 組合件按鈕
          • 對應按鍵
            • .ctrl
            • .alt
            • .shift
          • 代碼 
            <!-- Alt + C 由於65是a 66是b 67爲c 依次類推 -->
<input @keyup.alt.67="clear">
<!-- Alt + C  -->
<input @keyup.alt.c="clear">

<!-- Ctrl + Click 也就是Ctrl加上鼠標左鍵點擊 -->
<div @click.ctrl="doSomething">Do something</div>

             

    • v-for遍歷數據

      • v-for用法
        • 遍歷數組
          • 基本用法
            • 語法 v-for="元素別名 in 數組名" 角標從0開始
            • 代碼 
              <div id="app">
    <ul>
        <li v-for="user in users">
            {{user.name}} - {{user.gender}} - {{user.age}}
        </li>
    </ul>
</div>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            users:[
                {name:'大牛', gender:'女', age: 11},
                {name:'二蛋', gender:'男', age: 36},
                {name:'三驢', gender:'女', age: 24},
                {name:'四毛', gender:'女', age: 98},
                {name:'五虎', gender:'女', age: 29}
            ]
        },
    });
</script>

               

            • 效果

               

          • 數組角標
            • 語法 v-for="(元素別名,角標別名) in 數組名" 角標從0開始
            • 代碼 
                  <ul>
        <li v-for="(user,aaa) in users">
            {{aaa}}---{{user.name}} - {{user.gender}} - {{user.age}}
        </li>
    </ul>

               

            • 顯示

               

        • 遍歷對象
          • 語法v-for="(value別名,key別名,角標別名) in 對象名"
          • 代碼 
            <div id="app">
    <ul>
        <li v-for="(value1, key1, index1) in daniu">
            {{index1 + 1}}. {{key1}} - {{value1}}
        </li>
    </ul>
</div>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            daniu:
                {name:'大牛', gender:'女', age: 11}
        }
    });
</script>

             

          • 顯示

             

        • key 標註一個key數組索引,惟一,可讓你讀取vue中的屬性，並賦值給key屬性 
          <li v-for="(value1, key1, index1) in daniu" :key=index1></li>

           

    • v-if,v-show (if效率高)

      • 代碼 
        <div id="app">
    <button v-on:click="show=!show">點我呀</button><br>
    <h1 v-if="show">我是v-if</h1>
    <h1 v-show="show">我是v-show</h1>
</div>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            show: true
        }
    });
</script>

         

      • 默認顯示

         

      • 點擊一下

         

      • 點擊兩下

         

    • v-if與v-for並用

      • 代碼 
        <div id="app">
    <ul>
        <li v-for="user in users" v-if="user.gender=='女'&&user.age>25">
            {{user.name}} - {{user.gender}} - {{user.age}}
        </li>
    </ul>
</div>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            users:[
                {name:'大牛', gender:'女', age: 11},
                {name:'二蛋', gender:'男', age: 36},
                {name:'三驢', gender:'女', age: 24},
                {name:'四毛', gender:'女', age: 98},
                {name:'五虎', gender:'女', age: 29}
            ]
        },
    });
</script>

         

      • 顯示

         

    • v-if與v-else-if與v-else結合

      • 注意:中間不要間隔任何東西,例如br標籤,p標籤,span標籤
      • 代碼 
        <div id="app">
    <button v-on:click="random=Math.random()">點我呀</button><span>{{random}}</span>
    <h1 v-if="random >= 0.75">看到我啦？！if</h1>
    <h1 v-else-if="random > 0.5">看到我啦？！if 0.5</h1>
    <h1 v-else-if="random > 0.25">看到我啦？！if 0.25</h1>
    <h1 v-else>看到我啦？！else</h1>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            random: 1
        }
    });
</script>

         

      • 顯示

    • v-bind 綁定

      • 簡寫 v-bind:class能夠簡寫爲:class
      • 代碼 
        <!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>a.html</title>
</head>
<style>
    .diyclassred{
        color: red;
    }
    .diyclassblue{
        color: blue;
    }
</style>
<body>
<div id="app">
    <!--雙向綁定,文本num中值變,num的值也改變-->
    <input type="text" v-model="num">
    <!--按鈕顯示字體綁定的value爲context屬性-->
    <!--綁定class名稱爲diyclassblue,當num大於100的時候才啓用diyclassblue-->
    <input type="button" v-bind:value="context"  v-bind:class="{diyclassblue:num>100}"><br>
    <!--綁定自定義樣式diystyle-->
    <input type="button" value="我是v-style" v-bind:style="diystyle"><br>
    <ul>
        <!--若是用戶性別爲女而且年齡大於25使用class樣式diyclassred-->
        <li v-for="user in users" v-bind:class="{diyclassred:user.gender=='女'&&user.age>25}">
            {{user.name}} - {{user.gender}} - {{user.age}}
        </li>
    </ul>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            num:1,
            context:"大於100字體變藍色",
            diystyle:"background-color:red;color:blue;",
            users:[
                {name:'大牛', gender:'女', age: 11},
                {name:'二蛋', gender:'男', age: 36},
                {name:'三驢', gender:'女', age: 24},
                {name:'四毛', gender:'女', age: 98},
                {name:'五虎', gender:'女', age: 29}
            ]
        },
    });
</script>
</html>

         

      • 顯示 

         

      • 若是文本框1改成大於100值 

    • computed 計算屬性

      • 說明 
        計算屬性,裏面也是定義方法,可是必需要有返回值,能夠像數據模型去使用
與方法不一樣,不管birthday是否變化,方法都會從新執行一次
計算屬性會對以前的結果進行緩存,若是birthday變化,纔會從新執行計算屬性

computed:{
            //錯誤使用{{birth()}}
            //正確用{{birth}}
            birth(){
                const date = new Date(this.birthday);
                return date.getFullYear() + "-" + date.getMonth() + "-" + date.getDay();
            }
        }

         

      • 代碼 
        <div id="app">
    <h1>您的生日是：{{birth}} </h1>
</div>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            birthday:1429032123201 // 毫秒值
        },
        //計算屬性,裏面也是定義方法,可是必需要有返回值,能夠像數據模型去使用
        //與方法不一樣,不管birthday是否變化,方法都會從新執行一次
        //計算屬性會對以前的結果進行緩存,若是birthday變化,纔會從新執行計算屬性
        computed:{
            //錯誤使用{{birth()}}
            //正確用{{birth}}
            birth(){
                const date = new Date(this.birthday);
                return date.getFullYear() + "-" + date.getMonth() + "-" + date.getDay();
            }
        }
    });
</script>

         

      • 輸出

         

    • watch

      • watch可讓咱們監控一個值的變化。從而作出相應的反應。
      • 代碼 
        <div id="app">
    <input type="text" v-model="message">
</div>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:""
        },
        watch:{
            message(new_message,old_message){
                console.log(new_message,old_message);
            }
        }
    });
</script>

         

      • 依次輸入123456789 顯示

         

  • 組件化

    • template中只能有一個根標籤

      //能夠
template: "\
                <div>\
                    <button @click='part_incr'>加</button>  \
                    <button @click='part_decr'>減</button>  \
                </div>"


//不能夠
template: "\
                <div>\
                    <button @click='part_incr'>加</button>  \
                    <button @click='part_decr'>減</button>  \
                </div><span></span>"

       

    • 全局組件,組件複用,可在其餘vue模塊內使用,new Vue可寫上面或下面

      • 代碼 
        <div id="app">
    <!--每一個標籤不會互相影響效果-->
    <counter></counter><br>
    <counter></counter><br>
    <counter></counter>
</div>

    const app = new Vue({
        el:"#app",
        data:{
            num: 0
        }
    });

    Vue.component("counter",{
        //定義全局組件,兩個參數: 1,組件名稱 2,組件參數
        template:"<button @click='num++'>已點擊{{num}}次</button>",
        data(){
            return{
                num:0
            }
        }
    });

         

      • 顯示

         

    • 局部組件,只能在本身vue中使用,引入以後纔可以使用,new Vue寫下面

      • components就是當前vue對象子組件集合,在這裏counter就爲key,用雙引號"",counter1就是value,組件對象名
      • 代碼 
        <div id="app">
    <counter></counter>
</div>

    const counter1 = {
        template: "<button @click='num++'>已點擊{{num}}次</button>",
        data() {
            return {
                num: 0
            }
        }
    };

    //new Vue須要寫在定義的組件下面
    new Vue({
        el: "#app",
        components: {
            //counter爲標籤名,counter1位自定義的組件
            "counter": counter1
        }
    });

         

      • 默認顯示

         

      • 點擊兩次按鈕 

  • 組件通訊

    • props父向子傳遞,父自定義屬性

      • 代碼 
        <div id="app">
    <!--自定義屬性num1,雙向綁定num-->
    <counter :num1="num"></counter>
</div>

<script>

    Vue.component("counter",{
       //兩個num1是props接收的屬性
       template:"<button @click='num1++'>已點擊{{num1}}次</button>",
       //經過props接收父組件傳遞的屬性
       props:["num1"]
    });

    new Vue({
        el: "#app",
        data:{
            num:0
        }
    });

</script>

         

      • 默認顯示

         

      • 點擊兩次後顯示

         

    • props驗證

      • 當 prop 驗證失敗的時候，(開發環境構建版本的) Vue 將會產生一個控制檯的警告
      • 代碼 
        <div id="app">
    <!--自定義屬性num1,雙向綁定num-->
    <counter :num1="num"></counter>
</div>

<script>

    Vue.component("counter",{
       //兩個num1是props接收的屬性
       template:"<button @click='num1++'>已點擊{{num1}}次</button>",
       //經過props接收父組件傳遞的屬性
       props:{
           num1:{
               //類型:String,Number,Boolean,Array,Object,Date,Function,Symbol
               type: Number,
               default: 0,//默認值
               required: true//是否必須
           }
       }
    });

    new Vue({
        el: "#app",
        data:{
            //若是這裏定義num:"0" 會console.log打印錯誤,不會影響使用
            //若是定義num:"abc" 會影響使用,點擊第一次會顯示NaN次
            num:0
        }
    });
</script>

         

    • 子向父的通訊:$emit,父自定義事件

      • 代碼 
        <div id="app">
    <h2>num: {{num}}</h2>
    <diy_tag :diy_props="num" @diy_incr="global_incr" @diy_decr="global_decr"></diy_tag>
</div>

<script>
    Vue.component("diy_tag", {
        template: "\
                <div>\
                    <button @click='part_incr'>加</button>  \
                    <button @click='part_decr'>減</button>  \
                </div>",
        props: ["diy_props"],
        methods: {
            part_incr() {
                this.$emit("diy_incr");
            },
            part_decr() {
                this.$emit("diy_decr");
            }
        }
    });

    var app = new Vue({
        el: "#app",
        data: {
            num: 0
        },
        methods: { // 父組件中定義操做num的方法
            global_incr() {
                this.num++;
            },
            global_decr() {
                this.num--;
            }
        }
    });
</script>

         

      • 顯示

  • 路由vue-router

    • 安裝vue-router

      //進入IDEA下面Terminal

//進入項目
cd hello-vue

//安裝vue-router
npm install vue-router --save

       

    • 模塊結構

       

    • 代碼

      • index.html  
        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>src/index.html</title>
</head>
<body>

<div id="app">
    <span>登陸</span>
    <span>註冊</span>
    <hr>
    <!--使用login-form來匹配loginForm-->
    <!--直接使用<loginForm></loginForm>會解析成<loginform></loginform>,會致使匹配不到-->
    <login-form></login-form>
    <register-form></register-form>
</div>
</body>
<script src="../node_modules/vue/dist/vue.js"></script></script>
<script src="js/login.js"></script>
<script src="js/register.js"></script>

<script>
    const app=new Vue({
       el:"#app",
       components:{
           //loginForm:loginForm, 縮寫 loginForm,
           loginForm,
           registerForm
       }
    });
</script>
</html>

         

      • login.js  
        const loginForm = {
    //組件內template只能有一個根標籤
    //&emsp;表明一個漢字
    template: `
    <div>
    <h1>登陸頁</h1>
    用戶名:<input type="text"><br>
    密&emsp;碼:<input type="password"><br>
    <input type="button" value="登陸">
    </div>
    `
}

         

      • register.js  
        const registerForm = {
    //組件內template只能有一個根標籤
    //&emsp;表明一個漢字
    //&ensp;表明半個漢字
    template: `
    <div>
    <h1>註冊頁</h1>
    用&ensp;戶&ensp;名:<input type="text"><br>
    密&emsp;&emsp;碼:<input type="password"><br>
    確認密碼:<input type="password"><br>
    <input type="button" value="註冊">
    </div>
    `
}

         

    • 顯示

       

    • 使用vue-router,改寫後index.html

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>src/index.html</title>
</head>
<body>

<div id="app">
    <!--<span>登陸</span>
    <span>註冊</span>
    <hr>
    &lt;!&ndash;使用login-form來匹配loginForm&ndash;&gt;
    &lt;!&ndash;直接使用<loginForm></loginForm>會解析成<loginform></loginform>,會致使匹配不到&ndash;&gt;
    <login-form></login-form>
    <register-form></register-form>-->
    <span><router-link to="/login">登陸</router-link></span>
    <span><router-link to="/register">註冊</router-link></span>
    <hr>
    <router-view></router-view>
</div>
</body>
<!--先引入vue.js再引入vue-router.js-->
<!--引入vue.js-->
<script src="../node_modules/vue/dist/vue.js"></script>
<!--引入vue-router.js-->
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
<script src="js/login.js"></script>
<script src="js/register.js"></script>

<script>
    //須要在Vue中引入纔可以使用
    const router=new VueRouter({
        routes:[
            {
                //路由路徑,必須以/開頭
                path:"/login",
                //組件名稱
                component:loginForm
            },
            {
                //路由路徑,必須以/開頭
                path:"/register",
                //組件名稱
                component:registerForm
            }
        ]
    });

    const app=new Vue({
       el:"#app",
       /*//使用路由vue-router後,不需再引入components
       components:{
           //loginForm:loginForm, 縮寫 loginForm,
           loginForm,
           registerForm
       },*/
        router//引用上面定義的router對象
    });

</script>
</html>

       

    • 改寫index.html後顯示

  • 路徑引入

     

  • 000

  • 000

  • 000

  • 000

  • 000

  • 000

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