2.插值操作

1.mustache语法

mustache语法,又称胡子/胡须语法和双大括号语法,用于在文本节点中显示数据.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">

<!--  直接显示message-->
  <h2>{{message}}</h2>  
  
<!--  大括号后接普通字符串-->
  <h2>{{message}},vue</h2>
  
<!--  大括号内连接字符串-->
  <h2>{{message + ',vue'}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  //mustache:胡子/胡须,又叫双大括号语法
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好'
    }
  })
</script>
</body>
</html>

在双大括号内,我们可以做字符串的连接.需要注意的是大括号的普通字符串需要加引号,否则Vue会把普通字符串解析成data中的属性.

2.指令

除了直接使用mustache语法外,可以使用一些指令来显示数据.

2.1.v-once指令

v-once指令的作用是让mustache语法显示的数据不会随着数据的改变而刷新.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <h2>{{message}}</h2>
  <h2 v-once>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好'
    }
  })
</script>
</body>
</html>

如果我们在浏览器的控制台中输入

app.message = 'aaa'

第一个h2标签里的数据会变成'aaa',而第二个不会.

2.2.v-html指令

直接使用mustache语法来显示html代码会将html代码直接显示出来,使用v-html指令可以将html代码渲染出来

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  直接显示代码-->
  <h2>{{url}}</h2>
  
<!--  渲染成a标签-->
  <h2 v-html="url"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      url:'<a href="http://www.baidu.com">百度一下<a/>'
    }
  })
</script>
</body>
</html>

2.3.v-text指令的使用

v-text指令的作用和mustache语法的作用比较相似,用于显示数据.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  两者结果是一样的-->
  <h2>{{message}},李银河</h2>
<!--  中间的文本节点会被v-text中的数据替换-->
  <h2 v-text="message + ',李银河'">你好</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好'
    }
  })
</script>
</body>
</html>

需要注意的是如果同时使用了v-text指令和文本节点,文本节点中的数据会被v-text中的数据替换.

2.4.v-pre指令

v-pre指令和html中的pre指令比较类似,用于不进行vue解析,直接显示数据.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  进行解析后显示'你好'-->
  <h2>{{message}}</h2>
<!--  不进行解析,原封不动的显示-->
  <h2 v-pre>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好'
    }
  })
</script>
</body>
</html>
posted @ 2020-08-17 10:12  心流flux  阅读(139)  评论(0)    收藏  举报