vue的基礎語法

------------恢復內容開始------------

1、vue的介紹

漸進式的JavaScript框架

前端三大框架：vue         react        angualr

做者： 尤雨溪  facebook  谷歌公司

文檔：中文

 

2、node.js

一、官網下載

二、打開終端cmd：node -v 出現版本號則安裝成功

三、下載安裝完node自帶包管理員npm 和python3的pip3同樣

四、使用npm

第一步：要初始化npm的項目：npm init --yes 自動生成一個package.json文件

五、npm install vue@版本號（不加版本號則安裝最新版本）--save

　  npm install jquery --save

 

3、vue的使用

一、引包

<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>

二、建立實例化對象

new Vue({
            el: "#app", //目的地，做用在哪裏
            data: {
                //數據屬性
                //數據驅動視圖
                msg: "hello vue"
            }
        });

三、{{ }}：模板語法 插值

{{變量}}

{{1+1}}

{{‘hello’}}

{{函數的調用}}

{{1 == 1 ? '真的' : '假的'}}

四、指令系統： 

1）、v-text 等價於 {{ }}  實現原理：innerText

2）、v_html  實現原理：innerHTML

3）、v-if 是「真正」的條件渲染，由於它會確保在切換條件塊內的事件監聽器和子組件適當地被銷燬和重建，同時它也是惰性的，若是在初始渲染時條件爲假，則什麼也不作直到條件第一次變爲真時，纔會開始渲染條件塊

4）、v-show 無論初始條件是什麼，元素老是會被渲染，而且只是簡單地基於css進行切換，所以若是須要很是頻繁的切換，則使用v-show，若是運行條件不多改變，則使用v-if

5）、v-for = ‘(item,index) in menuList’

v-for = ‘(ivalue,key) in object’

item指的是數組中每項元素

6）、v-bind 對頁面中標籤的屬性進行綁定，全部的屬性均可以進行綁定，注意只要了v-bind後面的字符串必定是數據屬性的值

v-bind:屬性名（如class、id）= '對象{} | 數組[] | 變量名 | 常量'

在vue中v-bind能夠簡寫爲  :class  :src  :id  等同於 v-bind:class  v-bind:src  v-bind:id

7）v-on 在vue中使用v-on:click對當前DOM綁定Click事件，注意：全部的原生js的事件使用v-on均可以綁定

v-if和v-on對頁面中DOM進行操做

v-on簡寫 v-on:click 等同於 @click=‘方法名’

8）、v-bind:class 和v-on對頁面中DOM的樣式進行切換