前端Vue學習筆記

Day01:

Vue框架是最新流行的前端框，他主要是使用vue.js實現了View和Model的資料的雙向繫結

以下程式碼是基本的使用：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 引入vue.js -->
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <!-- View檢視 -->
        <div id="app">
            {{title}}
             
<h1>{{msg}}</h1>
        </div>
        <div id="app-2">
            <span v-bind:title="message">
                滑鼠懸停幾秒檢視此處動態繫結的提示資訊！
            </span>
        </div>
        
        <script type="text/javascript">
            console.log(Vue);
            let app  
= new Vue({
                el:"#app",
                // Model模型
                data:{
                    title:"Hello Vue!",
                    msg:"前端VUE框架"
                },
            })
            var app2 = new Vue({
                el:'#app-2',
                data:{
                    message: 
'頁面加載於'+new Date().toLocaleString()
                }
            })
            console.log(app)
        </script>
    </body>
</html>
<!-- 資料的雙向繫結，MVVM模式，VUE.js將VIEW檢視和模型MODEL雙向的繫結在一起 -->

在瀏覽器控制板裡可以直接更改app.title的值，資料檢視會實時的進行修改，但是這個只是前端的一個頁面內容短暫性的更改，具體資料內容更改還是需要後臺的提供資料。

前端Vue學習筆記

Vue學習筆記5-前端工程化

vue學習筆記之slot插槽基本用法例項分析

vue學習筆記之過濾器的基本使用方法例項分析

vue學習筆記之作用域插槽例項分析

vue學習筆記之給元件繫結原生事件操作示例

vue學習筆記之動態元件和v-once指令簡單示例

vue學習筆記之slot插槽用法例項分析

vue學習筆記之Vue中css動畫原理簡單示例

Vue學習筆記（二）

Vue 學習筆記1 Hello_Vue

Vue 學習筆記2 data資料物件

Vue 學習筆記3 Vue指令 v-text v-html

VUE學習筆記（一）

vue 學習筆記2

vue學習筆記（一） ---- vue指令（總體大綱）

VUE學習筆記--基礎標籤

VUE學習筆記—元件

Vue學習筆記03--Vue中路由的使用

Vue學習筆記-Vue.js-2.X 學習(三)

前端Vue學習筆記

相關推薦