Vue 3.x starting

<script>
  const app = Vue.createApp({
    data() {
      return { count: 4 }
    }
  })
  const vm = app.mount('#app')
  console.log(vm.count) // => 4
<script>

on-once property can not vibarate change

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

origin HTML

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

We can use this in vue

{{ number + 1 }} 
{{ ok ? 'YES' : 'NO' }} 
{{ message.split('').reverse().join('')}}
<div v-bind:id="'list-' + id"></div>

data property demo

<script>
  const app = Vue.createApp({
    data() {
      return { count: 4 }
    }
  })
  const vm = app.mount('#app')
  console.log(vm.$data.count) // => 4
  console.log(vm.count)       // => 4
  // 修改 vm.count 的值也会更新 $data.count
  vm.count = 5
  console.log(vm.$data.count) // => 5
  // 反之亦然
  vm.$data.count = 6
  console.log(vm.count) // => 6
</script>

use vm.method_name

<script>
  const app = Vue.createApp({
    data() {
      return { count: 4 }
    },
    methods: {
      increment() {
        // `this` 指向该组件实例
        this.count++
      }
    }
  })
  const vm = app.mount('#app')
  console.log(vm.count) // => 4
  vm.increment()
  console.log(vm.count) // => 5
</script>

How reflect data change to a method not a data ?

<script>
  <span :title="toTitleDate(date)">
    {{ formatDate(date) }}
  </span>
</script>

input v-model 的使用：

<div id="watch-example">
  <p>
    Ask a yes/no question:
    <input v-model="question" />
  </p>
  <p>{{ answer }}</p>
</div>

watch axios

<!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script>
  const watchExampleVM = Vue.createApp({
    data() {
      return {
        question: '',
        answer: 'Questions usually contain a question mark. ;-)'
      }
    },
    watch: {
      // whenever question changes, this function will run
      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
          })
      }
    }
  }).mount('#watch-example')
</script>

file.vue demo

响应式改变数组的值：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。

<div id="range" class="demo">
  <span v-for="n in 10">{{ n }} </span>
</div>

<select v-model="selected">
  <!-- 内联对象字面量 -->
  <option :value="{ number: 123 }">123</option>
</select>
// 当被选中时
typeof vm.selected // => 'object'
vm.selected.number // => 123

<div id="blog-posts-events-demo">
  <div v-bind:style="{ fontSize: postFontSize + 'em' }">
    <blog-post v-for="post in posts" :key="post.id" :title="title"></blog-post>
  </div>
</div>

Blog

ChuangWANG

Join Our Newsletter. No Spam, Only the good stuff.

Related