Vue基礎入門——概述+語法

文章目錄

1 概述

2 語法

Vue

1 概述

1.1 vuejs入門

Vue.js 是一個構建數據驅動的web界面的漸進式框架。目標是通過儘可能簡單的API實現響應的數據綁定和組合的視圖組件。易上手，便於第三方庫或既有項目整合。
官網：https://cn.vuejs.org/v2/guide/

1.2 MVVM模式

Model-View-ViewModel ，本質是MVC的改進版。MVVM就是將其中的View的狀態和行爲抽象化，將視圖UI和業務邏輯分開。
MWVM模式和MVC模式樣,主要目的是分離視圖(View) 和模型(Model)。
Vue.js是一個提供了MVVM風格的雙向數據綁定的JavaScript庫，專注於View層。核心就是VM，也就是ViewModel（負責連接View和Model，保證視圖和數據的一致性，這種輕量級的架構讓前端開發更加高效、快捷）。

1.3 前期準備

maven-----archetype.maven-archetype-webapp

頁面放在webapp下面

1.4 入門案例

配置Tomcat，啓動服務器，訪問http://localhost:8989/vuedemo/demo1.html

2 語法

2.1 插值表達式

數據綁定最常見的形式就是使用"Mustache"語法(雙大括號)的文本插值，Mustache 標籤將會被替代爲對應數據對象上屬性的值。無論何時，綁定的數據對象上屬性發生了改變，插值處的內容都會更新。

Vue.js都提供了完全的JavaScript表達式支持。
{ { number + 1 } }
{ { ok ? 'YES' : 'NO' } }

這些表達式會在所屬Vue實例的數據作用域下作爲JavaScript被解析。有個限制就是，每個綁定都只能包含單個表達式，所以下面的例子都不會生效

{ { var a = 1 } } //這是語句不是表達式
{ { if (ok) { return message  } } }  //流控制也不會生效

實現頁面熱部署：不重啓服務器，刷新

2.2 VueJS常用系統指令

1 v-on

可以用v-on指令監聽DOM事件，並在觸發時運行一些JavaScript事件。

v-on:click——綁定點擊事件

報紅：alt+enter
v-on:keydown——鍵盤按下事件
傳統的js事件

<body>
    <div id="app">
 		Vue:<input type="text" v-on:keydown="fun($event)">
        <hr/>
        傳統JS:<input type="text" onkeydown="showKeyCode()"/>
     </div>
</body>
<script>
    // 傳統js的鍵盤按下事件
    function showKeyCode() {
        //event對象和我們的document對象以及window對象是一樣的，可以不用定義直接使用
        var keyCode = event.keyCode;
        //alert(keyCode);
        if(event.keyCode == 13){
            alert("你按的是回車鍵")
        }
//      if (keyCode < 48 || keyCode > 57){
          // 不讓鍵盤的按鍵起作用
//        event.preventDefault();
//      }
	
	new Vue({
        el:"#app",
        methods:{
        //    $event它是vue中的事件對象，和傳統js的event對象是一樣的
            fun:function (event) {
                var keyCode = event.keyCode;
                if (keyCode < 48 || keyCode > 57){
                    // 不讓鍵盤的按鍵起作用
                    event.preventDefault();
                }
            }
        }
    });
    }
</script>

keyCode數值
event.preventDefault()——阻止事件默認行爲

v-on:mouseover——鼠標懸浮事件
傳統的js方式

    <div id="app">
        <div onmouseover="divmouseover()" id="div">
            <textarea onmouseover="textareamouseover()">這是另一個文件域</textarea>
        </div>
    </div>
    ......
    function divmouseover() {
        alert("鼠標移動到div上");
    }
    function textareamouseover() {
        alert("鼠標移動到textarea上了");
        event.stopPropagation();//鼠標停在文件域上不會彈出“鼠標移動到div上”
    }

@事件名稱：@mouseover是v-on:mouseover的簡寫

<div v-on:mouseover="fun1" id="div">
	<textarea v-on:mouseover="fun2($event)">這是一個文件域</textarea>
</div>
......
new Vue({
        el:"#app",
        methods:{
            fun1:function () {
                alert("鼠標停留在div上");
            },
            fun2:function (event) {
                alert("鼠標停留在textarea上");
                event.stopPropagation();
            }
        }
    });

event.stopPropagation()——阻止事件傳播

2 事件/按鍵修飾符

事件修飾符

<body>
    <div id="app">
        <form action="demo1.html" method="post" onsubmit="return checkForm()">
            <input type="submit" value="提交">
        </form>
    </div>
</body>
<script>
    // 傳統的js
    function checkForm() {
        alert(1);
        // 表單驗證必須有一個明確的boolean類型返回值
        // 在應用驗證方法時必須加上一個 return 方法名稱
        return false;
    }
</script>

@submit.prevent，@mouseover.stop的使用

<div id="app">
        <form @submit.prevent action="demo1.html" method="post">
            <input type="submit" value="提交">
        </form>
        <hr/>
        <div @mouseover="fun1" id="div">
            <textarea @mouseover.stop="fun2($event)">這是一個文件域</textarea>
        </div>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        methods:{
            fun1:function () {
                alert("鼠標停留在div上");
            },
            fun2:function (event) {
                alert("鼠標停留在textarea上");
            }
        }
    });
</script>

按鍵修飾符

<body>
    <div id="app">
    	Vue:<input type="text" v-on:keydown,enter="fun1">
    </div>
</body>
<script>
    new Vue({
       el:"#app",
       methods:{
       		fun1:function(){
       			alert("按下的是回車");
       		}
       }
    });
</script>

v-on:keydown=@keydown觸發按下回車鍵的事件

3 v-text,v-html,v-bind

<body>
    <div id="app">
<!--        <div id="div1"></div>-->
<!--        <div id="div2"></div>-->
        <div v-text="message"></div>
        <div v-html="message"></div>
    </div>
</body>
<script>
    new Vue({
       el:"#app",
       data:{
           message:"<h1>hello Vue</h1>"
       }
    });
    // 傳統js的innerText和innerHTML
    window.onload = function () {
        document.getElementById("div1").innerHTML="<h1>hello</h1>";
        document.getElementById("div2").innerText="<h2>hello</h2>";
    }
    
    new Vue({
        el:"#app",
        methods:{
            fun1:function () {
                alert("鼠標停留在div上");
            },
            fun2:function (event) {
                alert("鼠標停留在textarea上");
            }
        }
    });
</script>