指令（是一种特殊的自定义行间属性）
1、指令的职责就是当其表达式的值改变时相应的将某些行为应用到DOM上，在vue中，指令以V-开头
html:
<div id="demo">
<span v-bind:customId="id"> {{message}}</span> // 渲染
</div>
js:
let obj={
message:"hello,vue!",
id:"123"
}
var vm=new Vue({
el:"#demo",
data:obj
});
2、内置指令
v-on：绑定事件监听器，简写为“@”
v-bind：动态的绑定数据，简写为 “：”
详情查看API....
模板
1、html模板（基于DOM的模板，模板都是可解析的有效的HTML）
插值
① 文本插值 {{value}} — 替换实例上的属性值，当值发生改变时，插值内容处会自动更新；
② 原生的html：双大括号输出的是文本，不会解析html
html:
<div id="demo">
<div v-html='html'>{{}}</div>
<div>
js:
let data={
html:"hello,Vue!"
}
new Vue({
el:"#demo",
data:data
})
③ 属性：使用v-bind进行绑定，可以响应变化
④ 使用javascript表达式：写简单的表达式 如{{true？‘yes’：‘no’}}、{{1+2}}
2、字符串模板（template字符串）_推荐用这种
html:
<div id="demo">
<span>{{message}}</span>
</div>
js:
let data={
message:"我们"
}
var str = '<div>hello，{{message }}</div>' // 新的模板，只能有一个html标签，可以嵌套，不能并列
new Vue({
el:"#demo",
data:data,
template:str // 权限更大一些，会把原来的模板内容替换掉
})
注意：只能有一个根节点 ；
ES6语法中提供一个超级字符串的方式（`:功能键1旁边 ）如：`<div>hello，{{message }}</div>` 这种方式可以换行
② 将html结构写在一对script标签中，设置type=“x-template”；
html：
<div id="demo">
<span>{{message}}</span>
</div>
<script type="x-template" id="temp">
<div>hello</div>
</script>
js:
let data={
message:"我们"
};
new Vue({
el:"#demo",
data:data,
template:"#temp"
});
注意：片段-复用性差
3、模块 - render 函数 （一般用在组件）
render选项对象的属性
createElement（标签名,[数据对象]，子元素）；
style：
.bg{background: red;}
html：
<div id="demo"></div>
js:
let obj={}
var vm=new Vue({
el:"#demo",
data:obj,
render(createElement){
return createElement(
"ul", { // :{ 对象 }
class:{bg:true}, // 绑定 class ：{class名：true / false} true显示 false 隐藏
style:{fontSize:"50px"}, // 绑定样式
attrs:{abc:"mi"}, // 添加行间属性
domProps:{innerHTML:"<li>我是谁</li>"}, // DOM元素属性（权重高）
on:{} // 绑定事件
},
[ //子元素
createElement("li",1),
createElement("li",2),
createElement("li",3)
]
);
}
});
网友评论