vue.js操作(三)

vue.js 支持镶嵌原生的js代码用来补充vue.js的欠缺。

/* vue.js 支持原生js 的代码扩展,用来达到扩展的目的！
        <input type="text" v-focus>   v-'函数名' el.focus() 这是自定义的属性！
 */
    Vue.directive('focus', {
        inserted: function (el, binging) {
            el.focus();  
        }
    })
    var vm = new Vue({
        el: '#app',

    })

 组件是为了使代码重用。将代码进行封装，供我们调用！

//broad 是定义的组件的名称，可以直接使用！pos 存放的是可变参数，
    Vue.component('broad', {
        props: ['pos'],   
        template: '<h1><a href="#" @click="num++">首页<a> >{{pos}}> 正文 ></h1>',
        // data 里面存放的是自己定义的变量！
        data: function () {
            return {
                num: 0
            }
        }
    })
    //只有在 app标签之中可以使用vue.js 所有的方法与属性！
    var vm = new Vue({
        el: '#app',
    })
    
    /*
<div id="app">
    <broad pos="军训"></broad>    pos 传递是参数
    <broad pos="历史"></broad>
</div>
    */