vue.js内部指令解析
vue.js内部指令解析
npm n install live-server -g
{{message}}
var app=new vue({ el:'#app', data:{ message:'hello vue!' } }) //此为vue.js的基本模板
v-if&v-else&v-show
设置display，是否隐藏
登陆成功
请登录
v-if为true则执行登陆成功，为false显示请登录
v-show为true，就设置display，v-show为false就设置隐藏
v-for
{{item}}
v-for将显示sortitem.length个
v-text
var app=new vue({ el:'#app', data:{ message:'hello vue!', msghtml:'
hello vue!
' } })
v-text就是要显示的纯文本
v-html是要显示的html标签
v-on:click
本场比赛得分： {{count}}加分减分
methods:{
jiafen:function(){
this.count++;
},
jianfen:function(){
this.count--;
}
}
v-on绑定事件，函数卸载methods中
v-model
v-model
v-model.lazy
v-model.number
v-model双向绑定，input输入框会改变message值，
v-model.lazy省略空格，多个空格识别成一个
v-model.number先输入数字就只能识别数字
v-bind
jishupang
1、绑定classa
2,绑定class的判断
3,绑定class的数组
4,绑定class的3元判断
5、绑定style
6、用对象绑定style样式
var app=new vue({ el:'#app', data:{ imgsrc:'https://ang.com/wp-content/uploads/2018/02/bbbb.jpg', url:'https://jspang.com/category/learn/vue2/', classname:'classa', classa:'classa', classb:'classb', isok:false, styleobject:{ fontsize:'24px', color:'green' } } })
动态绑定src的值，v-bind:src,缩写:src
3,绑定class的数组绑定两个类值 6、用对象绑定style样式绑定style的对象
其他指令
[v-cloak] {
display: none;
}
{{message}}
{{ message }}
{{message}}
{{message}}
{{message}}
这时并不会输出我们的message值，而是直接在网页中显示{{message}}
v-cloak指令
在vue渲染完指定的整个dom后才进行显示。它必须和css样式一起使用.
v-once指令
在第一次dom时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。