Vue基础二

/ vue / 2 条评论 / 1131浏览

vue

计算属性

普通方式计算属性

直接在{{}}表达式中计算：{{input/val}}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="div1">
    <table align="center" border="1px">
        <th>人民币</th>
        <th>美元</th>
        <tr>
            <td>汇率<input v-model="val"></td>
        </tr>
        <tr>
            <td>￥<input v-model.number="input"></td>
            <td>${{input/val}}</td>
        </tr>
    </table>
</div>
<script>
    //1.构建vue
    var vm = new Vue({
        el: '#div1',
        data: {
            input: 0,
            val: 6.4
        }
    })
</script>

在computed 中计算

computed便于计算复杂的表达式 且利于维护

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="div1">
    <table align="center" border="1px">
        <th>人民币</th>
        <th>美元</th>
        <tr>
            <td>汇率<input v-model="val"></td>
        </tr>
        <tr>
            <td>￥<input v-model.number="input"></td>
            <td>${{dollar}}</td>
        </tr>
    </table>
</div>
<script>
    //1.构建vue
    var vm = new Vue({
        el: '#div1',
        data: {
            input: 0,
            val: 6.4
        },
        computed: {
            dollar: function(){
                return this.input / this.val;
            }
        }
    })
</script>

methods方法实现

computed是有缓存的，而methods是每次都会执行

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="div1">
    <table align="center" border="1px">
        <th>人民币</th>
        <th>美元</th>
        <tr>
            <td>汇率<input v-model="val"></td>
        </tr>
        <tr>
            <td>￥<input v-model.number="input"></td>
            <td>${{dollar()}}</td>
        </tr>
    </table>
</div>
<script>
    //1.构建vue
    var vm = new Vue({
        el: '#div1',
        data: {
            input: 0,
            val: 6.4
        },
        methods: {
            dollar: function(){
                return this.input / this.val;
            }
        }
    })
</script>

监听属性watch

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="div1">
    <table align="center" border="1px">
        <th>人民币</th>
        <th>美元</th>
        <tr>
            <td>汇率<input v-model.number="exchange"></td>
        </tr>
        <tr>
            <td>￥<input v-model.number="rmb"></td>
            <td> $: <input v-model.number = "dollar"/></td>
        </tr>
    </table>
</div>
<script>
    //1.构建vue
    var vm = new Vue({
        el: '#div1',
        data: {
            rmb: 0,
            exchange: 6.4,
            dollar: 0
        },
        watch: {
            rmb: function(val){
                this.rmb = val;
                this.dollar = this.rmb / this.exchange;
            },
            dollar: function(val){
                this.dollar = val;
                this.rmb =  this.dollar * this.exchange;
            }
        }
    })
</script>

过滤器filters

单个过滤器使用

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="div1">
    <table align="center" border="1px">
        <th>输入数据</th>
        <th>过滤后的结果</th>
        <tr>
            <td><input v-model="before"></td>
            <td>{{ before|capitalize }}</td><!--'|'的意思是将数据传输给过滤器-->
        </tr>
    </table>
</div>
<script>
    //1.构建vue
    var vm = new Vue({
        el: '#div1',
        data: {
            before: ''
        },
        filters: {
            capitalize: function(value){
                if(!value)return '';//如果为空，则返回空字符串
                value = value.toString();
                return value.charAt(0).toUpperCase() + value.substring(1);
            }
        }
    })
</script>

多个过滤器使用

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="div1">
    <table align="center" border="1px">
        <th>输入数据</th>
        <th>过滤后的结果</th>
        <tr>
            <td><input v-model="before"></td>
            <td>{{ before|capitalize|capitalizeLastLetter }}</td><!--'|'的意思是将数据传输给过滤器-->
        </tr>
    </table>
</div>
<script>
    //1.构建vue
    var vm = new Vue({
        el: '#div1',
        data: {
            before: ''
        },
        filters: {
            capitalize: function(value){
                if(!value)return '';//如果为空，则返回空字符串
                value = value.toString();
                return value.charAt(0).toUpperCase() + value.substring(1);
            },
            capitalizeLastLetter: function(value){
                if(!value)return '';//如果为空，则返回空字符串
                value = value.toString();
                return value.substring(0,value.length-1) + value.charAt(value.length-1).toUpperCase();
            }
        }
    })
