Vue是什么

是一套用于構(gòu)建用戶界面的漸進式框架, 被設(shè)計為可以自底向上逐層應(yīng)用,核心庫只關(guān)注視圖層，易于上手

一、聲明式渲染 指令學(xué)習(xí)

1、 {{ }}

傳值

<div id="counter">
  Counter: {{ counter }}
</div>

2、 v-bind

綁定元素的 attribute

<span v-bind:title="message">
    hello ,word
</span>
<!-- 縮寫 -->
<a :href="url"> ... </a>
<!-- 動態(tài)參數(shù)的縮寫 -->
<a :[key]="url"> ... </a>

3、 v-on

添加事件監(jiān)聽器:

<button v-on:click="reverseMessage">點擊</button>
// 含有修飾符的用法
// 對于觸發(fā)的事件調(diào)用 event.preventDefault()
<form v-on:submit.prevent="onSubmit">...</form> 
<!-- 縮寫 -->
<a @click="doSomething"> ... </a>
<!-- 動態(tài)參數(shù)的縮寫 -->
<a @[event]="doSomething"> ... </a>

4、v-model

表單輸入和應(yīng)用狀態(tài)之間的雙向綁定:

<div id="two-way-binding">
  <p>{{ message }}</p>
  <input v-model="message" />
</div>

5、v-if

控制切換一個元素是否顯示

<span v-if="seen">現(xiàn)在你看到我了</span>

5、v-for

綁定數(shù)組的數(shù)據(jù)渲染一個項目列表

  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>

6、v-once

一次性地插值，當數(shù)據(jù)改變時，插值處的內(nèi)容不會更新

<span v-once>這個將不會改變: {{ msg }}</span>

7、v-html

雙大括號會將數(shù)據(jù)解釋為普通文本，而非 HTML 代碼。為了輸出真正的 HTML，你需要使用v-html 指令

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

js頁面

const EventHandling = {
  data() {
    return {
      message: 'Hello Vue.js!',
      todos: [
        { text: 'Learn JavaScript' },
        { text: 'Learn Vue' },
        { text: 'Build something awesome' }
      ]
    }
  },
  methods: {
    reverseMessage() {
      this.message = this.message
        .split('')
        .reverse()
        .join('')
    }
  }
}

Vue.createApp(EventHandling).mount('#event-handling')

二、組件學(xué)習(xí)

• 定義組件

const TodoItem = {
  props: ['todo'], // 組件接收的參數(shù)
  template: `<li>{{ todo.text }}</li>` // 組件具體內(nèi)容
}

const TodoList = {
  data() {
    return {
      groceryList: [
        { id: 0, text: 'Vegetables' },
        { id: 1, text: 'Cheese' },
        { id: 2, text: 'Whatever else humans are supposed to eat' }
      ]
    }
  },
  components: {
    TodoItem // 組件名稱
  }
}

const app = Vue.createApp(TodoList)

app.mount('#todo-list-app')

• 使用組件

<div id="todo-list-app">
  <ol>
     <!--
      現(xiàn)在我們?yōu)槊總€ todo-item 提供 todo 對象
      todo 對象是變量，即其內(nèi)容可以是動態(tài)的。
      我們也需要為每個組件提供一個“key”，稍后再
      作詳細解釋。
    -->
    <todo-item
      v-for="item in groceryList"  // 組件內(nèi)容需要循環(huán)
      v-bind:todo="item" // 傳參數(shù)給組件
      v-bind:key="item.id" // 循環(huán)內(nèi)的key值
    ></todo-item>
  </ol>
</div>

三、生命周期學(xué)習(xí)

image.png

四、計算屬性學(xué)習(xí)

<div id="computed-basics">
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</div>

data() {},
computed: {
    // 計算屬性的 getter
    publishedBooksMessage() {
      // `this` 指向 vm 實例
      return this.author.books.length > 0 ? 'Yes' : 'No'
    }
  }

五、監(jiān)聽

 <input v-model="question" />

data() {
 return {
        question: '',
        answer: 'Questions usually contain a question mark. ;-)'
      }
},
watch: {
      // 每當 question 發(fā)生變化時，該函數(shù)將會執(zhí)行
      question(newQuestion, oldQuestion) {
        if (newQuestion.indexOf('?') > -1) {
          this.getAnswer()
        }
      }
    },
methods: {
      getAnswer() {
        this.answer = 'Thinking...'
        axios
          .get('https://yesno.wtf/api')
          .then(response => {
            this.answer = response.data.answer
          })
          .catch(error => {
            this.answer = 'Error! Could not reach the API. ' + error
          })
      }
    }