文本渲染之3种方式
1.{{}}：插值表达式 弊端：会出现页面闪烁问题
v-text：把vue实例中的内容当作纯文本，显示在浏览器
v-html：把vue实例中的内容进行渲染后，浏览器会再次执行
文本渲染{{msg}}
let vm = new Vue({
el:'#app',
data:{
msg:'msg1111',
msg2:'msg2222',
msg3:'msg3333',
}
});
属性绑定: v-bind：(v-bind可以省略，直接写 ： )
属性绑定
let vm = new Vue({
el:'#app',
data:{
imgurl:'img/亚索.jpg',
title:'憨包包',
flag:true,
}
})
样式绑定、三元运算符
：三元运算符使用样式
样式绑定.fontSize{
font-size: 30px;
}
.backColor{
background-color: aquamarine;
}
.redcolor{
color: red;
}
.bluecolor{
color: blue;
}
样式绑定
三元运算符
let vm = new Vue({
el:'#app',
data:{
style1:'fontSize',
style2:'backColor',
styleFlag:true,
isFlag:true,
red:'redcolor',
blue:'bluecolor'
}
});
控制台可以进行相应的更改 true false 属性
事件绑定
v-on-事件名称
@事件名称
事件处理{{count}}
调用无参方法
调用有参方法
let vm = new Vue({
el:'#app',
data:{
}，
methods:{
// 方法名(){}
fun(){
console.log("无参方法");
},
fun1(i){
console.log(i);
},
}
});
冒泡事件
stop：阻止事件冒泡
在进行阻止时，最外边的事件可以不用写stop，自动阻止
prevent：阻止默认事件(例如：提交事件)
once：只触发一次
111
222
333
提交
hello{{message}}
let vm = new Vue({
el:'#app',
data:{
message:'vue.js',
},
methods:{
alert1(){
alert(1);
},
alert2(){
alert(2);
},
alert3(){
alert(3);
},
sub(){
console.log("组织默认事件");
},
addInfo(){
this.message = this.message+"!";
}
}
})
