vuejs常用指令
什么是指令呢？上面我们用到的v-model就是一个指令
Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（）。
Vue.js提供了一些常用的内置指令，接下来我们将介绍以下几个内置指令：
v-if指令
v-if是条件渲染指令，它根据表达式的真假来删除和插入元素
基本语法：
v-if=""
是一个返回布尔值的表达式，表达式可以是一个布尔属性，也可以是一个返回布尔的运算式。
男士
age:{{age}}
var vm = new Vue({
el: '#app',
data: {
age:25,
isMale:true,
}
})
v-show指令
v-show和v-if区别。
v-show不管条件是否成立，都会渲染html,而v-if只有条件成立才会渲染
先看两个截图，第一个是当为true时，第二张图是为false条件不成立时，可以看到v-if的html并没有渲染出来，
而使用v-show的div仅仅是更改了它的样式: none;
男士v-if
男士v-show
var vm = new Vue({
el: '#app',
data: {
isMale:false
}
})
v-else指令
v-else指令与v-if或者v-show同时使用，v-if条件不成立则会显示v-else内容
男士
女士
var vm = new Vue({
el: '#app',
data: {
isMale:true
}
})
v-for指令
v-for指令基于一个数组渲染一个列表，它和的遍历语法相似
v-for="item in list"
list是一个数组，item是当前遍历的数组元素
v-for="(item,index) in list"其中index是当前循环的索引，下标从0开始
序号
姓名
年龄
var vm = new Vue({
el: '#app',
data: {
list:[{
name:'章三',
age:18
},{
name:'李四',
age:23
}]
}
})
v-bind指令
v-bind动态地绑定一个或多个特性，可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（），如v-bind: class
class可以和v-bind:class同时存在 ，也就是说有class了，再添加v-bind:class并不会覆盖原来的样式类，而是在原来基础上添加新的类名
var vm = new Vue({
el: '#app',
data: {
img:'https://www.baidu.com/img/bd_logo1.png',
isLogo:false,
hasBorder:true
}
})
以上v-bind:src也可简写成:src,修改上面代码
v-on指令
v-on用于监听DOM事件,用法和v-bind类似，例如给添加点击事件
同样，和v-bind一样，v-on也可以使用简写，用@符号代替，修改代码：
我们来看个例子：
以下是一个点击隐藏和显示p文本段落的代码
微风轻轻的吹来，带来了一丝丝凉意
显示
隐藏
var vm = new Vue({
el: '#app',
data: {
isShow:true
},
methods:{
show:function(type){
if(type){
this.isShow = true;
}else{
this.isShow = false;
}
}
}
})
综合示例
添加新用户
姓名：
年龄：
添加
序号
姓名
年龄
操作
删除
可以结婚了
new Vue({
el: '#app',
data: {
person:{
name:'',
age:'',
},
list:[{
name:'章三',
age:18
},{
name:'李四',
age:23
}]
},
methods:{
add:function(){
this.list.push(this.person);
this.person = {name:'',age:''};
},
deleteItem:function(index){
// 删除一个数组元素
this.list.splice(index,1);
},
marry:function(){
alert("不好意思，你没有女朋友结不了婚");
}
},
created:function(){
}
})
vue组件
组件 () 是 Vue.js 最强大的功能之一，使用组件化方式开发，可以封装可重用的代码，减少重复劳动
接下来，我们来注册一个组件
语法Vue.(, )
注册组件
Vue.component('component-a', {
template: 'component-a'
})
-a是注册的组件标签，下面就可以使用这个组件了
// 创建根实例
new Vue({
el: '#app'
})
最后，渲染为：
component-a!
通过Vue.方式注册的组件是一个全局组件 ，我们还可以创建局部组件，通过某个 Vue 实例/组件的实例选项 注册仅在其作用域中可用的组件
var Child = {
template: 'A custom component!'
}
var vm = new Vue({
el: '#app',
components:{
'component-a':Child
}
})
局部注册的组件 将只在父组件模板中可用
组件通信
组件 A 在它的模板中使用了组件 B，它们之间必然需要相互通信，父组件可能要给子组件下发数据，子组件则可能要将它内部发生的事情告知父组件
我们先来看一张图
从图上可以很清晰的看到，父子组件通信主要是使用prop和自定义事件，父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。
父子组件的关系可以总结为 prop 向下传递，事件向上传递。
来看个示例：
接收到的子组件回复消息：{{replyMsg}}
Vue.component('component-a', {
template: '#componentA',
props:['msg'],
data:function(){
return{
msgfilter:'处理后的消息-》'+this.msg
}
},
methods:{
reply:function(){
this.$emit('reply','子组件消息')
}
}
})
var vm = new Vue({
el: '#app',
data:{
msg:'父组件消息',
replyMsg:''
},
methods:{
replay:function(msg){
this.replyMsg = msg
}
}
})
需要注意的是，组件里面的data必须是一个函数，通过形式返回
1.父组件下发数据到子组件
在组件中通过v-bind添加一个参数将数据传递到子组件里，然后使用props接收传递过来的参数props:['msg']
渲染结果：
2.子组件通过事件给父组件发送消息
子组件通过$emit触发事件
this.$emit('reply','子组件消息')
在组件标签中通过v-on进行监听
监听到事件后触发reply函数，接收到子组件发送的消息
replay:function(msg){
this.replyMsg = msg
}
渲染结果：
接收到的子组件回复消息：子组件消息
我是组件a，接收到父类的消息是：处理后的消息-》父组件消息
回复
以上可以看到我们是通过字符串数组来定义prop的，除此之外我们还可以用对象的形式来定义prop，用来为组件的 prop 指定验证规则，
type的值可以是这些： Array ,例如：
props: {
name: String,
showDialog: {
type: Boolean,
default: false
}
}
实现一个对话框组件
登录
确定
Vue.component('v-dialog', {
template: '#dialog',
// props:['msg','type','showDialog'],
props:{
msg:String,
type:Number,
showDialog:{
type: Boolean,
default: false
}
},
data:function(){
return {
}
},
methods:{
close:function(){
// 触发父类关闭窗口事件
this.$emit('close-dialog');
},
login:function(){
console.log("登录跳转中...");
this.$emit('close-dialog');
}
}
})
// vue实例
var vm = new Vue({
el: '#app',
data: {
amount:'',
msg:'',
showDialog:false,
type:1,// 提示类型 1单按钮提示框 2双按钮提示框
isLogin:true
},
methods:{
login:function(){
this.isLogin = !this.isLogin;
},
submit:function(){
//弹出对话框组件
if(!this.isLogin){//未登录
this.msg = "请先去登录再领取金额";
this.showDialog = !this.showDialog;
this.type = 2;
return;
}
if(this.amount){
if(this.amount<1 || this.amount>1000){
this.msg = "输入金额不能低于1元大于1000";
this.showDialog = !this.showDialog;
this.type = 1;
}else{
this.msg = "领取成功，请在账户中心查看";
this.showDialog = !this.showDialog;
this.type = 1;
}
}else{
this.msg = "领取金额不能为空";
this.showDialog = !this.showDialog;
this.type = 1;
}
},
closeDialog:function(){//关闭对话框
this.showDialog = false;
}
}
})
总结
以上简单介绍了vuejs的MVVM模型和它的双向绑定机制，然后以一个示例开始了vuejs的使用，
之后又了解和熟悉了几个比较常用的vue指令，综合以上，构建了一个简单的示例,最后讲了vue中组件的一些
用法，父子组件是如何进行通信的，结合组件用法，实现了一个对话框组件。