鸩羽千夜

04.模板

goer ... 2022-01-06 Vue
  • Javascript
  • Vue
 大约 2 分钟
模板语法

[toc]

# 模板

Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

# 插值

文本插值：使用“Mustache”语法 (双大括号) 的文本插值：

<h2>{{msg}}</h2>
1

(v-once 指令)，插入一次后值不会变了

<h2 v-once>{{msg}}</h2>
app.msg = '-----vue----'; 不变
1
2

原始html：双大括号会将数据解释为普通文本，为了输出真正的 HTML，你需要使用v-html 指令：

<div id="app">
    <h2>{{msg}}</h2>
    <p v-html="test">htmlVue</p> // 变为html输出
</div>

<script src="../script/vue.js"></script>
<script>
    new Vue({
    el:'#app',
    data:{
    msg:'hello vue!',
    test:'<span style="color:blue">vue</span>',
    }
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

动态绑定属性：v-bind:class="abc"

<!-- 加id属性,box变量--!>
<div v-bind:id="box">123</div>
data:{
	box:'color',
}
//变为：
<div id="color">123</div>
1
2
3
4
5
6
7

javascript表达式

{{number + 1}}

//三元运算符
{{ ok ? 'YES' : 'NO' }}
//复杂函数运用   分割为数组，  排序       转换为字符串
{{ message.split('').reverse().join('') }}
1
2
3
4
5
6
<div id="app">
    <h1>{{msg}}</h1>
    <h2>{{num +5 -1}}</h2>
    <div>{{ flag ? 'yes' : 'no'}}</div>
    <div>{{str.split('').reverse().join('')}}</div>
</div>

<script src="../script/vue.js"></script>
<script>
	new Vue({
        el:'#app',
        data:{
        msg:'hello vue !',
        num:1,
        flag:true,
        str:'vue good',
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 指令

v- 前缀的特殊 attribute

// v-if if语句
<p v-if="seen">现在你看到我了</p>
data:{
	seen:true,  //true显示， false不显示
}
1
2
3
4
5
// v-bind 元素属性
<a v-bind:href="url">vue</a>
data:{
  url:'https://www.baidu.com',
}
1
2
3
4
5

注意：v-bind:class ---> :class

​ v-bind:key ----- :key

# 修饰符

修饰符 (modifier) 是以半角句号 .用于指出一个指令应该以特殊方式绑定。

// 这种事件冒泡和事件捕获
<div id="app">
    <h1>{{msg}}</h1>
    <p @click="con1">aaaa
        <span v-on:click="con2">bbbbb</span>  //点击2直接执行两个函数
    </p>
</div>


<script src="../script/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'hello vue',
        },
        methods:{
            con1(){
                console.log('aaa');
            },
            con2(){
                console.log('bbb');
            }
        }
    });
 //所以就加修饰符 v-on:click.stop="con2"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

.stop()修饰符，当前事件执行完就停止