Vue小白入门

现在一边找工作一边继续学习，感觉自己还有很多要学的，想要从程序猿成为攻城狮还任重而道远啊~~~

之前学了一下小程序，感觉还比较有意思，但现在求职没办法深入，得赶紧把基础都过一遍。招聘里都在要求会Vue，之前一直在纠结到底学Vue还是React（而且也没时间，当时正在在学别的），这次别的都过了一遍，终于要下决心学Vue了。

首先推荐慕课网DellLee老师的Vue入门讲解，讲的真的是细致、思路清晰，而且声音也太暖了哈哈，听老师讲课瞬间爱上了学Vue！传送门https://www.imooc.com/learn/980。

看完之后还在纠结要不要买DellLee老师的实战课，但又感觉现在做实战太慢了，还是想把知识点过一遍，等之后找到工作了在来学老师的实战，所以后面我又找到了另外一位老师的基础课。

第二位老师是腾讯课堂的米斯特吴老师，发现他的Vue课学的人最多就点进去看了，结果一发不可收拾，也是很棒（帅）的一位老师，而且免费课多，收费的价格还便宜（欢呼！），咳咳，传送门https://oceanwu.ke.qq.com/。

然后现在就开始记录自己的知识点（其实我都记在了本上，现在逼自己习惯在博客上记录）。

1.Vue实例

<script>
new Vue({
	el: '#app',             //挂载点，每个模版只有一个挂载点
    data:                   //数据
    methods:                //方法
    computed:               //计算属性
    watch:                  //侦听器
    components:             //局部组件
	}
</script>

2.事件绑定 （v-on:简写为@:）

                        v-on:click ；

属性绑定（v-bind:简写为：）

                    v-bind:title = “title”

                  <div v-bind:class = "{ active: isActive，show: isShow}" ></div>

                  当isAction和isShow都为true时，就给div添加两个类<div class="active show">

双向绑定

                   v-model="content"

3.计算属性放在computed中，好处就是当数据都没变化时，调用的是上一次缓存中的值

4.侦听器wacth，里面侦听某一属性，当它发生改变时进行对应操作,比如侦听fullName字符串，当它有变化时，数据中的count加一。

watch:{
    fullName: function(){
        this.count++;
    }
}

5.v-if : true/false     DOM存在与否（false移除DOM，然后true时再重新创建DOM）

  v-else-if

 v-else

  v-show                 DOM显示与否（调用的是diplay:block/none）

6.v-for循环

   数据为data:{  list:[1,2] }

   <li v-for="(item, index) of list" :key="index"> {{item}} </li>

  显示为：<li>1</li>

                  <li>2</li>

7.v-text

      内容是什么打印什么，<h1>你好<h1>就打印成“<h1>你好<h1>”

   v-html

      打印成html形式，会识别标签<h1>你好<h1>打印成加粗的“你好”

8.注册子组件(当你安装了vue-cli脚手架时。就不是这么注册的，但先学这个也有帮助)

    方式一：全局组件

//定义“greeting”组件
Vue.component("greeting",{
	template: "<p>大家好</p>"
});

new Vue({
	el: '#vue-app',
	data:{
	},
	methods:{	
	}
});

              使用：<div>

                                  <greeting></greeting>

                         </div>

               方式二：局部组件

var Greeting = {
    template: <p>大家好</p>
}
new Vue({
    components:{
        'greeting' : Greeting 
    },
    el: '#vue-app',
    data:{
    },
    methods:{
    },
})

9.父组件 ——> 子组件传值

         步骤1.父组件通过属性绑定的形式传数据给子组件

<greeting v-bind:index="index" :name="name"></greeting>

         步骤2.子组件通过props属性获取数据,就可以在模版里使用数据了

Vue.component("greeting",{
    props: ['index','name'],
    template: "<p>大家好,我是{{name}}</p>"
});

10.子组件 ——> 父组件传值

        步骤1.子组件 比如有一个点击按钮事件，在点击事件里，通过$.emit发布一个事件，比如delete事件，里面还可以传一个数据index

btnClick: function(){

      this.$emit('delete', 'this.index')

}

        步骤2.父组件 在使用子组件时，传一个同名事件delete，监听这个事件何时被触发（就是子组件点击那个按钮时），

然后在父组件中定义一个方法，当监听到delete事件时进行操作。

<template>
    <greeting v-on:delete = "handeleDelete($.event)"></greeting>
</template>


methods:{
    handeleDelete: function(data){
        //use data do something 
    }
}

这样子组件传给父组件它的index，父组件就能操作了。