Vue是什么

是一套用于构建用户界面的渐进式框架, 被设计为可以自底向上逐层应用,核心库只关注视图层，易于上手

一、声明式渲染 指令学习

1、 {{ }}

传值

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

2、 v-bind

绑定元素的 attribute

<span v-bind:title="message">
    hello ,word
</span>
<!-- 缩写 -->
<a :href="url"> ... </a>
<!-- 动态参数的缩写 -->
<a :[key]="url"> ... </a>

3、 v-on

添加事件监听器:

<button v-on:click="reverseMessage">点击</button>
// 含有修饰符的用法
// 对于触发的事件调用 event.preventDefault()
<form v-on:submit.prevent="onSubmit">...</form> 
<!-- 缩写 -->
<a @click="doSomething"> ... </a>
<!-- 动态参数的缩写 -->
<a @[event]="doSomething"> ... </a>

4、v-model

表单输入和应用状态之间的双向绑定:

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

5、v-if

控制切换一个元素是否显示

<span v-if="seen">现在你看到我了</span>

5、v-for

绑定数组的数据渲染一个项目列表

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

6、v-once

一次性地插值，当数据改变时，插值处的内容不会更新

<span v-once>这个将不会改变: {{ msg }}</span>

7、v-html

双大括号会将数据解释为普通文本，而非 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')

二、组件学习

• 定义组件

const TodoItem = {
  props: ['todo'], // 组件接收的参数
  template: `<li>{{ todo.text }}</li>` // 组件具体内容
}

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>
     <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，稍后再
      作详细解释。
    -->
    <todo-item
      v-for="item in groceryList"  // 组件内容需要循环
      v-bind:todo="item" // 传参数给组件
      v-bind:key="item.id" // 循环内的key值
    ></todo-item>
  </ol>
</div>

三、生命周期学习

image.png

四、计算属性学习

<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'
    }
  }

五、监听

 <input v-model="question" />

data() {
 return {
        question: '',
        answer: 'Questions usually contain a question mark. ;-)'
      }
},
watch: {
      // 每当 question 发生变化时，该函数将会执行
      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
          })
      }
    }