0

0

Vue.js中的组件与模板探讨

黄舟

黄舟

发布时间:2017-10-28 09:29:28

|

1736人浏览过

|

来源于php中文网

原创

摘要:

指令是Vue.js中一个重要的特性, 主要提供了一种机制将数据的变化映射为DOM行为。 那什么交数据的变化映射为DOM行为, Vue.js是通过数据驱动的, 所以我们不会直接去修改DOM结构, 不会出现类似$('ul').append('

  • one
  • ')这样的操作, 当数据变化时,指令会一句设定好的操作对DOM进行修改, 这样就可以只关注数据的变化, 而不用去管理DOM的变化和状态,

    Vue的内置指令

    1. v-bind

    v-bind主要用于绑定DOM元素属性(attribute),

    立即学习前端免费学习笔记(深入)”;

    即元素属性实际的值是有vm实例中的data属性提供的。

    例如:

    
    
    
      
      Vue的指令
      
    
    
    
    

    {{message}}

    v-bind可以简写为“:”,

    上述例子可以简写为

    实现效果如下:

     

    2. v-on

    绑定事件监听器,简写为@。

    昨天我们也用过,我们简写一下看一下效果

    
    
    
      
      Vue的指令
      
    
    
      
      

    {{message}}

    效果如下:

    3.v-html

    v-html,参数类型为string,

    作用为更新innerHTML,

    接受的字符串不会进行编译等操作,

    按普通HTML处理

    代码如下

    
    
    
      
      Vue的指令
      
    
    
    
    

    实现效果如下

    更多内置指令请查询官网:Vue.js指令

    模板

    html模板

            基于DOM的模板,模板都是可解析有效的html

    插值

    文本:使用“Mustache”语法(双大括号){{value}}

        作用:替换实例上的属性值,

    动态WEB网站中的PHP和MySQL:直观的QuickPro指南第2版
    动态WEB网站中的PHP和MySQL:直观的QuickPro指南第2版

    动态WEB网站中的PHP和MySQL详细反映实际程序的需求,仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法,让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能,对常用的、强大的包

    下载

        当值改变时,插值内容就会自动更新

    原生的html:双大括号输出的是文本,不会解析html

    属性:使用v-bind进行绑定,可以响应变化

    使用JavaScript表达式:可以写简单的表达式

    字符串模板

    template字符串

            template选项对象的属性

            模板将会替换挂在元素。挂在元素的内容都将被忽略。

    代码如下

    
    
    
      
      template模板
      
    
    
      
      

    有木有发现什么惊奇的变化

            根节点只能有一个

            将html结构写在一对script标签中,设置type="X-template"

    
    
    
      
      template模板
      
    
    
      
      

    vue

    实现效果如下:

    写在script标签中,还是比较局限,

    如果别的文件也是这个结构的时候,

    这个就不能重复使用。

    模板render函数

    render函数

      render 选项对象的属性

      createElement(标签名,{数据对象},[子元素]);

      子元素为文本或者数组

    我们还是来一段代码演示

    
    
    
      
      render函数
      
      
    
    
      

    实现效果如下

    总结

    热门AI工具

    更多
    DeepSeek
    DeepSeek

    幻方量化公司旗下的开源大模型平台

    豆包大模型
    豆包大模型

    字节跳动自主研发的一系列大型语言模型

    通义千问
    通义千问

    阿里巴巴推出的全能AI助手

    腾讯元宝
    腾讯元宝

    腾讯混元平台推出的AI助手

    文心一言
    文心一言

    文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

    讯飞写作
    讯飞写作

    基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

    即梦AI
    即梦AI

    一站式AI创作平台,免费AI图片和视频生成。

    ChatGPT
    ChatGPT

    最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

    相关专题

    更多
    C++ 设计模式与软件架构
    C++ 设计模式与软件架构

    本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

    7

    2026.01.30

    c++ 字符串格式化
    c++ 字符串格式化

    本专题整合了c++字符串格式化用法、输出技巧、实践等等内容,阅读专题下面的文章了解更多详细内容。

    7

    2026.01.30

    java 字符串格式化
    java 字符串格式化

    本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

    1

    2026.01.30

    python 字符串格式化
    python 字符串格式化

    本专题整合了python字符串格式化教程、实践、方法、进阶等等相关内容,阅读专题下面的文章了解更多详细操作。

    1

    2026.01.30

    java入门学习合集
    java入门学习合集

    本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

    20

    2026.01.29

    java配置环境变量教程合集
    java配置环境变量教程合集

    本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

    16

    2026.01.29

    java成品学习网站推荐大全
    java成品学习网站推荐大全

    本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

    18

    2026.01.29

    Java字符串处理使用教程合集
    Java字符串处理使用教程合集

    本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

    3

    2026.01.29

    Java空对象相关教程合集
    Java空对象相关教程合集

    本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

    6

    2026.01.29

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    React 教程
    React 教程

    共58课时 | 4.3万人学习

    TypeScript 教程
    TypeScript 教程

    共19课时 | 2.6万人学习

    Bootstrap 5教程
    Bootstrap 5教程

    共46课时 | 3.1万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号