Vue语法

后来添加

<div :style={'obj'}></div>
<div v-show="isShow"></div>
<div>{{msg}}</div>

实例化vue

var vm = new Vue({
    el:"#demo",
    data:{
        msg:"郑州欢迎你们",
        dataList:[1,2,3,4]
    }
})

v-for 遍历

<li v-for="data in dataList">{{data}}</li>

methods

//实例化中添加
methods:{
    clickMe:function(){
        alert("点击成功")
    }
}

创建组件

//第一种方法
Vue.component("tada-fun",{
    template:"<h1>今天天气很好</h1>"
})
//第二种方法
var Header = Vue.extend({
    template:"<h1>这是头部</h1>"
});
Vue.component("tada-header",Header)
//第三种方法
var Footer = {
    template:"<h1>这是尾部</h1>" 
};
var vm = new Vue({
    el:"#demo",
    components:{
        "tada-footer":Footer
    }
});

$mount挂载

var Pro = Vue.extend({
    template:"<p>{{info}}</p>",
    data:function(){
        return({info:"马上要吃饭了"}) 
    }
});
//挂载
new Pro().$mount("#demo");

增删数据

// html
<li v-for="(item,index) in List">第{{index}}个：{{item}}<button v-on:click="removeMe(index)">删除</button></li>

// js的methods中
removeMe:function(index){
    console.log(index)
    this.List.splice(index,1);      
    console.log(this.List)
}

computed

computed是计算属性
* 与methods不同，不同的是数据更改后悔自动计算;methods会需要添加事件触发

Vue.filter过滤器

//html
<p>{{num | todo(n1,n2)}}</p>

//js
Vue.filter("todo",function(value,n1,n2){
    if(n1 > n2){
        return "傍边有个大美女"
    }else{
        return "哈哈哈"
    }
})

vue中事件监听

//定义$watch进行监听
vm.$watch("info",function(newval,oldval){
    console.log(newval + "," + oldval)
})

//第二种方法
var vm =  new Vue({
    el:"#demo",
    data:{
        info:"马上就放学了"
    },
    watch:{
        info:function(newval,oldval){
            console.log(newval,oldval)
        }
    }
});

生命周期函数

• 组件创建时
  beforeCreate 实例化组件对象后触发
  created：组件接受data后触发
• 组件渲染时
  beforeMount：在模板渲染前触发
  mounted：模板渲染之后触发
• 组件更新
  beforeUpdate：在组件更新前触发
  updated：在组件更新后触发
• 组件卸载时
  biforeDestroy：在卸载之前触发（语法：this.$destroy()）
  destroyed：在卸载之后触发

父子组件传值

<v-child v-bind:msg="msg"></v-child>
// 子组件获取父组件的值
var Child = {
    template:"#child",
    props:["msg"],
    data:function(){
        return {
            mm:this.msg,
            childMsg:"来自子元素的信息"
        }
    }
};

// 父组件获取子组件的值
<v-child @to-parent="getChildData"></v-child
//js  子组件
var Child = {
    template:"#child",
    data:function(){
        return {
            childMsg:"来自子元素的信息"
        }
    },
    methods:{
        send:function(){
            this.$emit("to-parent",this.childMsg);
        }
    }
};
// 父组件代码
var Father = {
    template:"#father",
    components:{
        "v-child":Child
    },
    data:function(){
        return{
            childMsg2:""
        }
    },
    methods:{
        getChildData:function(childMsg){
            this.childMsg2 = childMsg;
            console.log("触发")
        }
    }
};

slot 属性

说白了就是一个占位符，分发属性,可以直接替换slot为components

// html 
<div id="demo">
    <aaa>
        <ul slot="content">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <h3 slot="shuai">他们比我帅所以作业加倍</h3>
    </aaa>
</div>
<template id="aaa">
    <div>
        <h2>这周马上就要过去了</h2>
        <slot name="shuai"></slot>
        <slot name="content"></slot>
        <h2>这是底部</h2>
    </div>
</template>


//js
var vm = new Vue({
    el:"#demo",
    components:{
        "aaa":{
            template:"#aaa"
        }
    }
})

ref属性

ref获取子元素的完整对象

// html
<v-child ref="myChild"></v-child

// js
methods:{
        getInfo:function(){
            console.log(this.$refs.myChild.msg)
        }
    }