Vue入門01

標簽： vue

Hello Vue！！

每一個應用都是從創建一個實例開始的

聲明式渲染聲明一條數據，然后利用特殊的模板語法將其渲染出來

new Vue({})—> 創建一個實例

el:""----> 聲明掛載點

{{msg}} —>模板語言

<div id="app">{{msg}}</div>

<!-- 引入vue.js -->
<script src="/base/vue.js"></script>
<script>
    //每一個應用都是從創建一個實例開始的
    //每一個應用起碼得來這么一個實例
    //聲明式渲染  聲明一條數據，然后利用特殊的模板語法將其渲染出來
    new Vue({
        el:"#app", // 掛載點
        data:{
            msg:"hello Vue.js!"
        }

    })
</script>

Vue遵從MVC設計模式

m：model v:view c:contoroller

m層：數據層
v層：視圖層
c層：就是將model層的數據在view層顯示

例題

點擊按鈕顯示隱藏div
【注】箭頭函數中無this指向

<script>
    /* 
        mvc設計模式：
            m：model v:view  c:contoroller
            c的作用：就是將m層的數據在view層顯示
            
    */
    //m層
    let data = {
        isShow : true,
        isBig:false
    }
    //v層
    let boxDom = document.getElementsByClassName("box")[0];
    //C層
    function Contoroller(){
        this.init();
    }
    Contoroller.prototype = {
        init(){
            this.addEvent()
        },
        addEvent(){
            let btnDom = document.getElementsByClassName("btn")[0];
            let btn2Dom = document.getElementsByClassName("btn2")[0];
            // let that = this;
            btnDom.onclick = ()=>{
                data.isShow = !data.isShow
                //渲染視圖
                this.render()
            }
            btn2Dom.onclick = ()=>{
                data.isBig = !data.isBig
                this.render()
            }
        },
        render(){
            boxDom.style.display = data.isShow ? "block" : "none"
            boxDom.style.width = data.isShow ? "400px" : "100px"
        }
    }
    new Contoroller();//實例化Conteroller



   //面向過程的寫法
  /*  let btnDom = document.getElementsByClassName("btn")[0];
   let divDom = document.getElementsByClassName("box")[0];
   var flag = true;
   btnDom.onclick = function(){
       if(flag){
           divDom.style.display = "none"
           flag = false;
        }else{
            divDom.style.display = "block"
            flag = true;
       }
   } */
</script>

Vue的MVVM設計模式

vue中采用了mvvm設計模式 mpc/mvp演變成mvvp
mvvp解決了mvc反饋不及時的問題，或者實現了自動同步的功能

為什么model層數據改變了，vm就可以知道數據改變了呢?

（vue的mvvm的雙向數據綁定的原理！）

（以下三種說法都正確）

vue在創建vm的時候，會將數據配置到實例當中，然后通過Object.defineProperty對數據進行操作
為數據動態的添加的get 和 set 方法，當獲取數據的時候，將會觸發get方法，當我們設置數據時，
將會觸發set方法，從而進一步觸發vm的watcher方法，數據改變完成，vm會觸發視圖的更新操作

vue中通過數據劫持 &訂閱發布模式：

通過Object.defineProperty對所有的數據進行劫持，當數據發生變化的時候，會觸發自身的set方法然后發布消息給訂閱者，觸發其相應的監聽回調。

實現mvvm的雙向綁定，是采用數據劫持結合發布者-訂閱者模式的方法，通過Object.defineProterty()來劫持各個屬性的setter，getter，在數據變動時，發布消息給訂閱者，觸發相應的監聽回調

Vue支持的數據類型

String
num
bool
undefined  【不會渲染】
null       【不會渲染】
arr
object
function
·
·
·

<body>
    <div id="app">
        <p> {{msg}}</p>
        <p>{{num}}</p>
        <p>{{bool}}</p>
        <p>{{arr[0]}}</p>
        <p>{{fn()}}</p>
    </div>
    <script src="/base/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:'hello vue',
                num:2,
                bool:false,
                arr:[1,2,3],
                fn:function(){
                    return 1+1
                }
            }
        })
    </script>
</body>

Vue指令 v-XXX

1、v-for

這是一個指令，只要有v-的就是指令（directive 操作dom ）

在vue中可以通過v-for來循環數據的通知循環dom，語法是item in/of items，接收第二個參數是索引 (item,index) of items,還可以循環鍵值對，第一個參數是value，第二個是key，第三個依然是索引

