创建Vue实例

• 通常const vm 不写，

const vm = new Vue(options)

• 这个vue做了什么，他是根据这个括号里的选项，得出一个对象，把这个对象命名为vm;
• 对象._ _proto_ _ === 其构造函数.Protype,所以vm._ _proto_ _=Vue.protype
• _ _proto_ _是vm的隐藏属性，

data的用法

• 如果data是写在vue文件里面的，那么data必须是函数；

methods里面

以筛选数组为例

// Vue实例
// Vue对象
const vm = new Vue({
  data(){
  return {
   n:0;
   array:[1,2,3,4,5,6,7,8]
 }
},
template:`
<div class="red">
{{n}}  <button click="add"> +1 </button>
----------
{{array.filter(i => i % 2 === 0)}}
</div> `,
methods:{
add(){}
}
})

• 第一种方法直接在这个双大括号里面写这个函数；
• 第二种法，在methods里面：给这个filter传一个参数

{{filter(array)}}
methods:{
filter(array){
   return array.filter(i => i % 2 === 0)

})
}

• 第三种方法，不传参：

{{filter( )}}
methods:{
filter( ){
   console.log('执行了filter')
   return this.array.filter(i => i % 2 === 0)

})
}

• methods，有个特性，每次渲染都会执行。

Vue组件的使用

方法1

• 首先要有一个单独的.vue文件,此处名字叫Demo.vue；
• 在需要引用的文件中引入它：import Demo from './Demo.vue'
• 怎么在vm里面使用这个东西呢？
  • 在这个vm里面说一下，
    • 要用个组件components：;
    • 给他起一个名字Frank;
    • 对应的值是Demo；

    const vm = new Vue({
    componets:{
       Frank:Demo
    },
    )}
    

• 那么可以直接在template里面写这个Frank； <Frank></Frank>
• 一般情况下这个Demo直接就叫Demo，不用叫像Frank这样其他的名字；
  • 即可写成components:{Demo:Demo};
  • vue规定，如果左右相等，则可以直接写一个components:{Demo}即可；

方法2，用JS的这种方式

• 这个组件的名称直接就是Demo2，不需要引用，可以直接在别处写<Demo2/>

Vue.component('Demo2',{
template:`
<div> demo2</div>
`
})

• 这就好像把一个复杂的组件叫一个名字，然后把他放在vue.component函数里面；
• 这个函数第一个参数是组件名称，第二个参数接受的内容和new vue是一模一样的；
• 所以可以认为vue.component就是给一个实例取一个名字；

如果直接new vue就是实例，如果vue.component或者是vue文件就是vue组件；

• 组件名最好大写。文件名最好小写；

钩子

created出现在内存不出现在页面；

mounted出现在页面中

updated更新的时候，就是页面如果按钮是加1，加过之后，就是更新的；并且得到的是更新的结果；

destoryed