一. Vue簡介

1. Vue理解

1.1 特色

JavaScript 框架html

簡化Dom操做(使用Vue提供的特殊語法,Vue會自動的去操縱使用特殊語法的DOM元素)前端

響應式數據驅動 (頁面是由數據生成的)vue

漸進式的框架,你能夠將Vue做爲你應用的一部分嵌入其中ios

1.2 高級功能

解耦視圖和數據npm

可複用的組件axios

前端路由技術app

狀態管理框架

虛擬DOMmvvm

1.3 第一個Vue程序

步驟函數

  • 導入開發版本的Vue.js

  • 建立Vue實例對象, 設置el屬性和data屬性

  • 使用簡潔的模板語法把數據渲染到頁面上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HelloVue</title>
    <!-- 開發環境版本,包含了有幫助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        window.onload = function(){
            const app = new Vue({
                <!-- el類型:String或HTMLElement -->
                el: '#app',
                <!-- data類型:Object或function -->
                <!-- 注意:組件當中data必須是一個函數 -->
                data: {
                    message: 'Hello Vue!'
                }
            })
        }
    </script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
</body>
</html>

el:掛載點

el是用來設置Vue實例掛載(管理)的元素

做用範圍:Vue會管理el選項命中的元素及其內部的後代元素

能夠使用其餘的選擇器,可是建議使用ID選擇器

能夠使用其餘的雙標籤,不能使用HTML和BODY

data:數據對象

Vue中用到的數據定義在data中

data中能夠寫複雜類型的數據

渲染複雜類型數據時,遵照js的語法便可

<body>
    <div id="app">
        {{ message }}
        <h2>{{ person }}</h2>
        <h2>{{ person.name }}</h2>
        <h3>{{ words}}</h3>
        <h3>{{ words[2] }}</h3>
    </div>
    <script>
        const app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue!',
                    person:{
                        name:"lak",
                        gender:"女"
                    },
                    words:["GG","TT","YY","MM"]
                }
            })
	</script>
</body>

2. Vue中的MVVM

img

3. Vue聲明週期

3.1 Vue生命週期理解

也稱爲生命週期鉤子,即生命週期函數

生命週期圖示

img
3.2 總結

初始化階段

beforeCrete函數,created函數,beforeMount函數,mounted函數

運行狀態階段

beforeUpdade函數,updateed函數

銷燬階段

beforeDestory函數,destoryed函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HelloVue</title>
    <!-- 開發環境版本,包含了有幫助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 官網提供的 axios 在線地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   <script>
        window.onload = function(){
            const app = new Vue({
                el:"#app",
                data:{
                    msg:"GG"
                },
                method:{},
                //1.生命週期中的第一個函數,該函數在執行時Vue實例僅僅完成了
                //  自身事件的綁定和生命週期函數的初始化工做,Vue實例中還沒
                //  有Data,el,methods相關屬性
                beforeCreate(){
                    console.log("beforeCreate:" + this.msg);//拿不到該屬性
                },
                //2.生命週期中的第二個函數,該函數在執行時Vue實例已經初始化
                //  化了data屬性和methods中相關方法
                created(){
                    console.log("create:" + this.msg);
                },
                //3.生命週期的第三個函數,該函數在執行時Vue將el中指定做用範圍
                //  做爲模板編譯
                beforeMount(){
                    console.log("beforeMount:" + 
                        document.getElementById("sp").innerText);
                    //beforeMount:{{msg}}
                },
                //4.生命週期的第四個函數,該函數在執行過程當中,已經將數據渲染到
                //  界面中而且已經更新頁面
                mounted(){
                    console.log("beforeMount:" + 
                        document.getElementById("sp").innerText);
                    //beforeMount:GG
                },
                //5.生命週期的第五個函數,該函數是data中數據發生變化時執行的,
                //  此事件執行時僅僅時Vue實例中的data數據變化,而頁面中顯示的仍是
                //  原始數據
                beforeUpdate(){},
                //6.生命週期的第六個函數,此事件執行時Vue實例中的data數據
                //變化,頁面中的數據也相應發生了變化
                update(){},
                //7
                beforeDestory(){},
                //8
                destoryed(){},
            })
            
        }
    </script>
</head>
<body>
    <div id="app" >
        <span id="sp">{{msg}}</span>
    </div>
</body>
</html>
相關文章
相關標籤/搜索