<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in arr">{{index+1}}、{{item}}</li>
        </ul>
    </div>
    <script src="/base/vue.js"></script>
    <script>
        /* 
            我們在body里面寫的東西都是假的
            在上面寫的，叫做模板。實例會將模板編譯一波之后再渲染到頁面
            帶v-的，我們叫做指令，指令的作用就是操作Dom
        */
        new Vue({
            el:"#app",
            data:{
                arr:["蘋果","香蕉","鳳梨"]
            }
        })
    </script>
</body>

2、v-for_json

<body>
    <div id="app">
        <ul>
            <li v-for="(item,key,index) in person">{{index}}、{{key}}：{{item}}</li>
        </ul>
    </div>
    <script src="/base/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                person:{
                    name:"三叔",
                    age:48
                }
            }
        })
    </script>
</body>

5、v-for_key

為了避免重復的數據在數據更改的時候會出現渲染問題
angularJs、vue1.0里需要加trac-by才能避免這個問題
并且如果有重復的數據也需要加這個
所以需要加 :key 屬性，值是每一個元素唯一的標識
[https://blog.csdn.net/weixin_42695446/article/details/84680213]

<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in number" :key="index">{{index+1}}、{{item}}</li>
        </ul>
    </div>
    <script src="/base/vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                number:[1,2,3,4,5]
            }
        })
    </script>

6、v-for_template

觸發視圖的更新操作 ==>數組的異變方法

push()
pop()
shift()
unshift()
splice()
sort()
reverse()
- 由于JavaScript 的限制，vue不能檢測以下數組的變動：
- 當利用索引直接設置一個數組項的時候，例如：vm.arr.[indexOfItem] = newValue
- 當修改數組長度的時候，例如 vm.arr.length = newLength

<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <th>姓名：</th>
                    <th>性別：</th>
                    <th>年齡：</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in person">
                    <td>{{item.name}}</td>
                    <td>{{item.sex}}</td>
                    <td>{{item.age}}</td>
                </tr>
                <tr v-for="item in arr">
                    <td>{{item}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="/base/vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                person:[
                    {name:"大熊",sex:"男",age:6},
                    {name:"叮當",sex:"男",age:8}
                ],
                arr:[1,2,3,4,5]
            }
        })
       
        // vm.person.push({name:"靜香",sex:"女",age:8})
        // vm.arr.push(369)
        // vm.arr.length = 1// 無效
        // vm.arr[1] = 222  //無效
        vm.arr.push(31)
    </script>

</body>

v-on

 v-on指令  綁定事件  v-on:click ===>@click 簡寫
            @click.stop      阻止事件冒泡 ===> e.stopPropagation()
            @click.prevent   取消事件默認行為 ===>e.preventDefault()
            @click.once      只會觸發一次
            @click.self      只會自身觸發

<body>
    <div id="app">
        <p>num:{{num}}</p>
        <p><button v-on:click="num++">點擊num</button></p>
        <p><button @dblclick="num++">雙擊num</button></p>
        <ul @click="clickUl">
            <li @click.once="clickLi">111</li>
        </ul>
        <form @submit.pervent="submits">
            <input type="text" name="name">
            <button type="submit">提交</button>
        </form>
        <button @contextmenu.prevent="contextmenu">
            右鍵點我
        </button>

        <p>
            <input type="text" @keyUp.f2="up">
        </p>
        <p>
            <input type="text" @keyUp.enter="kup">
        </p>
    </div>
    <script src="/base/vue.js"></script>
    <script>
        Vue.config.keyCodes.f2 = 113//定義鍵碼標識，按鍵盤的113號鍵碼就可以觸發up方法
        new Vue({
            el:'#app',
            data:{
                num:1
            },
            methods:{
                up(e){
                    console.log("按F2了!!")
                },
                clickLi(e){
                    console.log("li被點擊了")
                    e.stopPropagation()//阻止默認行為
                },
                clickUl(){
                    console.log("Ul被點擊了！！")
                },
                submits(e){
                    console.log("取消form默認行為了！")
                },
                contextmenu(){
                    console.log("右鍵菜單被取消了！！")
                },
                kup(){
                    console.log("按回車了！")
                }
            }
            
        })

        /* 
            v-on指令  綁定事件  v-on:click ===>@click 簡寫
            @click.stop      阻止事件冒泡 ===> e.stopPropagation()
            @click.prevent   取消事件默認行為 ===>e.preventDefault()
            @click.once      只會觸發一次
            @click.self      只會自身觸發

        */
    </script>
