您的位置：首页 > 产品设计 > UI/UE

腾讯十天Vue.js课程之二：指令与模版

2017-04-16 15:28 363 查看

指令

什么是指令？

是一种特殊的行间属性
指令的职责就是当其表达式的值改变时，相应的将某些行为应用到DOM（文档对象模型）上。
在Vue中，指令以v-开头。

Vue.js提供了一些常用的内置指令

v-if指令
v-show指令
v-else指令
v-for指令
v-bind指令 动态地绑定数据，简写为:
v-on指令 绑定事件监听器，简写为@
v-model指令
详见点击打开链接

HTML模版

HTML模版

基于DOM的模版，模版都是可解析的有效的HTML。

插值

插值是Vue用来实现使用数据绑定的一种方式,在Vue中常用的方式如下:

文本插值

使用"Mustache"语法(双括号 {{keyName}} 语法 直接输出与键名匹配的键值),实现文本插值对数据的基本绑定: 在解析过程中Mustache标签会被相应数据对象的属性的值替换,每当这个属性变化时它也会更新.

代码段:
<div id="msg">
<p>{{msg}}</p>
</div>

<script>
var msg = new Vue({
el:"#msg",
data:{
msg:"This is a message."
}
})
</script>


如果这时通过控制台,运行:

msg.$data.msg = "This is a new message"

这时你会发现页面中的文本会跟着发生变化.

插值与数据彼此关联,数据更新引发插值更新.如果只想进行单次插值,可以向如下使用:

<span>This will never change: {{* msg}}</span>

原始HTML

使用三括号的Mustache,进行原始HTML输出(这是Mustache的语法 {{{keyName}}}会保持内容原样输出)

<div id="vueHtml">
{{{vueHtml}}}
</div>

<script>
var vueHtml = new Vue({
el:"#vueHtml",
data:{
vueHtml:"<p>这段文字会原样输出HTML代码</p>"
}
})
</script>

HTML属性:

Mustache标签( {{keyName}} 会直接输出与键名匹配的键值的特性)可以用在html属性内:

<div id="component">
<div id="item-{{id}}"></div>
</div>

<script>
var comp = new Vue({
el:"#component",
data:{
'id':"val1"
}
});
</script>
插值来自li4065的Vue深入解析-插值,绑定与指令

字符串模版

template字符串

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符串模版</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--模版-->
<div id="demo">
<span>miaov ke tang</span>
</div>
<script type="x-template" id="temp">

<div>hello{{abc}}</div>;//只能有一个根节点
</script>
<script>
//        数据
let obj = {
html: "<div>hello,miaov</div>",
abc: 1,
};
var vm = new Vue({
el: "#demo",
data: obj,
template:"#temp"//替换挂载的元素
});

</script>
</body>
</html>


模版-render函数

render函数

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符串模版</title>
<style>
.bg{
background-color: yellow;
}
</style>
<script src="js/vue.js"></script>
</head>
<body>
<!--模版-->
<div id="demo">

</div>
<script>
//        数据
let obj = {
html: "<div>hello,miaov</div>",
abc: 1,
};
var vm = new Vue({
el: "#demo",
data: obj,
render(createElement){
return createElement(
"ul",
{
class:{
bg:true
},
style:{
fontSize: "50px",
},
attrs:{
abc:"miaov"
},
domProps:{
innerHTML:"<li>我是HTML</li>"
}
},
[
createElement("li",1),
createElement("li",2),
createElement("li",3),
]
)
}
});

</script>
</body>
</html>



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                模板
                                                指令
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航