Vue學習（4）

時間 2020-08-09

標籤 vue 學習简体版

原文原文鏈接

昨天內容回顧

1.{{}}模板語法、插值、簡單運算
2.指令系統
v-if 真正銷燬重建
v-show 更改css的display，用於重複切換出現css

v-bind 綁定屬性：
v-on 綁定事件 @
v-for 遍歷，優先級相對高
v-html 解析html標籤
v-model 只適用於在表單控件雙向數據綁定的一個體現html

雙向數據綁定=單向數據綁定+UI監聽vue

網站設計一共有23中模式
最常使用使用的三種：
MVC MVVM MTVnode

MVVM
Model View ViewModelwebpack

流程控制web

3.computed計算屬性
默認值有gettervue-cli

網頁音樂播放

1.用事件控制的寫法

<!DOCTYPE html>
<html>
<head>

    <title></title>
    <style>
        *{
            padding: 0;
            /* margin: 0; */
        }
        ul{
            list-style:none;
        }
        li{
            border-bottom: 1px solid gray;
        }
    </style>

</head>
<body>
    <div id="music">
        <audio :src='song' autoplay="" controls="" @ended="next" ></audio>
        <ul>
            <li v-for='(item,index) in songs' @click='huange(index)'>
                <h3>歌名：{{item.name}}</h3>
                <p>歌手：{{item.author}}</p>
            </li>
        </ul>
    </div>
    
    <script src="vue.js"></script>
    <script>
        var songs = [
            {id:1,src:"./audio/1.mp3",name:"111",author:"111111"},
            {id:2,src:"./audio/2.mp3",name:"112",author:"211111"},
            {id:3,src:"./audio/3.mp3",name:"113",author:"311111"},
            {id:4,src:"./audio/4.mp3",name:"114",author:"411111"}
        ];
        var music=new Vue({
            el:'#music',
            data:{
                song:"./audio/1.mp3",
                songindex:0,
                songs:songs,
            },
            methods:{
                huange(index){
                    this.song=this.songs[index].src;
                },
                next(){
                    this.songindex++;
                    this.song=this.songs[this.songindex].src;
                },
            },
            computed:{

            },
            create(){
                //頁面初始化
            }
        })

    </script>
    
</body>
</html>

View Code

2.用計算屬性的寫法（方便推薦）

<!DOCTYPE html>
<html>
<head>

    <title></title>
    <style>
        *{
            padding: 0;
            /* margin: 0; */
        }
        ul{
            list-style:none;
        }
        li{
            border-bottom: 1px solid gray;
        }
    </style>

</head>
<body>
    <div id="music">
        <audio :src='currSong' autoplay="" controls="" @ended="next" ></audio>
        <ul>
            <li v-for='(item,index) in songs' @click='huange(index)'>
                <h3>歌名：{{item.name}}</h3>
                <p>歌手：{{item.author}}</p>
            </li>
        </ul>
    </div>
    
    <script src="vue.js"></script>
    <script>
        var songs = [
            {id:1,src:"./audio/1.mp3",name:"111",author:"111111"},
            {id:2,src:"./audio/2.mp3",name:"112",author:"211111"},
            {id:3,src:"./audio/3.mp3",name:"113",author:"311111"},
            {id:4,src:"./audio/4.mp3",name:"114",author:"411111"}
        ];
        var music=new Vue({
            el:'#music',
            data:{
                
                songindex:0,
                songs:songs,
            },
            methods:{
                huange(index){
                    this.songindex=index;
                },
                next(){
                    this.songindex++;
                    //this.song=this.songs[this.songindex].src;
                },
            },
            computed:{
                currSong(){
                    return this.songs[this.songindex].src;
                }

            },
            create(){
                //頁面初始化
            }
        })

    </script>
    
</body>
</html>

View Code

組件建立

<!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>
</head>
<body>
    <div id="app">
        <Vheader></Vheader>
        <Vheader></Vheader>
        <Vheader></Vheader>
    </div>

    <script src="vue.js"></script>
    <script>
        //組件的建立
        Vue.component('Vheader',{
            //data必定是函數，必需要有個返回值
            data:function(){
                return{
                    //必需要return一個對象，哪怕是一個空的對象，否則就報錯。
                }
            },
            template:`<div class="header">
                        <div class="w">
                            <div class="w-l">
                                <img  src="./mei.jpg"/>
                            </div>
                            <div class="w-r">
                                <button>登陸</button><button>註冊</button>
                                
                            </div>
                        </div>
                   </div>`    
        })



        var app=new Vue({
            el:"#app",
            data:{

            },
            methods:{

            },
            computed:{

            },
            

        })
    </script>
</body>
</html>

View Code

vue-cli項目生成

安裝vue-cli

打開cmd，執行cnpm install -g vue-cli
安裝完畢後，執行vue -V查看是否安裝成功，若是輸出版本號則成功。

查看官方模板

在cmd下，執行 vue list

新建項目

在cmd下切換到指定目錄，而後執行 vue init webpack-simple demo（demo是自定義的項目名）npm

而後按回車，按回車，直到讓選是否是user sass？選擇N，由於如今還不會sass瀏覽器

而後如圖中所提示的執行：sass

cd demo
npm install
npm run dev

瀏覽器訪問：http://localhost:8080/便可看到vue界面

模板中組件的使用1

使用vs-code編輯vue文件，須要安裝擴展Vetur，在編輯器左側中找。

一個vue文件就是一個組件，重寫App.vue

<!--一個組件有三個部分組成-->

<template>
<!-- 頁面的結構 -->
    <div class="app">
        <h3>{{msg}}</h3>
    </div>
</template>



<script>
//頁面的業務邏輯
export default{
    name:'App',
    data(){
        return{
            msg:'hello 組件！'
        }
    }
}
</script>


<style>
</style>

組件的使用2

1.在項目目錄下新建組件目錄components，在目錄下新建三個組件文件：Vheader.vue，Vcontent.vue，Vfooter.vue。

<template>
    <header class="nav">
        我是header
        <h3>頭</h3>
    </header>
</template>

<script>
export default {
    name:'Vheader',
    data(){
        return{

        }
    }
}
</script>
<style scoped>
h3{
    color: red;
}
</style>

Vheader.vue

<template>
    <div class="wrap">
        我是中心內容區域
        <h3>頭</h3>
    </div>
</template>

<script>
export default {
    name:'Vcontent',
    data(){
        return{

        }
    }
}
</script>
<style scoped>
h3{
    color: yellow;
}
</style>

Vcontent.vue

<template>
    <footer class="toot">
        我是footer
        <h3>頭</h3>
    </footer>
</template>

<script>
export default {
    name:'Vfooter',
    data(){
        return{

        }
    }
}
</script>
<style scoped>
h3{
    color: blue;
}
</style>

Vfooter.vue

2.在App.vue下引用：

<!--一個組件有三個部分組成-->

<template>
<!-- 頁面的結構 -->
    <div class="app">
        <h3>{{msg}}</h3>
        <Vheader></Vheader>
        <vcontent></vcontent>
        <vfooter></vfooter>

    </div>
</template>



<script>
//1.先引入子組件
import Vheader from '../components/Vheader.vue'
import Vcontent from '../components/Vcontent'
import Vfooter from '../components/Vfooter'




//頁面的業務邏輯
export default{
    name:'App',
    data(){
        return{
            msg:'hello 組件！'
        }
    },
    methodes:{},
    computed:{},
    //2.掛載
    components:{
        Vheader,
        Vcontent,
        Vfooter,
    },
}
</script>


<style>
</style>