vue指令
在 vue
中,指令是一个带有 v-
前缀的属性,与普通属性不一样的地方是,
指令的值是用引号括起来的 表达式
,不同的指令有不同的作用,
vue内置了一些常用的指令,而且我们还可以自定义指令
。
1、内容输出指令:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内容输出指令</title>
<!--引入下载到本地的vue.js-->
<script src="js/vue.js"></script>
<style>
/* 不会显示,直到编译结束时 */
[v-cloak] {
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<!-- vue指令的写法:v-指令名称=表达式
注意:这里的表达式不是普通的字符串
-->
<div id="app" class="myApp">
<!-- 表达式的值除了可以出现内容中,也可以使用在其它位置,比如:属性。
比如,给上面的div添加calss属性,并赋值class="myAPP",
或者class="{
{myApp}}"这样写,浏览器会把花括号及里面的内容`{
{myApp}}`都当成字符串,
不能使用 `{
{}}`语法,花括号只在内容区使用,这时就需要 `指令`了.
所以上面的写法,与普通写法有冲突,页面不会受到影响。
-->
<!-- 通过 {
{
}} 我们可以很方便的中模板中输出数据,但是这种方式会有一个问题,
当页面加载渲染比较慢的时候,页面中会出现 {
{
}},vue提供了几个指令来解决这个问题,
vue指令中的表达式不需要使用 {
{
}} -->
<!-- 如下,使用vue表达式,会把结果直接返回 -->
{
{
myApp}}
{
{
txt}}
{
{
x+y}}
<h1>{
{
title}}我是大标题<h2>副标题在这里</h2></h1>
<!-- 如上,直接使用{
{
}},可以获取后面添加的内容(文本内容或者子标签),并显示到页面,
如下:
这是vue指令我是大标题
副标题在这里-->
<!--如果在浏览器控制台上修改title的值,页面上的内容会更新
app.title="有变化了"
"有变化了"
-->
<!-- v-text 指令-->
<h1 v-text="title">我是大标题<h2>我也是副标题啊</h2></h1>
<!-- 它会填充整个innerHTML,里面添加的文本内容"我是大标题"不会显示到页面,
但添加的子标签及文本内容可以显示 -->
{
{
content}}
<!--我们在data中的`<style>body{background-color:lightblue;}</style>`,
我们想去改变页面的背景色,但是为了防止xss攻击,
默认情况下输出是不会作为html解析的,上面的写法,页面上只会显示一串字符串,
而不会改变原本的样式,这种情况下,需要另一个vue的指令 `v-html` -->
<!-- v-html 指令-->
<!-- 它可以让内容作为html进行解析,如下写法,页面背景色就被改变了 -->
<p v-html="content"></p>
<!-- v-cloak 指令-->
<!-- v-cloak 需要结合css使用 -->
<p v-cloak>{
{
content}}</p>
</div>
<script>