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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

Go-指针、传值与传引用、垃圾回收

要点 Go使用的*、&、new()这些运算符,和C++的用法完全一样。 有传值和传引用/传地址的概念,和C++一样。 Go没有new对应的delete操作,而是...

3325
来自专栏IT派

Python爬虫库-Beautiful Soup的使用

Beautiful Soup是一个可以从HTML或XML文件中提取数据的Python库,简单来说,它能将HTML的标签文件解析成树形结构,然后方便地获取到指定标...

1413
来自专栏JavaEdge

后端开发必备JQuery常用知识点jQuery.each(object, [callback])1 筛选2 属性3 文档处理4 回调函数

向每个匹配的元素内部追加内容。 这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似。

893
来自专栏Golang语言社区

go 切片使用小结

最新项目使用go语言开发,因此有机会结识了go语言。在写代码时,无意间发现了同事代码的一个bug。今天拿来一起学习一下。 首先go语言有个强大的基本数据结构,那...

3378
来自专栏JAVA后端开发

vue解决字段类型为数字导致单选不正确的问题

最近在研究vue,也试着写一些Vue页面。 vue中,我返回一个值,"sex":0, 单选框代码为

6494
来自专栏小程序的道路

小程序渲染

在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。通过遍历数据,将数据展示,类似vue中的 v-for。 wx:for-...

1522
来自专栏北京马哥教育

Python爬虫库-BeautifulSoup的使用

Beautiful Soup是一个可以从HTML或XML文件中提取数据的Python库,简单来说,它能将HTML的标签文件解析成树形结构,然后方便地获取到指定标...

960
来自专栏无所事事者爱嘲笑

vue要点记录(待更新)

1683
来自专栏SHERlocked93的前端小站

JS 活学活用正则表达式

网上的帖子大多深浅不一,甚至有些前后矛盾,在下的文章都是学习过程中的总结,如果发现错误,欢迎留言指出~

2952
来自专栏GreenLeaves

JavaScript之共享onload

我们知道,当我们将JS代码脚本放到<head></head>标签之间时,这是的js代码加载要先于DOM加载,而我们往往会在JS代码脚本中写一些获取DOM元素的代...

1918

扫码关注云+社区

领取腾讯云代金券