一. Vue簡介

時間 2020-11-29

標籤 html 前端 vue ios npm axios app 框架 mvvm 函數欄目 HTML 简体版

原文原文鏈接

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

3. Vue聲明週期

3.1 Vue生命週期理解

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

生命週期圖示

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>

1. 一、Vue簡介
2. Vue教程：簡介（一）
3. 1、vue簡介
4. vue簡介
5. Vue簡介
6. vue cli簡介
7. vue 簡介
8. VUE 簡介
9. Vue介紹和簡介
10. Vue原理簡介
更多相關文章...
• SVN 簡介 - SVN 教程
• SQLite 簡介 - SQLite教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用
• Github 簡明教程

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。