Vue安裝與簡單使用

本文轉載自查看原文 2019-06-28 22:52 1008 ---Vue

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

vue中文官網教學安裝與使用,我也經常看這個點擊進入
認識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>

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

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 VSCode和VUE的初始安裝及簡單使用入門 Vue3（一） CND方式的安裝以及簡單使用 vue關於mock的簡單使用 Vue（1）Vue安裝與使用 Minikube 安裝和簡單使用 MariaDB安裝及簡單使用 APISIX的安裝和簡單使用 nltk的安裝和簡單使用 Navicat安裝及簡單使用 kvm安裝及簡單使用

Vue安裝與簡單使用

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

認識Vue

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

安裝Node.js

IDEA操作

IDEA安裝vue插件

創建一個空工程

創建一個Module

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

谷歌瀏覽器安裝vue插件

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

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

操作