應用例項

每個 Vue 應用都是通過用 createApp 函式建立一個新的應用例項開始的：

const app = Vue.createApp({
  /* 選項 */
})

一個Vue應用需要被掛載到一個 DOM 元素中,對DOM進行渲染

const RootComponent = { 
  /* 選項 */ 
}
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')

傳遞給 createApp 的選項用於配置根元件。在使用 mount() 掛載應用時，該元件被用作渲染的起點。

property

data()

data是一個函式，該函式需要返回一個物件，並儲存在元件例項中。

<div id="student" >{{message}}</div>
<script>
  const app = Vue.createApp({
    data() {
      return { message: 'hhhh' }
    }
  });
const vm = app.mount('#student');
</script>

使用{{}}文字插值將會被替換為message中的，並且繫結的元件例項上message發生了改變，插值處的內容都會更新。

methods

我們可以在元件中新增方法，使用 methods 選項，該選項包含了所需方法的物件。

<div id="student">
  <div>name: {{name}}</div>
  <div>age: {{age}}</div>
  <div>{{hello()}}</div>
</div>
<script>
  const app = Vue.createApp({
    data() {
      return {name: 'kiddy',
              age: 18 }
    },
    methods: {
      hello: function(){
        return  this.name + "：你好啊！";
      }
    }
  });

const vm = app.mount('#student');
</script>
 

vue例項中還有其他的property

模板語法

模板語法基礎

• {{}}

前面提到 使用{{}}文字插值將會被替換為message中的，並且繫結的元件例項上message發生了改變，插值處的內容都會更新。

但{{}}只能接受文字引數，不能轉義。就比如傳遞html，並不會將html進行轉義。

• 可以使用v-html 傳遞html文字

<div id="student">
  <span v-html="message"></span>
</div>
<script>
  const app = Vue.createApp({
    data() {
      return { message: '<span>hhhh</span>' }
    }
  });
const vm = app.mount('#student');
</script>

• 可以使用v-bind 指令繫結html中的屬性值

<div id="v2">
  <span v-bind:title="message">滑鼠懸停</span>
</div>
<script>
  const app = Vue.createApp({
    data() {
      return {message: '你好啊'}
    }
  });

const vm = app.mount('#v2');
</script>

v-bind 可以縮寫為 :

<div id="v2">
  <span :title="message">滑鼠懸停</span>
</div>

• 可以使用v-on 指令監聽DOM事件 (...)

<div id="v3">
  <button v-on:click="go">點選</button>
</div>

<script>
  const app = Vue.createApp({
      methods: {
        go: function (){
          alert(1);
        }
      }
  });

const vm = app.mount('#v3');
</script>

v-on可以縮寫為@

<a @click="doSomething"> ... </a>

• 可以使用v-model指令實現資料的雙向繫結。

<div id="v4">
  <p>{{message}}</p>
  <input v-model="message">
</div>
<script>
  const app = Vue.createApp({
      data(){
        return {
          message: 'Kiddy'
        }
      }
  });

const vm = app.mount('#v4');

</script>

條件迴圈渲染

條件

v-if: 對應java if

v-else-if：對應java else if

v-else: 對應java else

如果放回true則渲染，否則不渲染

<div id="v5">
  <div v-if="type === 'A'">A</div>
  <div v-else-if="type === 'B'">B</div>
  <div v-else>C</div>
</div>

<script>
    const app = Vue.createApp({
         data(){
           return {type:'B'}
         }
    })
    const vm = app.mount('#v5');
</script>

迴圈

v-for 指令來實現迴圈
語法 : v-for="obj in objs"

<table id="v6">
  <thead>
  <tr>
    <th>姓名</th>
    <th>年齡</th>
    <th>性別</th>
  </tr>
  </thead>
  <tbody>
  <tr v-for="student in students">
    <td >{{student.name}}</td>
    <td>{{student.age}}</td>
    <td>{{student.gender}}</td>
  </tr>
  </tbody>
</table>

<script>
    const app = Vue.createApp({
         data(){
           return {  students: [
               {
                 name: 'AAA',
                 age: 1,
                 gender: '男'
               },
               {
                 name: 'BBB',
                 age: 2,
                 gender: '男'
               },
               {
                 name: 'CCC',
                 age: 1,
                 gender: '女'
               }
             ]}
         }
    })
    const vm = app.mount('#v6');
</script>

使用v-for直接遍歷物件

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

<script>
    const app = Vue.createApp({
         data(){
           return {
             object: {
               title: 'asddada',
               author: 'kiddy',
               publishedAt: '2021-11-14'
             }}
         }
    })
    const vm = app.mount('#v-for-object');
</script>

v-if 與 v-for 一起使用 （不推薦使用）

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

上面的程式碼表示將只渲染未完成的 todo。