简介

---

1. 创建vue实例
2. 模板语法
3. 计算属性
4. 指令
5. 事件处理器
6. 表单控件
7. 生命周期

Vue实例

---

  let vue=new Vue({
    el:'#app',
    data: {
      msg:'hello'
    }
  });

Vue组件介绍

---

组件系统是将一个大型的界面切分称一个一个更小的可控单元；组件是可以复用的，可维护的；组件具有强大的封装性，易于使用；大型应用中，组件与组件之间交互是可以解耦操作的。

1. 全局组件
2. 局部组件
3. 组件数据的特点
4. Vue实例与Vue组件的关系

全局组件

  // 全局组件定义
  Vue.component('hello',{
    template: `
    <h2>Hello world</h2>
    `
  });

局部组件

let vue2=new Vue({
    el:'#app2',
    components:{ //组件声明
      'my-header':{ //组件一
        template:'<h3 @click="changeCount">header{{count}}</h3>',
        data() { //组件内的数据使用函数返回对象
          return {
            count: 0
          }
        },
        methods: {
          changeCount(){
            this.count++
          }
        }
      },
      'my-footer':{ //组件二
        template:`<h3 @click="change">footer{{count}}</h3>`,
        data(){ //组件内的数据使用函数返回对象
          return {
            count: 0
          }
        },
        methods: {
          change:function(){
            this.count++;
          }
        },
      }
    },
  });

模板的几种写法

1. 字符串，使用引号 ''或者""
   template:'<h3 @click="changeCount">header{{count}}</h3>'
2. 模板字符串（es6）反引号 `
3. template标签 指定id

  <template id="tem">
    <!-- 下面必须只能由一个div组成 -->
    <div>
        <h1>Vue Template</h1>
    </div>
  </template>
  <div id="app5">
    <my-temp></my-temp>
  </div>

  let vue5=new Vue({
    el: '#app5',
    components: {
      'my-temp': {
        template: '#tem'
      }
    }
  });

4. script标签

<script type="text/x-template" id="temp2">
    <!-- 下面必须只能由一个div组成 -->
    <div>
        <h1>Vue Template</h1>
    </div>
</script> 

5. 抽离出来成一个.vue文件 写法参考 template标签 需要引入

Vue实例拓展

vue组件是一个可拓展的Vue实例

  let NewVue=Vue.extend({
    data() {
      return {
        msg:'hello'
      }
    },
  });
  let shoVue=new NewVue({
    el:'#app3'
  });

Vue实例中使用模板替换app容器

  // 看成app容器
  <div id="app4">
  </div>

  let vue4=new Vue({
    el: '#app4',
    template: '<a href="# ">click</a>'
  });