0. 起手方法和规定

const vm = new Vue(options)

把Vue的实例命名为vm
vm对象封装了对视图的所有操作，包括数据读写、事件绑定、DOM更新，没有包括ajax,不关注于前后端交互
vm的构造函数是Vue, options是new Vue的参数，一般称之为选项或构造选项

1. 常用选项

el

将构造选项挂载到对应的位置中

new Vue({
  el:"#app",
  render:h=>h(demo)
})

等价于

new Vue({
  render:h=>h(demo)
}).$mount("#app")

data

内部数据，可以使用函数返回对象或者直接使用对象，一般使用函数，保证不同对象实例化所得的对象不会互相影响。有一个常见的bug

new Vue({
  data(){
    return {
      n:0
    }
  },
  template:`
  <div>
        {{n}}
        <button @click="add">+1</button>
    </div>
  `,
  methods:{
    add(){
      this.n += 1
    }
  }
  
}).$mount('#app')

methods

事件处理函数。可以选择性替代filter，相比于filter不足在于每次渲染都会调用

new Vue({
  data(){
    return {
      array: [1,2,3,4,5,6,7,8]
    }
  },
  template:`
  <div class="red">
        {{filter()}}
    </div>
  `,
  methods:{
    filter(){
      return this.array.filter(item => item%2 === 0)
    }
  }
  
}).$mount('#app')

components 组件

方法一：将vue文件引入为组件

独立文件的模块化引用

import Demo from './demo.vue'

new Vue({
  // 组件名
  components:{
    Demo   // Demo: Demo 的ES6简写 
  },
  data(){
    return {
      n:0,
    }
  },
  template:`
  <div>
        {{n}}
        <button @click="add">+1</button>
        <hr>
        <Demo>   <!--使用组件-->
    </div>
  `,
  methods:{
    add(){
      this.n += 1
    }
  }
  
}).$mount('#app')

文件名一般全部小写，组件命名一般首字母大写

方法二：Vue.component 声明全局组件

所有的Vue实例都可以使用

// 注册全局组件
Vue.component('Demo2', {
  template:`
  <div>
      222222
    </div>
  `
})


new Vue({
  data(){
    return {
      n:0,
    }
  },
  template:`
  <div >
        {{n}}
        <button @click="add">+1</button>
        <hr>
        <Demo2>  <!--使用组件-->
    </div>
  `,
  methods:{
    add(){
      this.n += 1
    }
  }
  
}).$mount('#app')

方法三：在components属性里声明

只在当前的实例有效

new Vue({
  components: {
    Demo3: {
      template:`
      <div >
          Demo3333
        </div>
      `
    }

  },
  data(){
    return {
      n:0,
    }
  },
  template:`
  <div>
        {{n}}
        <button @click="add">+1</button>
        <hr>
        <Demo3> <!--使用组件-->
    </div>
  `,
  methods:{
    add(){
      this.n += 1
    }
  }
  
}).$mount('#app')

template的转换规则

MyTheme =====> my-theme 首字母大写替换为小写配合下划线

常见钩子

顾名思义

Vue.component("demo2",{
            template:`<div>123</div>`,
            created(){
                console.log("demo2创建了");
            },
            mounted() {
                console.log("demo2挂载了");
            },
            destroyed() {
                console.log("demo2销毁了");
            },

        })
        const vm = new Vue({
            el: "#app",
            template: `<div>
                {{n}}
                <button @click='add'>+1</button>
                <demo2 v-if='see'/>
                <button @click='toggle'>切换</button>
                </div>`,
            data() {
                return {
                    n: 1,
                    see:true
                }
            },
            methods: {
                add() {
                    this.n += 1
                },
                toggle(){
                    this.see = !this.see
                }
            },
            updated() {
                console.log("主组件变化了");
            },
        })

props 外部属性

<template>
    <div class="red">
        我是外部demo<br>
        {{message}}
        <button @click="add2">+2</button>
    </div>
</template>

<script>
export default {
    props:['message','add2'], // 以字符串数组形式列出属性
}
</script>

<style scoped>
.red {
    color: red;
}
</style>

<!-- 静态,赋值字符串Vue -->
< XX="Vue">

<!-- 动态赋予一个变量的值 -->
<:XX="YY">

<!-- 动态赋予一个复杂表达式的值 -->
<blog-post
  v-bind:title="post.title + ' by ' + post.author.name"
></blog-post>

Vue的构造options