你的第一個Vue程式（Vue2）

BLBALDMAN發表於2024-07-05
Vue

1.下載並且引入Vue檔案

從Vue官網上下載vue檔案，分別為vue.js、vue.min.js。前者開發使用後者應用釋出使用。

2.引入vue.js檔案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js" ></script>
</head>
<body>
    
</body>
</html>

3.建立vue例項：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js" ></script>
</head>
<body>
    <div id="app"></div>
   <script>
        //建立例項
       const myvue = new Vue({
           template:'<h1>hello my frist vue</h1>'
       })
       
   </script>
</body>
</html>

4.vue例項掛載

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js" ></script>
</head>
<body>
    <div id="app"></div>
   <script>
      //建立例項
       const myvue = new Vue({
           template:'<h1>hello my frist vue</h1>'
       })
    //掛載
    myvue.$mount('#app')
   </script>
</body>
</html>

程式碼解釋：

  1. Vue和Jquery一樣，當你引入Vue時，就意味著註冊了一個全域性變數Vue。
  2. vue的構造方法引數是一個option配置物件，物件中含有大量的vue預定義設定，每一個都是key:value的形式，常見的一些選項有：
  • el: (Element or string) 定義 Vue 例項將掛載到哪個 DOM 元素上。
  • data: (Object) 包含初始資料，這些資料可以被 Vue 例項在模板中使用。
  • computed: (Object) 定義計算屬性，這些屬性基於其他資料動態計算得出。
  • methods: (Object) 包含可複用的方法，這些方法可以在 Vue 例項中呼叫。
  • watch: (Object) 監聽資料的變化並執行相應的回撥。
  • template: (string or function) 定義元件的 HTML 模板。
  • components: (Object) 註冊區域性元件，這些元件只在當前 Vue 例項中可用。
  • props: (Array or Object) 定義接收父元件傳遞過來的資料的屬性。
  • created(): (Function) 當 Vue 例項建立完成，資料觀測及事件配置已經完成時呼叫。
  • mounted(): (Function) 當 Vue 例項掛載完成後呼叫。
  1. template 配置項： value 是一個模板字串。 在這裡編寫符合 Vue 語法規則的程式碼（Vue 有一套自己規定的語法規則） 。 寫在這裡的字串會被 Vue 編譯器進行編譯， 將其轉換成瀏覽器能夠識別的 HTML 程式碼。 template稱之為模板
  2. Vue 例項的$mount 方法： 這個方法完成掛載動作， 將 Vue 例項掛載到指定位置。 也就是說將 Vue 編譯後的HTML 程式碼渲染到頁面的指定位置。 注意： 指定位置的元素被替換。
  3. ‘#app’的語法類似於 CSS 中的 id 選擇器語法。 表示將 Vue 例項掛載到 id=’app’的元素位置。 當然， 如果編寫原生 JS 也是可以的： vm.$mount(document.getElementById(‘app’))。
  4. ‘#app’是 id 選擇器， 也可以使用其它選擇器， 例如類選擇器： ’.app’。 類選擇器可以匹配多個元素（位置） ，這個時候 Vue 只會選擇第一個位置進行掛載（從上到下第一個）
    7.{{}}是插值語法，{{}}中可以放的東西如下：
  • 1.在data中宣告的變數、函式
  • 2.常量都可以
  • 3.合法的javascript表示式
  • 4.能訪問全域性變數白名單 ，如Date和Math這些

相關文章