侧边栏壁纸
博主头像
woku博主等级

成功的路上并不拥挤

  • 累计撰写 50 篇文章
  • 累计创建 13 个标签
  • 累计收到 3 条评论
vue

认识Mustache与Vue编译

woku
2022-03-07 / 0 评论 / 0 点赞 / 120 阅读 / 2,190 字

模板是什么

官方定义:

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

简单的说,模板就是一段简单的HTML字符串,是基于HTML的

在模板中写HTML是能够被浏览器和HTML解析器执行的

模板语法:template

const app = {
  data() {
    return {
      name: 'heiyg'
    }
  },
  template: `
    <div>
       <p>{{name}}</p> 
    </div>
  `
}

上面的组件实例中,template中是HTML字符串,这里就是vue中的模板

在模板中含有比标准的HTML多了一些其他的扩展功能,比如vue中的插值,修饰符,指令,自定义属性等等

这些扩展的语法,浏览器是不认识的

Vue 提供了一套模板编译系统,将这些模板最后render成浏览器能识别的HTML

渲染函数

除了使用template这种方法,还可以直接使用渲染函数,它比模板更接近编译器。

import {h} from 'vue'
const app = {
  data() {
    return {
      name: 'heiyg',
      content:'hello vue',
      dataTime:2021
    }
  },
  // template: `
  //   <div>
  //      <p>{{name}}</p> 
  //      <div>
  //         <span class="content">{{content}}</span>
  //      </div>
  //      <p>{{dataTime}}</p>
  //   </div>
  // `
  render() {
    return h(
      "div",
      {},
      [
        h('p',{},this.name),
        h('div',
          {class:'content'},
          [
            h('span',{},this.content)
          ]
        ),
        h('p',{},this.dataTime)
      ]
    )
  }

}
Vue.createApp(app).mount('#app')

h函数,第一个参数为标签名,第二个为标签的属性,第三个为标签的子元素节点

模板编译中的几个主要过程

  1. 开发人员写的template模板

  2. 分析模板得到AST树,解析vue中的表达式、插值、指令、自定义属性

  3. 虚拟 DOM 渲染函数

    作用:用对象的方式表示DOM节点之间的关系,通过对比,分析旧虚拟节点和新虚拟节点的内容是否一致,如果一致,不进行操作。从而减少操作DOM的次数

  4. 真实DOM节点

  5. render渲染

vue模板中的插值

模板中像 {{}} 这种的就称为插值,数据绑定最常见的形式

const app = {
  data() {
    return {
      name: 'heiyg'
    }
  },
  template: `
    <div>
       <p>{{name}}</p> 
    </div>
  `
}
Vue.createApp(app).mount('#app')

插值里面绑定的数据来源:(从vue的核心视图库来说)

  • 当前组件data里面的数据
  • 父组件传进来的属性值
 <script>
        const MyChild = {
            props: ['title'],
            template: `
               <div>
                 {{ title }}
                 from MyParent
               </div>
            `
        }
        const MyParent = {
            components: {
                MyChild
            },
            data() {
                return {
                    title: 'this is my title'
                }
            },
            template: `
              <h2>{{ title }}</h2>
              <my-child :title="title"></my-child>
              <button @click="changeData">更新父组件数据</button>
            `,
            methods: {
                changeData() {
                    this.title = 'this is change title'
                }
            }
        }
        let app = Vue.createApp(MyParent)
        app.mount('#app')
    </script>
  • 当数据发生变化时,本组件绑定的数据会更新,本组件的绑定的属性值会更新,在子组件中通过prop传递的数据也会更新
  • 子组件不能改变父组件传递过来的数据,只能由父组件自身来改变。(vue的单向数据流)

{{}} Mustache 标签

Mustache 是一个mustache.js库,具体的参考github官方文档

https://github.com/janl/mustache.js

使用方法:

$ npm install mustache --save
var Mustache = require('mustache');
var view = {
  title: "heiyg"
};
var outHtml = Mustache.render(
  "hello,{{title}}",
  view
)
document.getElementById('app').innerHTML = outHtml

最终页面将会把{{}}里面的内容替换成数据

0

评论区