# Day 01 jQuery vs Vue 使用兩者render畫面

###### tags: `Vue`

接下來要用jQuery vs Vue渲染出以下畫面,並比較不同

### jQuery text title and put img


 <div id="app">


        <section class="container">
            <div class="title">
                
                <h1></h1>
               
            </div>
            <img class="logo" src="">
        </section>
        
    </div>

<script>
    

        let data = {
            src:'./img/jquery.png' ,
            title:'jQuery vs Vue '
        }

        $('.title > h1').text(data.title);
        $('.logo').attr('src',data.src)

    </script>

[jQuery畫面原始碼](https://jsfiddle.net/Harrmonia/jfhxydpe/3/)

### Vue text title and put img


 <div id="app">
        <section class="container">
            <div class="title">

                <h1>{{title}}</h1>

            </div>
            <img class="logo" v-bind:src="src">
            <!-- <img class="logo" :src="src"> -->
        </section>
    </div>

 <script>

        let app = new Vue({
            el: '#app',
            data: {
                src: './img/pngegg.png',
                title: 'jQuery vs Vue '
            }
        })
    </script>

[vue畫面 原始碼](https://jsfiddle.net/Harrmonia/j80L9pqg/2/)

### 比較jQuery Vue
因為Vue是使用模板方式M(資料model)-VM(Vue- veiw model control)-V(網頁veiw),畫面和資料之間有vue做控制,所以改變資料就能直接改變畫面.

但是jQuey是直接操作dom,程式碼和畫面之間沒有中介,等於如果要改變畫面,要再次操作一次.要多做一次處理

*參考網路資訊*
[[ Vue.js 手牽手，一起嗑光全家桶 ] 開胃餐點 - 古早味事件燉畫面綁定](https://www.youtube.com/watch?v=VW4RZSKqIEE&list=PLEfh-m_KG4dYor8h4Hi2lqKJ0xqNTFh16&index=3)

*講師個人頻道資料很豐富,情況允許大家多多看完影片廣告,和每個月訂閱扣款donate,當做請講師喝杯咖啡犒賞辛苦無私