<h1 id="一vue-resource使用">一、vue-resource使用

• vue-resourse 在vue中实现发送ajax
• vue-resource和vue之间的关系就相当于jQuery插件和jQuery
• 1，百度vue-resource------->cnd------->复制地址------>打开

• 2，bower install vue-resource

• url String ajax请求的接口地址

• options Object 需要发送的参数

    new Vue({
        el:".container",data:{
         content:"",}
    })
    $http.get("/addcomment",{params,{content:this.content}})

• beforeCreate 组件还未被创建
• created 组件已被创建
• beforeMount 组件已创建但还未挂载到DOM节点上
• mounted 组件已挂载到DOM节点上
• beforeDestory 组件即将被销毁

• destoryed 组件已经被销毁

    vm = new Vue({
        el:".box",data:{},beforeCreate(){},created(){},boforeMount(){},mounted(){},boforeDestroy(){},destroyed(){}
    })

    
{{fullName | namefilter}}

new Vue({
    el:".box",data:{
        fullName:""
     },filters:{
        namefilter(){
           return ...
        }
      }
  })

var vm=new Vue({
    el:"",data:{
        num:1
    }
})
vm.$watch({"num",function(newValue,oldValue){
    //newValue是变量改变后的值
    //oldValue是变量改变之前的值
    console.log(newValue)
    console.log(oldValue)
})

var vm=new Vue({
    el:"",data:{
        person:{
            name:"Alice",age:22,gender:"female"
        }
    }
})
vm.$watch("person",oldValue){
},{

deep:true //进行深度监听，可以监听到对象属性的改变

})

<h3 id="解除变量的监听">3、解除变量的监听

//从绑定监听的函数得到解析监听的函数句柄
var unwatch =vm.$watch("person",{
    deep:true//进行深度监听，可以监听到对象属性的改变
})

        Vue.directive("directiveName",function(el,binding,vnode){
                            el.style='color:'+binding.value;
           });

• el: 指令所绑定的元素，可以用来直接操作DOM
• binding: 一个对象，包含指令的很多信息
• vnode: Vue编译生成的虚拟节点

• 自定义指令有五个生命周期（也叫钩子函数），分别是bind,inserted,update,componentUpdated,unbind
• 1.bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
• 2.inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
• 3.update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
• 4.componentUpdated:被绑定元素所在模板完成一次更新周期时调用。

• 5.unbind:只调用一次，指令与元素解绑时调用。

    bind:function(){//被绑定
         console.log('1 - bind');
    },inserted:function(){//绑定到节点
          console.log('2 - inserted');
    },update:function(){//组件更新
          console.log('3 - update');
    },componentUpdated:function(){//组件更新完成
          console.log('4 - componentUpdated');
    },unbind:function(){//解绑
          console.log('5 - unbind');
    }
    <div class="box"&gt;
            <div v-directive-name></div>
        </div>
  
        Vue.directive("directiveName",{
                inserted:function(){
  
                }
        })</code></pre>
  
  

Vue.component("my-html",{
      template:"
1
2
3
"
})

new Vue({
    el:".box",components:{
         "my-html":{
              template:"
这是一个局部组件
"
          }
     }
})

• 子组件不能直接获取父组件的数据（因为父子组件之间作用域是完全独立的，互不相同）

• 子组件要获取父组件的数据必须通过数据传递的方式

    //使用组件
    
  
        
    
  //定义一个全局的登录组件
  
  var child = {
  
  props: ['mynum','name'],template: "
  {{mynum}},{{name}}
  "
  
  }
  
  Vue.component("Counter",child)
  
  //创建vue实例
  var vm = new Vue({
  
  el: ".container",data: {
  
  num: 3,nickName: "Jack"
  
  },methods: {
  
  increment() {
  
  this.num++
  
  }
  
  }
  
  })

  

Vue.component("Login",{
     data:function(){
         return {
              sLogin:true
         }
     },template:'
'
})

字组件接收父组件数据

single P----->page A---Application

• 减少加载时间，提高用户体验只向服务器请求一次

• 实现SPA

• 减少客户端和服务器之间请求和加载时间

• 下载vue官网---->生态系统----->vue router

• 在一个完成的应用或者站点中，只有一个完整的HTML页面，这个页面有一个容器，可以把需要加载的代码片段插入到该容器中

• 1.根据地址栏中url解析完整的页面 index.html
• 2.根据地址栏中url解析后的路由

• 根据路由地址，去在当前的配置中找到该路由地址的配置对象去查找该路由地址所对应的模板的页面地址，把请求来的数据加载到指定的容器中。

• 首先vue的点击事件是用@click="clickfun()"属性在HTML中绑定的，在点击的函数中添加$event参数就可以

       
        methods:{
            clickfun(e){
                //e.target是你当前点击的元素
                //e.currentTarget   是你绑定事件的元素
            }
        }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!