VUE 入门基础(3)

三,模板语法

  Vue将模板编译成虚拟DOM渲染函数,结合响应系统,在应用状态改变时,vue能够智能地计算出重新渲染组件的最小代价并DOM操作上。

  插值,文本

    数据绑定常见的形式就是使用“Mustache”语法(双大括号)的文本插值:

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

    通过使用v-once 指令执行一次性的插入值,当数据改变时,插值处的内容不会更新,会影响到该节点上的所有数据绑定。

      <span v-once>This will never change: {{msg}}</span>

  HTML

    双大括号会将数据解释为纯文本,而非 HTML 。为了输出真正的 HTML ,你需要使用 v-html 指令:

    属性

      Mustache 不能在HTML 属性中使用,应使用v-bind 指令

        <div v-bind:id=“dynamicId”></div>

      这对布尔值的属性也有效  如果条件被求职为false 的话该属性会被移除

        <button v-bind:disavled=“someDynamicCondittion”></button>

      使用JavaScript 表达式

      所有的数据绑定, Vue.js 都提供了完全的 JavaScript 表达式支持

        {{ number 1 }}

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

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

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

    指令

    指令是带有v- 前缀的特殊属性,指令属性的值预期是单一JavaScript表达式,指令的职责就是当其表达式的值改变时相应地将某些行为应用到DOM 上。

    如  <p v-if=”seen”>Now you see me</p>

    If指令将根据表达式 seen 的值的真假来移除/插入<p> 元素

    参数

    一些指令能接受一个参数,在指令号以冒号指明,v-bind 指令被用来响应的更新html属性。

      <a v-bind:href=“url”></a>

    在这里href 是参数,告知v-hind 指令将元素的href 属性与表达式 url 的值绑定。

    修饰符

      修饰符(Modifiers) 是以半句号. 指明的特殊后缀,用于指出一个指定应该以特殊的方式绑定,如  .prevent 修饰符告诉v-on 指令对于除非的时间调用 event.preventDefault();

       <form v-on:submit.prevent=“onSubmit”></form>

    过滤器

      Vue 允许自定义过滤器,被用作一些常见的文本格式,过滤器应该被添加在mustache 插值的尾部,由管道符指示。

        {{message | capitalize}}

        {{message | capitalize}}

        <div v-bind:id="rawId | formatId"></div>

    过滤器函数总接收表达式的值作为第一个参数

      New Vue({

          filters: {

            capitalize: function(value) {

              If (!value) return ‘ ’

              Value = value.toString()

              return value.charAt(0).toUp

            }

          }

      })

   过滤器可以串联:

    {{message | filterA | filterB}}

  过滤器是JavaScript 函数,因此可几首参数

    {{message | filterA(‘arg1’,’arg2’)}}

  字符串 'arg1' 将传给过滤器作为第二个参数, arg2 表达式的值将被求值然后传给过滤器作为第三个参数

  缩写

    v- 前缀在模板中是作为一个表示vue 特殊属性的明显标示,当你使用 Vue.js 为现有的标记添加动态行为时,它会很有用,但对于一些经常使用的指令来说有点繁琐

  v-bind 缩写

        完整语法

     <a v-bind:href=‘url’></a>

       缩写

    <a :href=“url”></a>

    v-on 缩写

      完整语法

    <a v-on:click=“doSomething”></a>

     缩写

    <a @click=“doSomething”</a>


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361290.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SVG 使用

SVG即Scalable Vector Graphics可缩放矢量图形&#xff0c;使用XML格式定义图形&#xff0c; 主要优势在于可缩放的同时不会影响图片的质量。 SVG 在html 中常用的方法 1.使用<img>元素来嵌入SVG图像 <img src”http://www.w3school.com.cn/svg/rect1.svg” width”…

超越JAX-RS规范:Apache CXF搜索扩展

在今天的帖子中&#xff0c;我们将超越JAX-RS 2.0规范&#xff0c;并探索Apache CXF &#xff08;流行的JAX-RS 2.0实现之一&#xff09;为REST服务和API开发人员提供的有用扩展。 特别是&#xff0c;我们将讨论使用OData 2.0查询过滤器子集的搜索扩展。 简而言之&#xff0c;…

阿里巴巴使命、愿景、价值观、绩效管理中的六大价值观、

阿里巴巴的使命 让天下没有难做的生意 阿里巴巴的愿景 分享数据的第一平台幸福指数最高的企业“活102年”阿里巴巴的价值观 我们坚持“客户第一、员工第二、股东第三”。 阿里巴巴的六脉神剑&#xff08;绩效管理中的六大价值观&#xff09; 公司的“六脉神剑” 客户第一&#…

Angularjs基础(十)

ng-blur       描述&#xff1a;规定blur 事件的行为       实例&#xff1a;当输入框失去焦点的(onblur)时执行表达式&#xff1a;         <input ng-blur"count count 1" ng-init"count0"/>         <h1>{{co…

在命令行上操作JAR,WAR和EAR

尽管Java IDE和许多图形工具使查看和操作Java归档文件&#xff08;JAR&#xff0c;WAR和EAR&#xff09;文件的内容比以往更加容易&#xff0c;但有时我还是更喜欢使用命令行jar命令来完成这些任务。 当我必须重复做某事或作为脚本的一部分来做时&#xff0c;尤其如此。 在本文…

C#语言使用多态(接口与override) ——帮您剔除对面向对象多态性的疑惑