</body>

7、v-model

<body>
    <div id="app">
        <p>
            <input type="text" v-model="message">{{message}}
        </p>
        <p> <!-- //lazy 失去光標時觸發 -->
            <input type="text" v-model.lazy="message">{{message}}
        </p>
        <p> <!-- //number  這個值無法被parseFloat的時候會返回原值。如果能被parseFloat解析，就會被解析了 -->
            <input type="text" v-model.number="message">{{message}}
        </p>
        <p> <!-- //trim  這個用來去掉前后的空白字符 -->
            <input type="text" v-model.trim="message">{{message}}
        </p>
    </div>
    <script src="/base/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                message:"hello vue"
            }
        })
    </script>
</body>

在vue中還有v-on來為dom綁定事件，在v-on：后面加上要綁定的事件類型，值里可以執行一些簡單javascript表達式：++ – = …

可以將一些方法設置在methods里，這樣就可以在v-on:click的值里直接寫方法名字可以，默認會在方法中傳入事件對象，當寫方法的時候加了()就可以傳參，這個時候如果需要事件對象，那就主動傳入$event

v-on綁定的事件可以是任意事件,v-on:可以縮寫為@

為什么在 HTML 中監聽事件?

你可能注意到這種事件監聽的方式違背了關注點分離 (separation of concern) 這個長期以來的優良傳統。但不必擔心，因為所有的 Vue.js 事件處理方法和表達式都嚴格綁定在當前視圖的 ViewModel 上，它不會導致任何維護上的困難。實際上，使用 v-on 有幾個好處：

掃一眼 HTML 模板便能輕松定位在 JavaScript 代碼里對應的方法。
因為你無須在 JavaScript 里手動綁定事件，你的 ViewModel 代碼可以是非常純粹的邏輯，和 DOM 完全解耦，更易于測試。
當一個 ViewModel 被銷毀時，所有的事件處理器都會自動被刪除。你無須擔心如何自己清理它們。

本文鏈接：https://blog.csdn.net/qq_45134087/article/details/92846816

智能推薦

freemarker + ItextRender 根據模板生成PDF文件

1. 制作模板 2. 獲取模板，并將所獲取的數據加載生成html文件 2. 生成PDF文件其中由兩個地方需要注意，都是關于獲取文件路徑的問題，由于項目部署的時候是打包成jar包形式，所以在開發過程中時直接安照傳統的獲取方法沒有一點文件，但是當打包后部署，總是出錯。于是參考網上文章，先將文件讀出來到項目的臨時目錄下，然后再按正常方式加載該臨時文件；還有一個問題至今沒有解決，就是關于生成PDF文件...

電腦空間不夠了？教你一個小秒招快速清理 Docker 占用的磁盤空間！

Docker 很占用空間，每當我們運行容器、拉取鏡像、部署應用、構建自己的鏡像時，我們的磁盤空間會被大量占用。如果你也被這個問題所困擾，咱們就一起看一下 Docker 是如何使用磁盤空間的，以及如何回收。 docker 占用的空間可以通過下面的命令查看： TYPE 列出了docker 使用磁盤的 4 種類型： Images：所有鏡像占用的空間，包括拉取下來的鏡像，和本地構建的。 Con...

requests實現全自動PPT模板

http://www.1ppt.com/moban/ 可以免費的下載PPT模板，當然如果要人工一個個下，還是挺麻煩的，我們可以利用requests輕松下載訪問這個主頁，我們可以看到下面的樣式點每一個PPT模板的圖片，我們可以進入到詳細的信息頁面，翻到下面，我們可以看到對應的下載地址點擊這個下載的按鈕，我們便可以下載對應的PPT壓縮包那我們就開始做吧首先，查看網頁的源代碼，我們可以看到每一...

SpringMvc自定義類型轉換器步驟

...

Linux C系統編程-線程互斥鎖（四）

互斥鎖互斥鎖也是屬于線程之間處理同步互斥方式，有上鎖/解鎖兩種狀態。互斥鎖函數接口 1）初始化互斥鎖 pthread_mutex_init() man 3 pthread_mutex_init (找不到的情況下首先 sudo apt-get install glibc-doc sudo apt-get install manpages-posix-dev) 動態初始化 int pthread_...