2018-08-10

methods:{ }

里面放的是 需要手动触发才会执行的函数

mounted(){ } 钩子函数

作用：（和window.onload作用相似）页面加载完成之后立即执行函数里面的内容
// 注意：mounted钩子函数的名字不能不能随便取，不能写在methods属性里面

自动获取焦点的三种方法

• 第一种 给input直接添加属性autofocus='true'

编号:<input type="text" required='required' v-model='id' autofocus='true'>

• 第二种 给input添加ref属性 调用$refs方法

编号:<input type="text" v-model='id' id='inputid' ref='inputrefid'>

mounted () {//页面一加载 就执行里面的内容
     document.getElementById('#inputid').focus()//通过id获取dom的
     this.$refs.inputrefid.focus()//通过this.$refs.xxid的值来获取dom
     },

• 第三种 使用 ###自定义指令### 获取焦点 / 改变输入框文本颜色
  使用方法：Vue.directive(‘名字’，{对象}）创建一个指令

编号:<input type="text" required='required' v-model='id' v-myfocus>

//自定义指令 获取焦点  
 Vue.directive('myfocus',{//'myfocus'自定义一个指令名字  后期直接用v-myfocus来调用这个指令
      inserted(el,binding){//inserted***钩子函数*** 表示指令插入到标签中就开始执行
        console.log(el)//参数el 表示的是这个指令的dom元素<input></input>
        el.focus()
     }
 }) 

//自定义指令 改变文本框颜色
编号:<input type="text" required='required' v-model='id' v-mycolor='color'>
1.在data里面定义一个color:'red'
2.通过给v-myfocus指令添加color属性
3.赋值给 el.style.color=binding.value

//自定义指令   
Vue.directive('mycolor',{
      inserted(el,binding){
      // console.log(binding.value)//获取的是dom元素的值
       el.style.color=binding.value
       }
}) 

Vue.filter() 创建过滤器

<--在需要过滤的数据后面加上管道符 | 过滤器名称 -->
<td>{{item.ctime | fmtTime('/')}}</td>

创建一个时间过滤器
Vue.filter('filetime',function(time,'分隔符'){
    var Y=time.getFullYear()
    var M=time.getMonth()
    var D=time.getDay()
    return Y+分隔符+M+分隔符+D
})

computed:{} -求和-筛选查找等

作用：通过computed这个关键字 来创建一个计算属性
优点：基于他们的依赖将数据进行缓存 解决了大量的逻辑问题 便于维护

<div v-for='item in newarr'> </div>

computed: {
        newarr(){//newarr就相对于一个计算属性 它是一个函数  但是可以直接当作属性来使用
// //通过监听搜索框的值 跟数组里里面的相对比 获取到一个新的数组 用到了filter()和indexOf()两个方法
        return this.arr.filter(item=>item.name.indexOf(this.searchval)!==-1)
                   }
         },

filter()实例：返回数组 ages 中所有元素都大于 18 的元素:
var ages = [32, 33, 16, 40];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}

watch:{}

作用：通过watch属性创建的是一个监听器 是一个对象
通过监听属性值的变化 执行想要的函数

watch:{
 //通过监听 搜索框值searchval的值的变化 给数组进行重新赋值
       searchval:function(newval，oldval){//函数名必须是 要监听的data的名字
       this.arr = this.arr.filter(item=>item.name.indexOf(this.searchval)!==-1)
       }
 }

• 注意：通常情况下用computed，当需要在数据变化时执行异步或开销较大的操作时，用watch
• // 开发时，能用computed实现的时候，就用computed实现
• // 需要执行异步操作的时候，就要用到watch
• 深度监听 当监听的是data里面的对象的时候 需要深度监听

data: {
user: {
name: 'jack'
}
},

        watch: {
          user: {
              handler (newval) {// hanlder这个函数名字固定
              console.log(newval.name);
            },
           deep: true  // deep:true表示深度监听
          }
        }

get请求

 mounted () {
          axios.get('http://157.122.54.189:9093/api/getprodlist')       // axios的get请求
            .then(res => {
              console.log(res);
              console.log(res.data); // axios中将数据封装到了data属性中
            })
            .catch(error => {
              console.log(error);
            })
        }

post请求

 mounted () {
          axios.post('http://157.122.54.189:9093/api/addproduct', {
            name: '哈哈哈'
          })
            .then(res => {
              console.log(res.data);
            })
            .catch(error => {
              console.log(error);
            })
        }

• 可以 在methods:{ }里面封装成一个函数 在mounted(){ } 钩子函数里面调用

mounted () {
this.getData()
}

动画

[图片上传失败...(image-59ec92-1533921563244)]