</script>

全局过滤器

在这之前 过滤器都是定义在vue里面的，但是有时候，很多不同的页面都会用到相同的过滤器，如果每个Vue对象里都重复开发相同的过滤器，不仅开发量增加，维护负担也增加了。
所以就可以通过全局过滤器的方式，只定义一次过滤器，然后就可以在不同的Vue对象里使用了。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="div1">
    <table align="center" border="1px">
        <th>输入数据</th>
        <th>过滤后的结果</th>
        <tr>
            <td><input v-model="before"></td>
            <td>{{ before|capitalize|capitalizeLastLetter }}</td><!--'|'的意思是将数据传输给过滤器-->
        </tr>
    </table>
</div>
<script>
    //1.注册全局过滤器
    Vue.filter('capitalize', function(value){
        if(!value)return '';//如果为空，则返回空字符串
        value = value.toString();
        return value.charAt(0).toUpperCase() + value.substring(1);
    })
    Vue.filter('capitalizeLastLetter', function(value){
        if(!value)return '';//如果为空，则返回空字符串
        value = value.toString();
        return value.substring(0,value.length-1) + value.charAt(value.length-1).toUpperCase();
    })
    
    //1.构建vue
    var vm = new Vue({
        el: '#div1',
        data: {
            before: ''
        }
    })
</script>

组件components

组件：创建模板 向模板中传递不同的参数就可以看到不同的显示

简单上手

<!--
    1.在vue中创建components
    2.页面中直接使用<product></product>
-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="div1">
    <product></product>
    <product></product>
    <product></product>
</div>
<script>
    //1.构建vue
    var vm = new Vue({
        el: '#div1',
        components:{
            'product':{
                template:'<div class="product">iphone xs</div>'
            }
        }
    })
</script>

全局组件 重复使用

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="div1">
    <product></product>
    <product></product>
    <product></product>
</div>
<script>
    //1.注册全局组件
    Vue.component('product', {
        template:'<div class="product">iphone xs</div>'
    })
    
    //2.构建vue
    var vm = new Vue({
        el: '#div1'
    })
</script>

携带参数

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="div1">
    <product name="iphone x"></product>
    <product name="iphone xs"></product>
    <product name="iphone xsMax"></product>
</div>
<script>
    //1.注册全局组件（携带参数）
    Vue.component('product', {
        props:['name'],
        template:'<div class="product">{{name}}</div>'
    })
    
    //2.构建vue
    var vm = new Vue({
        el: '#div1'
    })
</script>

动态参数

<!--
    1.先对input进行双向绑定
    2.传入的值就是双向绑定的值
    3.v-bind就是绑定一个属性 例：v-bind:value="first"
-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="div1">
    输入：<input v-model="input"><br>
        <product v-bind:name="input"></product>
</div>
<script>
    //1.注册全局组件
    Vue.component('product', {
        props:['name'],
        template:'<div class="product">{{name}}</div>'
    })
    
    //2.构建vue
    var vm = new Vue({
        el: '#div1',
        data: {
            input: ''
        }
    })
</script>

自定义事件

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="div1">
    <product name="iphone x" sale="0"></product>
    <product name="iphone xs" sale="0"></product>
    <product name="iphone xsMax" sale="0"></product>
</div>
<script>
    //1.注册全局组件
    Vue.component('product', {
        props:['name','sale'],
        template:'<div class="product" v-on:click="increaseSale">{{name}} 销量：{{sale}}</div>',
        methods: {
            increaseSale:function(){
                this.sale++
            }
        }
    })
    
    //2.构建vue
    var vm = new Vue({
        el: '#div1'
    })
</script>

遍历json

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="div1">
    <product v-for="item in products" v-bind:product="item"></product>
</div>
<script>
    //1.注册全局组件
    Vue.component('product', {
        props:['product'],
        template:'<div class="product" v-on:click="increaseSale">{{product.name}} 销量：{{product.sale}}</div>',
        methods: {
            increaseSale:function(){
                this.product.sale++
            }
        }
    })
    //2.构建vue
    var vm = new Vue({
        el: '#div1',
        data:{
              products:[
                        {"name":"iphone x","sale":"10"},
                        {"name":"iphone xs","sale":"20"},
                        {"name":"iphone xsMax","sale":"30"}
                        ]
        }
    })
