您的位置: 首页  >  文章  >  模板

模板

分类: 文章 • 2023-03-22 10:50:20

特别声明一： 本文主要学习并整理自51CTO课程《Vue.js 2.0之全家桶系列视频课程》，讲师汤小洋，跳转链接见文末。

特别声明二： 本文核心内容全部来自51CTO课程《Vue.js 2.0之全家桶系列视频课程》，本人只是照着视频课程敲了一遍代码，所以本文定义为翻译。

模板的概念：

        Vue.js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。即：模板的主要用于将DOM与Vue实例之间进行数据绑定。

数据绑定的相关概念：

  • 双向绑定：
            vue实例中的数据发生变化，对应DOM中的数据也会跟着变化；DOM中的数据发生变化，对应vue实例中的数据也会跟着变化。

  • 单向绑定：
            vue实例中的数据发生变化，对应DOM中的数据也会跟着变化；而DOM中的数据发生变化，对应vue实例中的数据不会跟着变化。

数据绑定的实现方式：

双向绑定的实现：使用v-modle。

  • 示例：
    模板
  • 使用chrome打开，效果如图：
    模板

单向绑定的实现：使用{{}}或v-text或v-html。

  • 使用{{}}：

    1. 提示：使用{{}}绑定数据时，可能会出现闪烁问题(即：在加载页面时，若vue编辑较慢，则会会直接将{{…}}显示出来，然后等vue编译完后，才会显示对应的信息)；为了解决:使用{{}}绑定时的闪烁问题，可以让{{}}配合用v-cloak和css样式一起使用。
      注：闪烁问题可见下面的操作示例，{{}}配合用v-cloak和css的使用方式可见下面的代码示例。
    2. 示例：
      模板
    3. 使用chrome打开，效果如图：
      模板

  • 使用v-text：

    1. 示例：
      模板
    2. 使用chrome打开，效果如图：
      模板

  • 使用v-html：

    1. 示例：
      模板
    2. 使用chrome打开，效果如图：
      模板

^_^ 如有不当之处，欢迎指正

^_^ 学习整理自
        51CTO课程《Vue.js 2.0之全家桶系列视频课程》讲师 汤小洋

^_^ 本文已经被收录进《程序员成长笔记(六)》，笔者JustryDeng

相关推荐