person

自定义指令

示例,文本框自动获取焦点

自定义全局指令

使用 Vue.directive() 定义全局指令。

// 注册一个全局自定义指令 `v-focus`,参数一是指令的名称,参数二是一些指令相关的函数,这些函数可以在特定阶段执行相关操作
Vue.directive("focus", {
    // 样式只要通过指令绑定给了元素,不管这个元素有没有插入到页面中去,这个元素就有了一个内联样式,在元素显示到页面的时候将样式应用给这个元素
    bind: function(el){
        el.style.color = 'red'
    }
  // 在函数中,第一个参数是 el,表示被绑定了指令的那个元素,el 是一个原生的 js 对象
  // 当被绑定的元素插入到 DOM 中时……一个元素只有插入 DOM 之后才能获取焦点
  inserted: function(el) {
    // 聚焦元素
    el.focus();
  }
});

和样式有关的一般都可以在 bind 中操作,和 js 行为有关的最好在 inserted 中去执行。

然后你可以在模板中任何元素上使用新的 v-focus 属性,如下:

<input v-focus />

自定义局部指令

directives: {
  focus: {
    // 指令的定义
    inserted: function (el, binding) {
        // 获取 v-focus = "'blue'" 传入的 blue 值,具体参数列表可查看上述钩子函数链接
      el.style.color = binging.value
    }
  }
}

vue 实例的生命周期

vue 实例的生命周期
如果要调用 datamethods 中的数据,created() 函数中就可以开始操作,在 beforeCreate() 函数中还未对 datamethods 进行初始化。

vue-resource 发起 get 和 post 请求

引入 vue-resource.jsvue-resource 依赖于 vue.js,因此 vue.js 的引用要在 vue-resource.js 之前。

get 请求

{
  // GET /someUrl
  this.$http.get("/someUrl").then(
    response => {
      // success callback
    },
    response => {
      // error callback
    }
  );
}

post 请求

body 为提交的数据,手动提交 post 请求时,需要在 config 中 设置 emulateJSONtrue 使其作为一个表单样式进行提交。

this.$http
  .post("/someUrl", [body], [config])
  .then(successCallback, errorCallback);

vue-resource 开发文档>)

vue-resource 全局配置

配置 api 根路径

Vue.http.options.root = "url";

或者:

new Vue({
  http: {
    root: "/root"
  }
});

配置 emulateJSON

Vue.http.options.emulateJSON = true;

组件

组件是可复用的 Vue 实例。组件时用来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用相应的组件即可。

模块化和组件化的区别

  • 模块化:从代码逻辑的角度进行划分,方便代码的分层开发,保证每个功能单一。
  • 组件化:从 UI 界面的角度划分,方便 UI 组件的复用。

创建组件的方式

全局组件

使用 Vue.extend 创建

<script>
    var comp = Vue.extend({
        template: "<h1>这是 Vue.extend 创建的组件!</h1>"
    })
    Vue.component('my-component', comp);
    new Vue({
        el: "#app"
    })
</script>

使用:

<div id="app">
  <my-component></my-component>
</div>

简化第一种方式

Vue.component('component2', {
        // template 属性指向的模板内容只能有一个根元素,
        // "<h1>第二种创建方式</h1><span>123</span>" 中 h1 和 span 没有上级元素,根元素有两个
        // 因此会在 console 控制台报错,且不会显示 span 的内容
        template: "<div><h1>第二种创建方式</h1><span>123</span></div>"
    })

使用 template 元素创建

Vue.component("com3", {
  template: "#temp"
});
<div id="app">
  <com3></com3>
</div>
<!--在被控制的 #app 外,使用 template 定义组件-->
<template id="temp">
  <div>
    <h1>这是第三种创建方式</h1>
    <span>123456</span>
  </div>
</template>

局部组件

new Vue({
  el: "#app2",
  components: {
    login: {
      template: "<h1>私有组件</h1>"
    }
  }
});

组件中的 data

Vue.component("button-counter", {
  data: function() {
    return {
      count: 0
    };
  },
  template:
    '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
});

一个组件的 data 选项必须是一个函数,返回一个对象。因此每个实例可以维护一份被返回对象的独立的拷贝。

父组件向子组件传值

通过 v-bind 绑定。

<script>
    new Vue({
        el: "#app",
        data: {
            msg: "这是一个 div"
        },
        components: {
            'child': {
                template: "<h1>{{message}}</h1>",
                props: ['message']
            }

        }
    })
</script>
<div id="app">
  <child v-bind:message="msg"></child>
</div>

子组件调用父组件方法并向父组件传值

<div id="app">
    <child @func="show"></child>
</div>

<template id="btn">
    <input type="button" @click="useParent" value="点击调用父类方法">
</template>
</body>
<script>
    new Vue({
        el: "#app",
        methods: {
            show(data) {
                console.log(data)
            }
        },
        components: {
            'child': {
                data: function () {
                    return {
                        cdata: {
                        id: 1,
                        name: "edwin"}
                    }
                },
                template: "#btn",
                methods: {
                    useParent() {
                        console.log("ok")
                        this.$emit("func", this.cdata)
                    }
                }
            }

        }
    })
</script>

使用 ref 获取 DOM 元素和组件引用

获取 DOM 元素

<div id="app">
    <input type="button" value="获取 DOM" @click="getDOM">
    <h1 ref="myRef">这是一个 h1</h1>
</div>

</body>
<script>
    new Vue({
        el: "#app",
        methods: {
            getDOM() {
                console.log(this.$refs.myRef.innerText)
            }
        },
    })
</script>

获取组件引用

获取组件引用可以调用子组件的数据和方法。

<div id="app">
    <input type="button" value="点击" @click="show">
    <child ref="comp"></child>
</div>

<template id="btn">
    <h1>这是一个组件</h1>
</template>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "这是一个 div"
        },
        methods: {
            show() {
                console.log(this.$refs.comp.msg)
                this.$refs.comp.show()
            }
        },
        components: {
            'child': {
                template: "#btn",
                methods: {
                    show(){
                        console.log("调用了子组件的方法")
                    }
                },
                data: function () {
                    return {
                        msg: "你好"
                    }
                }

            }

        }
    })
</script>

新评论