一.什麽是VUE

vue 是一個構建用戶界面的javascript框架

特點：輕量，高效

特性：雙向數據綁定，數據驅動視圖

二.vue的使用

1.引入vue.js

<script src=vue.js></script>

2.展示html

<div id="app">
        <input type="text" v-model="msg">
        <p>{{msg}}</p>
    </div>

3.建立vue對象

    new Vue({
            el: "#app", //表示在當前這個元素內開始使用VUE
            data:{
                msg: ""
            }
        })

三.　通過指令在元素中進行插值

指令：就是帶有 V- 前綴的特殊屬性

v-text: 在元素當中插入文本
v-html: 在元素不中不僅可以插入文本，還可以插入標簽
v-if: 根據表達式的真假值來動態插入和移除元素
v-show: 根據表達式的真假值來動態隱藏和顯示元素
v-for: 根據變量的值來循環渲染元素
v-on: 監聽元素事件，並執行相應的操作
v-bind:綁定元素的屬性來執行相應的操作

v-model:實現了數據和視圖的雙向綁定
 分成了3步：
 1）把元素的值和數據相綁定
 2）當輸入內容時，數據同步發生變化，視圖  ---》數據的驅動
 3）當改變數據時，輸入內容也會發生變化，數據 ---》視圖的驅動

自定義指令：

 new Vue({
            el: "#app", //表示在當前這個元素內開始使用VUE
            data:{

            },
            directives: {
                focus: {    //指令的名字
                    //當綁定的元素顯示時
                    inserted: function (tt) {
                        tt.focus();
                    }
                }
            }
 

Vue.js——框架