zoukankan      html  css  js  c++  java
  • 003 Vue 的基本语法

    [A] mustach语法

      mustache语法,也称为插值语法

        使用方法

          1. 在{{变量名}}中加入变量,即可在界面中直接替换成变量对应的值

          2. 在{{表达式}}中加入表达式,如:

             {{name + " " + age}}, {{counter * 2}}

    [B] v-once

        行内属性,表示该标签内的变量生产一次后, 就不会再被改变

      该指令后面不需要跟任何表达式(如之前的v-for后面是有表达式的)

      该指令表示元素和组件只渲染一次,不会随着数据的改变而改变。

        如:<div v-once>我的名字是:{{msg}}</div>

    [C] v-html

        有时候,我们的数据是后端返回的数据,可能是一段HTML代码,这是我们可以通过v-html直接渲染出来,这是{{}}无法实现的

      <div v-html="url"></div>    // 返回:百度一下

      <div>{{url}}</div>          // 返回<a href="www.baidu.com">百度一下</a>

    [D] v-text

      行内属性,效果和mustache很相似,也是用于将数据展示在界面上

      <h2 v-text="text"></h2>     // 改标签被替换成变量text的内容

      不够灵活,很少用

               

    [E] v-pre

      行内属性,表示该标签内的内容不被解析,就讲标签内的内容原封不动的展示在界面上

      <h2 v-pre>{{msg}}</h2>      // 返回{{msg}}

      应用很少

    [F] v-cloak

      cloak 斗篷

                    示例:

                        <div id="app">

                            {{msg}}

                        </div>

                        new Vue({

                            el: "#app",

                            data: {

                                msg: "哈哈",

                            },

                        })

      根据从上往下的执行顺序,页面上首先会显示{{msg}},然后vue被解析之后,页面显示为"哈哈".实际上这个过程很快,我们看不到{{msg}}

      v-cloak添加到行内之后,在vue渲染之前,会存在,vue渲染之后这个行内属性会被清除掉

      利用这个属性,我们可以设置渲染时前的样式,渲染之后自动消失

  • 相关阅读:
    Module build failed: Error: Cannot find module 'node-sass'报错问题
    vue element upload
    vue-element-table 分页选中
    两种倒计时
    【LOJ #6076】「2017 山东一轮集训 Day6」三元组(莫比乌斯反演 / 三元环计数)
    【LOJ #6075】「2017 山东一轮集训 Day6」重建(DP)
    【2020省选模拟】题解
    【LOJ #6074】「2017 山东一轮集训 Day6」子序列(矩阵乘法)
    【LOJ #6073】「2017 山东一轮集训 Day5」距离(主席树 / 树链剖分)
    【LOJ #6072】 「2017 山东一轮集训 Day5」苹果树(容斥 / 搜索 / 矩阵树定理)
  • 原文地址:https://www.cnblogs.com/carreyBlog/p/13328370.html
Copyright © 2011-2022 走看看