天天看點

Vue的引入方式,屬性和計數器案例

個人簡介

👩‍🚀 ​​

​作者簡述​

​​:大家好,我是陳春波【花名:水香木魚】,來自于東北【黑龍江】慶安小城😜

🌏 ​​

​人生格言​

​:木秀于林風或許會摧,堆高于岸流或許湍,但是,初心不改,奮鬥不息。🔥

1、CDN引入

​<script src="https://unpkg.com/vue@next"></script>​

案例:

<body>
    <div id="app">

    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        //vue相關代碼
        const why = {
            template: '<h1>歡迎來到vue3</h1>'
        }
        //将app挂載到id為app的div上
        const app = Vue.createApp(why);
        app.mount('#app')
    </script>
</body>      

2、本地下載下傳與引入

​​vue@next 官網​​

①打開官網後ctrl+A 複制源代碼

Vue的引入方式,屬性和計數器案例

②本地建立vue3.js

Vue的引入方式,屬性和計數器案例

③将複制的源代碼粘貼到vue3.js當中

Vue的引入方式,屬性和計數器案例

④使用

<body>
    <script src="./js/vue3.js"></script>
</body>      

3、計數器案例

Vue的引入方式,屬性和計數器案例

①​

​原生寫法​

​:

<body>
    <div style="text-align: center;">
        <h1 class="counter">0</h1>
        <button class="increment">+1</button>
        <button class="decrement">-1</button>
    </div>

    <script src="./js/vue3.js"></script>
    <script>
        //擷取DOM上的所有元素
        const counterEl = document.querySelector('.counter')
        const incrementEl = document.querySelector('.increment')
        const decrementEl = document.querySelector('.decrement')
        //2.定義變量
        let counter = 0;
        counterEl.innerHTML = counter
        //監聽按鈕點選事件
        incrementEl.addEventListener('click', () => {
            // 加1
            counter += 1;
            counterEl.innerHTML = counter
        })
        decrementEl.addEventListener('click', () => {
            // 減1
            counter -= 1;
            counterEl.innerHTML = counter
        })
    </script>
</body>      

②​

​vue寫法​

​:

<body>
    <div id="app"></div>
    <script src="./js/vue3.js"></script>
    <script>
        Vue.createApp({
            template: `
            <div style="text-align: center">
                <h1>{{msg}}</h1>
                <h1>{{counter}}</h1>
                <button @click="increment">+1</button>
                <button @click="decrement">-1</button>
            </div>
            `,
            data: function () {
                return {
                    msg: 'Hello Word 電腦',
                    counter: 59
                }
            },
            //定義方法
            methods: {
                increment() {
                    this.counter += 1
                },
                decrement() {
                    this.counter -= 1
                }
            }
        }).mount('#app')
    </script>
</body>      

4、聲明式和指令式:

原生開發和Vue開發的模式和特點,我們發現是完全不同的,其中涉及到兩種不同的程式設計風格。
Vue的引入方式,屬性和計數器案例
  • 指令式注重的是:how to do
  • 聲明式注重的是:what to do【由架構(機器)完成how 的一個過程】
Vue的引入方式,屬性和計數器案例

5、MVVM模型

MVC和MVVM都是一種軟體的體系結構

①MVC是Model-View-Controller 的簡稱【iOS、前端】

Vue的引入方式,屬性和計數器案例

② MVVM 是Model-View-ViewModel 的簡稱【目前非常流行的架構模式】

Vue的引入方式,屬性和計數器案例

【注意:vue 并沒有完全遵守MVVM的模型,整個設計是受MVVM的啟發】

6、template 寫法一

在 script 中定義 ​

​type="x-template"​

<body>
    <div id="app"></div>
    <script type="x-template"id="sxmy">
        <div style="text-align: center" >
            <h1>{{msg}}</h1>
            <h1>{{counter}}</h1>
            <button @click="increment">+1</button>
            <button @click="decrement">-1</button>
        </div>
    </script>
    <script src="./js/vue3.js"></script>
    <script>
        Vue.createApp({
            template: '#sxmy',
            data: function () {
                return {
                    msg: 'Hello Word 電腦',
                    counter: 59
                }
            },
            //定義方法
            methods: {
                increment() {
                    this.counter += 1
                },
                decrement() {
                    this.counter -= 1
                }
            }
        }).mount('#app')
    </script>
</body>      

7、template 寫法二

使用​

​tamplate标簽​

<body>
    <div id="app"></div>
    <template id="sxmy">
        <div style="text-align: center">
            <h1>{{msg}}</h1>
            <h1>{{counter}}</h1>
            <button @click="increment">+1</button>
            <button @click="decrement">-1</button>
        </div>
    </template>
    <script src="./js/vue3.js"></script>
    <script>
        Vue.createApp({
            template: '#sxmy',
            data: function () {
                return {
                    msg: 'Hello Word 電腦',
                    counter: 59
                }
            },
            //定義方法
            methods: {
                increment() {
                    this.counter += 1
                },
                decrement() {
                    this.counter -= 1
                }
            }
        }).mount('#app')
    </script>
</body>      

8、data 屬性

該屬性傳入一個函數,并且該函數需要傳回一個對象
  • Vue2.x 可以傳入對象
  • ​Vue3.x 必須傳入一個函數​

    ​​,否則會直接在​

    ​浏覽器中報錯​

9、methods屬性

  • 這些方法被​

    ​綁定到template 模闆​

    ​中
  • 該方法中,我們可以​

    ​使用this 關鍵字​

    ​直接通路到data 中傳回的對象的屬性