(32)Vue模板语法

模板语法

文本：

<span>Message: {{ msg }}</span>

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

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

v-html 指令

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

<div v-bind:id="dynamicId"></div>

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

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

v-if 指令将根据表达式 seen 的值的真假来插入/移除 元素

<a v-bind:href="url">...</a>

深刻理解语义化

Web 语义化是指使用恰当语义的 HTML 标签、Class 类名等内容

HTML 为网页文档内容提供上下文结构和含义

CSS语义就是class和ID命名的语义
Class 属性作为 HTML 与 CSS 衔接的纽带，其本意是用来描述元素内容的

image.png

html语义化就是让页面的内容结构化

Web语义化是指使用恰当语义的html标签、class类名等内容，让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容

html语义化及css命名语义化
利于 SEO，便于阅读维护理解

Web标准-结构、样式和行为的分离

结构部分、样式部分和行为部分
结构部分主要包括XML标准、XHTML标准
样式标准主要是指CSS标准
行为标准主要包括DOM标准和ECMAScript标准

HTML：超文本标记语言，负责网页的结构

通常语义化HTML会使代码变的更少，使页面加载更快

语义化HTML会使HTML结构变的清晰，有利于维护代码和添加样式

提升网页的可访问性和交互操作性

提升搜索引擎优化(SEO)的效果

v-on 指令，它用于监听 DOM 事件

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

计算属性和侦听器

image.png

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'

计算属性缓存，方法，计算属性，侦听属性，计算属性的setter

<p>Reversed message: "{{ reversedMessage() }}"</p>

// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

计算属性是基于它们的响应式依赖进行缓存的

只在相关响应式依赖发生改变时它们才会重新求值

只要 message 还没有发生改变
多次访问 计算属性会立即返回之前的计算结果，而不必再次执行函数

image.png image.png

侦听属性

<div id="demo">{{ fullName }}</div>

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

image.png

当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

image.png

---

请点赞！因为你的鼓励是我写作的最大动力！

官方微信公众号

吹逼交流群：711613774

吹逼交流群