Vue组件三个部分
template:视图
script:逻辑
style:样式
模板语法
表现形式:{{语法}}
加载一个变量
export default{
name:'HelloWorld',
data: {
return: {
hello:"Hello vue"
}
}
}
输出{{hello}}出现"Hello vue"
{{“hello”}} 出现 hello
{{1+1}} 出现 2
三目运算符
{{ 0<10? ‘对的’ :‘错的’}}出现 对的
{{只能存放单行语句,不能使用if那种判断}}
v-html:渲染文本
<p v-html="hello"></p>//Hello vue //可以解析html的属性
v-text:渲染文本
<p v-html="hello"></p>//Hello vue //不可以解析html的属性,这是它俩的区别
v-bind:绑定(属性选择器,类选择器)
<style> .aa{ color:red; } </style>
<span v-bind:class="aa">aaaaaaa</span>
export default{
name:'HelloWorld',
data: {
return: {
hello:"Hello vue",
aa:"aa"
}
}
}