指令:
是一种特殊的自定义行间属性
指令的职责就是当其表达式的值改变时响应地将某些行为应用到DOM上
在vue中,指令****以v-开头。
内置指令(可以去看API)
v-bind:动态绑定数据,简写为: v-on:绑定事件监听器 简写为@
。。。。。
模板:
html模板:
基于DOM的模板,浏览器可解析的有效的html都可以作为模板。
插值:文本插值:{{}}
作用:替换实例上的属性值,当值改变时,插值内容处会自动更新
原生的Html:双大括号输出的是文本,不会解析html
属性:使用v-bind进行绑定
使用js表达式 但是不要写语句。(最好不用。。)
*****把模板里边的逻辑抽出来放到另外一个地方去写(专门计算属性的),不要在模板里边做过多的逻辑处理。你只需要单纯的在模板里边渲染某一个属性!!!
字符串模板:
template字符串:(会替换Html模板 权重比较高)
template选项对象的属性
模板将会替换**挂载的元素 挂载元素的内容将会被忽略
根节点只有一个
将html结构写在一对script标签中,设置type="x-template"
var vm = new Vue({
el:
data:
template:
});
字符串拼接 正常的方式是不能换行的, es6提供了超级字符串就可以了。
模板-render函数:(很接近编译器了) (key,vlaue)形式
自己创造一些函数。。
var vm = new Vue({
el:
data:
render(createElement){
return createElement(
"ul",
{(添加属性)
class(没懂27:30秒)
class:{
bg:true
},(对象的形式)
attr:{
abc:"miaov"(添加属性)
} ,
domProps:{
innerHTML:"<li>ssss</li>"
}
}
[
createElement("li",1),
createElement("li",2),
]
);
}
});
是一种特殊的自定义行间属性
指令的职责就是当其表达式的值改变时响应地将某些行为应用到DOM上
在vue中,指令****以v-开头。
内置指令(可以去看API)
v-bind:动态绑定数据,简写为: v-on:绑定事件监听器 简写为@
。。。。。
模板:
html模板:
基于DOM的模板,浏览器可解析的有效的html都可以作为模板。
插值:文本插值:{{}}
作用:替换实例上的属性值,当值改变时,插值内容处会自动更新
原生的Html:双大括号输出的是文本,不会解析html
属性:使用v-bind进行绑定
使用js表达式 但是不要写语句。(最好不用。。)
*****把模板里边的逻辑抽出来放到另外一个地方去写(专门计算属性的),不要在模板里边做过多的逻辑处理。你只需要单纯的在模板里边渲染某一个属性!!!
字符串模板:
template字符串:(会替换Html模板 权重比较高)
template选项对象的属性
模板将会替换**挂载的元素 挂载元素的内容将会被忽略
根节点只有一个
将html结构写在一对script标签中,设置type="x-template"
var vm = new Vue({
el:
data:
template:
});
字符串拼接 正常的方式是不能换行的, es6提供了超级字符串就可以了。
模板-render函数:(很接近编译器了) (key,vlaue)形式
自己创造一些函数。。
var vm = new Vue({
el:
data:
render(createElement){
return createElement(
"ul",
{(添加属性)
class(没懂27:30秒)
class:{
bg:true
},(对象的形式)
attr:{
abc:"miaov"(添加属性)
} ,
domProps:{
innerHTML:"<li>ssss</li>"
}
}
[
createElement("li",1),
createElement("li",2),
]
);
}
});