Vue框架

一、可以进行简写的部分

　1、Vue.js 监听事件中的 v-on:click="xxx"

　　　可以简写为 @:click="xxx"

　2、Vue.js 属性绑定中的 v-bind:href="xxx"

　　　可以简写为 :href="xxx"

二、Vue.js 的基本运用

　1、首先得，像引入 bootstrap.min.js 一样，在文件开头引入这个 Js文件

    <script src="vue.min.js"></script>

　2、然后，利用 Json数据，和 Vue 对象进行值的传递

    new Vue({
        
    })

　3、在HTML代码中，进行响应的操作，怎么说呢，类似 Django，JSP的语法。响应可以到具体教程网站中进行学习

三、Vue框架中的难点

　1、双向绑定中的修饰符

　　　修饰符 .lazy

　　　　对于输入元素，默认的行为方式是一旦有数据变化，马上进行绑定，加上 .lazy之后，相当于监听 change操作，只有在失去焦点的时候，才会进行数据绑定

　　　修饰符 .number

　　　　v-model 默认是String类型，通过 .number 方式确保获取到的是数字类型

　　　修饰符 .trim

　　　　干掉输入框中输入的前后的空白

 　　　

        <!-- xxx 一般是Json数据的某数据名称 -->
        <input type="text" v-model.number="xxx">
        <input type="text" v-model.trim="xxx">
        <input type="text" v-model.lazy="xxx">

　　2、computed 和 methods 的区别

　　　computed  是有缓存的，这样如果是复杂计算，会节省不少时间。

　　　而 methods 每次都会调用，至于直接在 HTML 代码间进行运算，则只适合于简单的算术运算。

 　   3、过滤器

　　　过滤器可以是一个，也可以是多个，也可以是全局的，简单点说就是一个对相关数值进行操作的函数。

{{data|capitaliza}}

{{data|capitaliza|capitaliza1}}

Vue.filter('过滤器名称', function(value){// 相关函数操作})

　　4、自定义指令

         1.使用 Vue.directive 来自定义

         2. 第一个参数就是 指令的名称

　　  3. 第二个参数如果是函数，那么其参数就是 HTML DOM 对象

　　  4. 在方法体内，可以使用 JS 语法，Dom 来操作当前元素

 　　 5. 第二个参数的第二个参数可以是一个Json对象，通过 . 语法取用

 　　5、路由

　　　简单说，就是那啥的 局部刷新，可以实现多视图的单页 Web 应用

　　　将 别的路径中的内容显示在该页面的某一区域中

　　　基本步骤：

　　　　　1.定义路由组件，就是定义template

　　　　　2.定义路由，为路由赋值这些路由组件

　　　　　3.实例路由，就是用到VueRouter包

　　　　　4.挂载路由，就是用到Vue包

<div id="app">
    <div class="menu">
        <!--
                    router-link 相当于就是超链
                    to 相当于就是 href
                -->
        <router-link to="/user">用户管理</router-link>
        <router-link to="/product">产品管理</router-link>
        <router-link to="/order">订单管理</router-link>
    </div>

    <div class="workingRoom">
        <!--
                    点击上面的/user,那么/user 对应的内容就会显示在router-view 这里
                 -->
        <router-view></router-view>
    </div>

</div>
<script>
    /*
     * 申明三个模板( html 片段 )
     */
    var user = {
        template: '<p>用户管理页面的内容</p>'
    };
    var second = {
        template: '<p>产品管理页面的内容</p>'
    };
    var order = {
        template: '<p>订单管理页面的内容</p>'
    };
    /*
     * 定义路由
     */
    var routes = [{
            path: '/',
            redirect: '/user'
        }, // 这个表示会默认渲染 /user，没有这个就是空白
        {
            path: '/user',
            component: user
        },
        {
            path: '/product',
            component: second
        },
        {
            path: '/order',
            component: order
        }
    ];
    /*
     * 创建VueRouter实例
     */
    var router = new VueRouter({
        routes: routes
    });
    /*
     * 给vue对象绑定路由
     */
    new Vue({
        el: "#app",
        router
    })
</script>

LovelyCat