vue官方教程学习笔记 - 模板语法

悠悠 2021-09-19 06:56 396阅读 0赞

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，[直接写渲染 (render) 函数][_render_]，使用可选的 JSX 语法。

在学习之前，我们可以先了解一下，什么是DMO以及什么是虚拟DOM，可参考文章：  
[https://blog.csdn.net/yzn77/article/details/82759983][https_blog.csdn.net_yzn77_article_details_82759983]  
什么是DOM？  
HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。  
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：

![2789632-7db31e68e3db2be7.png][]

什么是虚拟DOM？  
可以理解为：用 JavaScript 将DOM节点虚拟化表示，用数据对象来呈现DOM树，虚拟DOM它可以使我们操作这块的数据对象  
如果我们使用虚拟DOM，而不是直接在代码中调用类似 .getElementById 的 DOM API 方法，操作就会像改变 JS 对象一样非常的简单省时。  
虚拟DOM的目的是将所有操作累加起来，统计计算出所有的变化后，统一更新一次DOM。

#### 插值 ####

###### 文本 ######

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

通过使用 [v-once 指令][v-once]，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：

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

###### 原始 HTML ######

> 你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 [XSS 攻击][XSS]。请只对可信内容使用 HTML 插值，**绝不要**对用户提供的内容插值。

###### 属性 ######

<div v-bind:id="dynamicId"></div>
    <button v-bind:disabled="someDynamicCondition">Button</button>

###### 使用-JavaScript-表达式 ######

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

> 模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。

###### 过滤器 ######

{
        { message | capitalize }}
    
    new Vue({
      // ...
      filters: {
        capitalize: function (value) {
          if (!value) return ''
          value = value.toString()
          return value.charAt(0).toUpperCase() + value.slice(1)
        }
      }
    })

#### 指令 ####

#### 缩写 ####

<a v-bind:href="url"></a>
    
    <a :href="url"></a>
    
    
    <a v-on:click="doSomething"></a>
    
    <a @click="doSomething"></a>

#### 示例 ####

![2789632-0ecd8b88385ed19c.gif][]

#### Code ####

<template>
      <div class="hello">
        <h1>{
        { msg }}</h1>
        <span v-once>这个将不会改变: {
        { msg }}</span><br/>
        <input v-model="msg" placeholder="测试v-once，不改变数据"/>
    
        <p>Using mustaches: {
        { rawHtml }}</p>
        <p>Using v-html directive: <span v-html="rawHtml"></span></p>
    
        <button v-bind:disabled="isButton1Disabled">Button1</button>
        <button v-bind:disabled="isButton2Disabled">Button2</button>
    
        <div v-bind:id="'message-' + msg">the txt id: "message-message"</div>
        <div>{
        { 'message'.split('a').reverse().join('.') }}</div>
        <div>Filter: {
        { 'message' | capitalize }}</div>
    
        <p v-if="seen">Now you see me</p>
        <a v-bind:href="url">www.iotzzh.com</a><br/>
        <a ref="abc" v-on:click="doSomething">click</a>
    
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: '插入文本',
          rawHtml: '<span style="color:red">This is should be red</span>',
          isButton1Disabled: true,
          isButton2Disabled: false,
          seen: true,
          url: 'http://www.iotzzh.com'
        }
      },
      filters: {
        capitalize: function (value) {
          if (!value) return ''
          value = value.toString()
          return value.charAt(0).toUpperCase() + value.slice(1)
        }
      },
    
      beforeCreate: function () {
        console.group('------beforeCreate创建前状态------')
        console.log('beforeCreate: print hello world')
      },
      created: function () {
        console.group('------created创建完毕状态------')
        console.log('created: print hello world')
      },
      beforeMount: function () {
        console.group('------beforeMount挂载前状态------')
        console.log('beforeMount: print hello world')
      },
      mounted: function () {
        console.group('------mounted 挂载结束状态------')
        console.log('mounted: print hello world')
      },
      methods: {
        doSomething: function () {
          // app.$el.style 获取dom的样式
          this.$refs.abc.style.color = 'red'
        }
      },
      beforeUpdate: function () {
        console.group('beforeUpdate 更新前状态===============》')
        console.log('beforeUpdate: print hello world')
      },
      updated: function () {
        console.group('updated 更新完成状态===============》')
        console.log('updated: print hello world')
      },
      beforeDestroy: function () {
        console.group('beforeDestroy 销毁前状态===============》')
        console.log('beforeDestroy: print hello world')
      },
      destroyed: function () {
        console.group('destroyed 销毁完成状态===============》')
        console.log('destroyed: print hello world')
      }
    }
    </script>
    
    
    <style scoped>
    h1, h2 {
      font-weight: normal;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      display: inline-block;
      margin: 0 10px;
    }
    a {
      color: #42b983;
    }
    </style>

![2789632-fb630ac1fc547fbb.png][]

![2789632-60547323fce9dc94.jpg][]

[_render_]: https://links.jianshu.com/go?to=https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fguide%2Frender-function.html
[https_blog.csdn.net_yzn77_article_details_82759983]: https://links.jianshu.com/go?to=https%3A%2F%2Fblog.csdn.net%2Fyzn77%2Farticle%2Fdetails%2F82759983
[2789632-7db31e68e3db2be7.png]: /images/20210615/4e71adbb19674aaba1b03da067afaa11.png
[v-once]: https://links.jianshu.com/go?to=https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fapi%2F%23v-once
[XSS]: https://links.jianshu.com/go?to=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FCross-site_scripting
[2789632-0ecd8b88385ed19c.gif]: /images/20210615/792eae86c190445cade971e9671cecdc.png
[2789632-fb630ac1fc547fbb.png]: /images/20210615/64acb211e0154d61b57f15249a0c936c.png
[2789632-60547323fce9dc94.jpg]: /images/20210615/13851c2d2aa14997bdadfccd71f9bd58.png