</script>

自定义指令

v-if, v-bind, v-on 等等前面学习的指令，都是 vus.js 自带的指令

案例：文字颜色变成红色，并在最后加上(custom)

<!--
    1.构建vue
    2.注册指令Vue.directive
    3.使用指令v-指令名称
-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="div1">
     <div v-custom> 因为热爱，所以联盟 </div>
</div>
<script>
    
    //1.注册指令
    Vue.directive('custom', function(el){
        el.innerHTML = el.innerHTML + '(custom)';
        el.style.color = 'red';
    })
    
    //2.构建vue
    var vm = new Vue({
        el: '#div1'
    })
</script>

带参数的自定义指令

v-指令名称="参数"

<!--
    1.构建vue
    2.注册指令Vue.directive
    3.使用指令v-指令名称=参数
-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="div1">
     <div v-custom="{color:'red',text:'fpx'}"> 好好学习，天天向上 </div>
</div>
<script>
    //1.注册指令
    Vue.directive('custom', function(el, bd){
        el.innerHTML = el.innerHTML + bd.value.text;
        el.style.color = bd.value.color;
    })
    
    //2.构建vue
    var vm = new Vue({
        el: '#div1'
    })
</script>

回调函数

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
unbind：只调用一次，指令与元素解绑时调用。

传递到里面的属性
name：指令名，不包括 v- 前缀。
value：指令的绑定值，本例就是hello vue.js
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。本例就是 message
arg：传给指令的参数，本例就是hello
modifiers：一个包含修饰符的对象。本例就是 .a .b

Vue.directive('xart', {
      bind: function (el, binding, vnode) {
            var s = JSON.stringify
            el.innerHTML =
              'name: '       + s(binding.name) + '<br>' +
              'value: '      + s(binding.value) + '<br>' +
              'expression: ' + s(binding.expression) + '<br>' +
              'argument: '   + s(binding.arg) + '<br>' +
              'modifiers: '  + s(binding.modifiers) + '<br>' +
              'vnode keys: ' + Object.keys(vnode).join(', ')
      },
      update: function (newValue, oldValue) {
        // 值更新时的工作
        // 也会以初始值为参数调用一次
      },
      unbind: function () {
        // 清理工作
        // 例如，删除 bind() 添加的事件监听器
      }
    })

路由

<!-- 
    1.定义路由组件，就是定义template
    2.定义路由，为路由赋值这些路由组件
    3.实例路由，就是用到VueRouter包
    4.挂载路由，就是用到Vue包
 -->
<style>
    a {
        text-decoration: none;
    }

    a.router-link-active {
        /*   color:blue; */
        background-color: lightGray;
    }

    div.menu {
        border: 1px solid gray;
        float: left;
    }

    div.menu a {
        display: block;
    }

    div.workingRoom {
        margin-left: 100px;
    }

    div#app {
        width: 500px;
        padding: 10px;
        margin: 10px auto;
    }
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="http://how2j.cn/study/vue-router.min.js"></script>

<div id="app">
    <div class="menu">
        <!-- 
            router-link 相当于超链接
            to 即：超链接地址
         -->
        <router-link to="/user">用户管理</router-link>
        <router-link to="/product">商品管理</router-link>
        <router-link to="/order">订单管理</router-link>
    </div>
    <div class="workingRoom">
        <!-- 
            点击上面的/user，那么对应的内容就会显示在router-view中
         -->
        <router-view></router-view>
    </div>
</div>

<script>
    /**
     * 声明三个模板
     */
    var user = {template: '<p>用户管理内容</p>'};
    var product = {template: '<p>商品管理内容</p>'};
    var order = {template: '<p>订单管理内容</p>'};

    /**
     * 定义路由
     */
    var routes = [
        {path: '/',redrect: '/user'},
        {path: '/user',component: user},
        {path: '/product',component: product},
        {path: '/order',component: order},
    ];

    /**
     * 创建VueRouter实例
     */
    var router = new VueRouter({
        routes: routes
    });

    /**
     * 给vue对象绑定路由
     */
    var vm = new Vue({
        el: '#app',
        router
    })
</script>

本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名,转载请标明出处
最后编辑时间为: 2019/11/13 15:43