Vuejs学习2.1 vue语法——插值语法,动态绑定属性

Vue语法

  • 插值语法
    • Mustache语法
    • v-once
    • v-html
    • v-text
    • v-pre
    • v-cloak
  • 动态绑定
    • 基本使用
    • 动态绑定class
      • 对象语法
      • 数组语法
    • 动态绑定style
      • 对象语法
      • 数组语法
    • 综合例子

首先我们需要new一个vue对象来实现对特定id得模块进行操作,el表示模块的id(为字符串),data表示用到的数据(为对象),还包含methods等等

<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:"你好"
    }
  })
</script>

表示对于对应id=app的模块进行操作

插值语法

Mustache语法

例如:{{message}},双大括号,不仅可以写变量还可以显示简单的表达式,vue会对message进行解析,如果寻找不到message将原样输出
例如:{{message+“ ”+first}},{{counter*2}},


{{message}}

运行结果如下:
在这里插入图片描述

v-once

vue是响应式(表示数据改变,界面随之改变)
如果定义了v-once界面将不随数据改变而改变

{{message}}

通过js修改数据,界面将没有变化

v-html

v-html属性表示解析HTML(对于返回值是HTML时)


{{url}}

运行结果如下:
Vuejs学习2.1 vue语法——插值语法,动态绑定属性_第1张图片

v-text

v-text相比较mustache语法具有覆盖效果


{{message}}

学习Vue

运行结果如下:
Vuejs学习2.1 vue语法——插值语法,动态绑定属性_第2张图片

v-pre

v-pre表示不会解析,只能原来形式显示


{{message}}

{{message}}

运行结果如下:
Vuejs学习2.1 vue语法——插值语法,动态绑定属性_第3张图片

v-cloak

如果解析较慢时,界面会先原样显示,直到全部解析完界面才进行跳转
v-cloak属性可以设置未解析完时显示为空,直到正常显示

<body>
<div id="app" v-cloak>
  {{message}}
</div>
<script src="../js/vue.js"></script>
<script>
  setInterval(function () {
    const app = new Vue({
      el:'#app',
      data:{
        message:"你好"
      }
    })
  },1000)
</script>
</body>

上面设置了一秒后才创建vue对象对message进行解析,但是运行时界面不会显示{{message}},而是显示为空,直到一秒后加载到界面“你好”

动态绑定

某些属性需要动态来绑定,例如:鼠标点击到按钮颜色为红色,不点击为灰色,等等一些情况,需要我们用v-bind指令来实现,v-bind的语法糖(即简写)为冒号(:)

基本使用

通过vue事例中data绑定元素的src和href属性

<body>
<div id="app">
  <img v-bind:src="imgUrl" alt="">
  <a v-bind:href="hrefUrl">百度一下</a>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:"你好",
      imgUrl:"https://images.cnblogs.com/cnblogs_com/" +
          "forget0909-Angle-Qi/1280349/o_QQ%E5%9B%BE%E7%89%8720180817111151.jpg",
      hrefUrl:"http://www.baidu.com"
    }
  })
</script>
</body>

动态绑定class

对象语法

根据bool值来判断是否添加class



{{message}}

{{message}}

(methods表示vue实例中所操作方法,v-on用来监听事件)
通过点击按钮来修改第二个h2元素的颜色

数组语法


{{message}}

动态绑定style

对象语法

{{message}}

{{message}}

Vuejs学习2.1 vue语法——插值语法,动态绑定属性_第4张图片

数组语法

{{message}}

综合例子

用来表示点击哪一个字体就显示为红色




  
  Title
  



  • {{item}}

Vuejs学习2.1 vue语法——插值语法,动态绑定属性_第5张图片

你可能感兴趣的:(Vuejs学习2.1 vue语法——插值语法,动态绑定属性)