多态是面向对象编程中三大机制之一,其原理建立在"从父类继承而来的子类可以转换为其父类"这个规则之上,换句话说,能用父类的地方,就能用该类的子类.当从父类派生了很多子类时,由于每个子类都有其不同的代码实现,所以当用父类来引用这些子类时,同样的操作而可以表现出…

Java如何以及为什么使用Unsafe?

总览 sun.misc.Unsafe至少在Java 1.4&#xff08;2004&#xff09;中就已经存在于Java中。 在Java 9中&#xff0c;不安全将与许多其他供内部使用的类一起隐藏。 以提高JVM的可维护性。 尽管仍不确定究竟将取代Unsafe到底是什么&#xff0c;但我怀疑将取代Unsafe不仅仅是一件事…

Angularjs基础(三)

AngularJS ng-model 指令     ng-model 指令用于绑定应用程序数据到HTML 控制器&#xff08;input,select,textarea&#xff09;的值ng-model指令     ng-model指令可以将输入域的值与AngularJS 创建的变量绑定。       实例&#xff1a;         <di…

ASP.NET MVC的生命周期与网址路由

网址路由&#xff08;Routing&#xff09;在ASP.NET MVC中有两个主要用途&#xff0c;一个用途是匹配通过浏览器传来的HTTP请求&#xff0c;另一个用途则是将适当的网址返回浏览器。 首先我们来看下第一个用途&#xff0c;也就是匹配通过浏览器传来的HTTP请求。 客户端对ASP.NE…

ecshop分页类assign_pager分析和扩展

ecshop分页类assign_pager分析和扩展,我们前面的文章中介绍过ecshop ajax分页&#xff0c;他的基础都是简单单一的分页。如果我们要在ecshop分页里面传入自己的参数&#xff0c;你就必须对ecshop的assign_pager分页函数进行系统的认识和分析。 首先我们看category.php的ecshop分…

NEC css规范

CSS规范 - 分类方法 SS文件的分类和引用顺序 通常&#xff0c;一个项目我们只引用一个CSS&#xff0c;但是对于较大的项目&#xff0c;我们需要把CSS文件进行分类。 我们按照CSS的性质和用途&#xff0c;将CSS文件分成“公共型样式”、“特殊型样式”、“皮肤型样式”&#…

JDK 8中的流驱动的集合功能

这篇文章介绍了JDK 8的应用–引入了带有集合的 流 &#xff0c;以更简洁地完成通常需要的与集合相关的功能。 在此过程中&#xff0c;将演示并简要说明使用Java Streams的几个关键方面。 请注意&#xff0c;尽管JDK 8 Streams通过并行化支持提供了潜在的性能优势&#xff0c;但…

知识汇集

Oracle中锁介绍&#xff1a;http://space.itpub.net/26961876/viewspace-731300转载于:https://www.cnblogs.com/yaohonv/archive/2012/08/18/tech-col.html

jquery mobile 移动web(5)

有序列表   <div data-role"content">     <ol data-role"listview" data-theme"g">       <li><a href"#"> List 1</a></li>       <li><a href"#"> L…

cjmx:JConsole的命令行版本

当监视正在运行的Java应用程序时&#xff0c;JConsole是一个很好的工具。 但是&#xff0c;当无法使用JConsole直接连接到JVM&#xff08;例如&#xff0c;由于网络限制&#xff09;并且无法进行SSH隧道传输时&#xff0c;那么拥有命令行版本的JConsole会很棒。 jcmx是JConsol…

Android中SQLiteDatabase操作【附源码】

像我们做的很多应用程序及网站一样&#xff0c;基本都是对数据库进行增删改查来实现相应的功能。那么Android开发也一样&#xff0c;不过由于在移动客户端应用&#xff0c;所以不会像sql server、mysql那么复杂&#xff0c;Android应用程序支持本地数据库&#xff0c;SQLiteDat…

移动设备HTML5页面布局

在HTML5标准添加的新元素中&#xff0c;用于常见页面结 构的包括header footer footer nav aside aside article section hgroup 。 下面简单介绍一下这个元素&#xff1a; 1.header header>元素定义文档的页面组合&#xff0c;通 常是一些引导和导航信息&#xff0c;标签…

Hazelcast入门指南第5部分

这是我撰写的有关Hazelcast的一系列文章的延续。 我强烈建议您阅读其他内容&#xff1a; 第1 部分 &#xff0c; 第2 部分 &#xff0c; 第3 部分和第4部分 。 让人一见倾心的东西&#xff1f; 这篇文章中将没有Hazelcast专用代码。 让我重复一遍。 这篇文章中将没有Hazelcast…

【BEV感知算法概述——下一代自动驾驶感知算法】

文章目录 BEV感知算法概念BEV感知算法数据集介绍BEV感知算法分类BEV感知算法的优劣小结 BEV感知算法概念 Bird’s-Eye-View&#xff0c;鸟瞰图&#xff08;俯视图&#xff09;。BEV感知算法存在许多的优势。 首先&#xff0c;BEV视图存在遮挡小的优点&#xff0c;由于视觉的透…

jquery鼠标事件

click()   为点击事件绑定一个事件处理函数&#xff0c;或者触发元素点击事件。   .click( handler(eventObject) )     handler(eventObject)       每次事件触发时候执行的函数。   .click([eventData],handler(eventObject))     eventData      …