初始vue（三）

过滤器

    <li>{{list.filter(function(item){return !item.checked}.length)}}</li>
	实现了计算满足条件list数组的数据
//通过计算属性实现过滤
    <li>{{filterList}}</li>

new Vue({
    el:'',
	  data.......
	  computed:{
	        filterList() {
             list.filter(function(item){return !item.checked}.length
        }
    }
})

---

//直接执行filter方法效果一样
    <li>{{filter()}}</li>
	new Vue({
	    el:'',
		  data.......
		  computed:{
		        filterList() {
            	 list.filter(function(item){return !item.checked}.length
        }
    }
})

三者区别

fliterList计算方法取，第一次取出，存在本地缓存中，下一次取在本地缓存优先取。
filter（）每一次都会计算，耗费性能

v-show与v-if

v-show="ishow"  v-if="isshow"
区别是一个v-if直接不渲染dom结构，v-show给dom结构增加属性display:none
var setLocal = {
    save:function(key,value) {
            localStorage.setItem(key,JSON.stringify(value))
    },
get:function(key) {
            return JSON.parse(localStorage.getItem(key))
    }   
}

var list = setLocal.get('todoList') || [] ;
实现添加到本地的localStorage，我们应该在数据进行增删改的时候存储更新一次
//运用vue的监听函数
 new Vue({
    el:"",
   watch:{//监听list发生变换的时候执行函数
     list : function () {
                //方法
     }
   }
 })
//通过测试我们发现上面这个监听函数只能监听函数增和删的变换不能监听修改的变换
接下来我们详解一下监听函数

 <div id="root">
        <p>FullName: {{fullName}}</p>
        <p>FirstName: <input type="text" v-model="firstName"></p>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                firstName: 'Dawei',
                lastName: '',
                fullName: ''//展示
            },
            watch: {
                firstName(newName, oldName) {
                    console.log(newName)
                    this.lastName = oldName
                    this.fullName = newName + ' ' + this.lastName;
                }
            }
        })
    </script>
//此时watch监听firstname的变换，发生变换执行函数两个参数分别是改变前的值和改编后的值

<div id="app">
    <input type="text" v-model="childrens.name" />
    <input type="text" v-model="lastName" />
 </div>
      
<script type="text/javascript">
        var vm = new Vue( {
          el: '#app',
          data: {
            childrens: {
              name: '小强',
              age: 20,
              sex: '男'
            },
            tdArray:["1","2"],
            lastName:"张三"
          },
          watch:{
            childrens:{
              handler:function(val,oldval){
                console.log(val.name)
              },
              deep:true//对象内部的属性监听，也叫深度监听,可以监听对象内内容的修改
            },
            'childrens.name':function(val,oldval){
              console.log(val+"aaa")
            },//键路径必须加上引号,直接监听某个对象属性的方式，也可以监听到
            lastName:function(val,oldval){
              console.log(this.lastName)
            }
          },//以V-model绑定数据时使用的数据变化监测
        } );
        vm.$watch("lastName",function(val,oldval){
          console.log(val)
        })//主动调用$watch方法来进行数据监测
</script>
数组的变化，不需要深度watch。
hash切换
ul 
    li#all
  li#finished
  li#unfinished
  
  <script>
    window.addEventListener("hashchaneg",function() {
        var hash = window.location.hash;//取出的结果是#all,...
      hash.slice(1)
  })  
  </script>

组件自定义
1.全局方式

写法一

Vue.component("my-component",{
    template:'<div>我是一个全局组件</div>'
})

写法二

<script type="x/template" id="demo1">
   <div>我也是组件的书写方式<div>
</script>
Vue.component("my-component",{
    template:"#demo1"
})
Vue.xxxxxx的属性或者方法都是全局的
比如Vue.directive:{}//写全局自定义指令
局部组件
new Vue({
    el:'#id',
  components:{
    "myComponent":{
        template:"<div>hellow</div>"
    }
  }
})

如何打破HTML模板规则，table里面不能放div

<table>
    <tr is="my-component">  
<table>

为什么声明的组件内部return返回值要是一个对象
首先我们来看一下如果不是一个对象

我们改变一个组件的内容所有组件都一起改变，一个组件的行为影响了另一个组件，所以我们返回对象提供了一个作用域。

给自定义组件传参数（也叫做父组件=》子组件传值）
这里的父子组件有点抽象，我们认为A调用了B，则A是B的父组件

<my-component name="我传入的参数"></my-component>
Vue.component("myComponent",{
    template:`<div>
    {{count}}
    {{name}}
    <div>`,
  data:function() {
    return {
        count:0
    }
  },
  props:['name']
})

对prop里面的变量权限设置,一定要设置data值接受prop参数否则会出现disshow之后值需要从新渲染没有缓存的问题

<my-component name="1"></my-component>
Vue.component("myComponent",{
    template:`<div @click="add">
    {{count}}
    {{name}}
    <div>`,
  data:function() {
    return {
        count:this.name
    }
  },
  methods: {
    add() {
        this.count++
    }
  },
  props:{
    name: {
        type:Number,
      default:'moren',
      required:true//必须接收参数
    }
  }
})

给组件自定义方法
理解：给子组件自定义事件，传递给父组件调用

//child
this.$emit('addNum')
//
<my-component @addNum="add"></my-component>
//parent
{
    methods:{
    add(){
        this.count++;
    }
  }
}
Vue.component("myComponent",{
    template:`<div @click="add">
    {{count}}
    {{name}}
    <div>`,
  data:function() {
    return {
        count:this.name
    }
  }
})
slot的使用
<my-component>
    <div>我是内容<div>  
</my-component>
Vue.components=('myComponent',{
    template:`
            <div>我是div1<div>
      <div>我是div2<div>
      <div>我是div2<div>
`
})
//页面渲染结果是我是div1 我是div2 我是div3
<my-component name="<div>我是div<div>">
    <div>我是内容<div>  
</my-component>
Vue.components=('myComponent',{
    template:`
            <div>我是div1<div>
      <div>我是div2<div>
      <div>我是div2<div>
`,
  prop:['name']
})
//渲染结果是我是div
<my-component>
    <div>我是内容<div>  
</my-component>
Vue.components=('myComponent',{
    template:`
            <slot>
          <div>我是div1<div>
          <div>我是div2<div>
          <div>我是div2<div>
      </slot>   
`
})
//我是内容
//实现按顺序渲染
<my-component>
    <div slot="one">我是内容1<div>  
  <div slot="three">我是内容2<div>  
  <div slot="two">我是内容3<div>  
</my-component>
Vue.components=('myComponent',{
    template:`
            <slot name="one">
          <div>我是divCom1<div>
            <slot>
       <slot name="two">
          <div>我是divCom3<div>
            <slot>
                <slot name="three">
          <div>我是divCom2<div>
            <slot>  
`
})