5.前端-Vue的高级功能

最新推荐文章于 2022-04-13 18:48:26 发布

兴趣使然的CV工程师

最新推荐文章于 2022-04-13 18:48:26 发布

阅读量189

点赞数

分类专栏： Vue 文章标签：过滤器 vue property processing gwt

本文链接：https://blog.csdn.net/weixin_51211461/article/details/119696069

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

侦听器watch-methods包括了它的功能

效果图，在更改数量的时候总价随之变化，在超出库存的时候提示超出库存

正常使用函数进行调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>    
    <div id="app">
    <ul>
        <li v-for="(item,index) in car">
            {{item.name}}--商品价格：{{item.price}}--库存：{{item.stock}}
            数量：<input type=number v-model="item.num">
        </li>
        <li><strong>总价：</strong>{{getSum}}</li>
        <!-- 在使用<br/>时需要使用v-html -->
        <div v-html="warn()"></div>
    </ul>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        let vm=new Vue({
            el: "#app",
            data:{
                car:[
                    {name:"华为",price:4999,stock:3,num:1},
                    {name:"小米",price:3999,stock:6,num:1}
            ]},
            //和method效果一样，在调用的时候可以不用写()
            //每次当函数里使用过的数据改变时sum也会跟着改变
            computed:{
                getSum(){
                    let sum=0;
                    this.car.forEach(element => {
                        sum+=element.price*element.num
                    });
                    return sum;        
                }
            },
            methods: {
                warn(){
                    let msg="";
                    this.car.forEach(item=>{
                        if(item.num>item.stock){
                            msg+=`${item.name}的库存超出限制<br/>`
                        }}  
                    )
                    return msg;
                }
            },
        })
    </script>
</body>
</html>

侦听器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in car">
                {{item.name}}--商品价格：{{item.price}}--库存：{{item.stock}}
                数量：<input type=number v-model="item.num">
            </li>
            <li><strong>总价：</strong>{{getSum}}</li>
            <div v-html="message"></div>
        </ul>

    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                car: [{
                        name: "华为",
                        price: 4999,
                        stock: 3,
                        num: 1
                    },
                    {
                        name: "小米",
                        price: 3999,
                        stock: 6,
                        num: 1
                    }
                ],
                //用于接受侦听器的数据
                message: ""
            },
            computed: {
                getSum() {
                    let sum = 0;
                    this.car.forEach(element => {
                        sum += element.price * element.num
                    });
                    return sum;

                }
            },
            methods: {
            },
            //侦听器
            watch: {
                car: {
                    handler(newvalue, oldvalue) {
                        //置空
                        this.message = "";
                        this.car.forEach(item => {
                            if (item.num > item.stock) {
                                this.message += `${item.name}的库存超出限制<br/>`
                            }
                        });
                    },//因为是数组所以要启用深度侦听，适用于数组和对象
                deep: true
                }
            }
        })
    </script>
</body>
</html>

方法体中，只要有使用的变量发生变化就会调用，侦听器则是针对某一个变量更加有针对性

如果num在初始环境下就大于了库存，如果也想有提示信息的话就只能用方法来写了

过滤器filters---methods包括了它的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul >
            <li v-for="(item, index) in userlist" >
                {{item.name}}-{{item.age}}--{{item.gender|Gender}}--{{GetGender(item.gender)}}
            </li>
        </ul>
    </div>
  
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        let vm=new Vue({
            el: "#app",
            data: {
                userlist: [
                    {name:"小吴",age:10,gender:0},
                    {name:"小红",age:10,gender:1},
                    {name:"小白",age:10,gender:2},
                ]
                //当然方法也可以使用
            },methods: {
                GetGender(gender){
                    if(gender==0){
                       return "~男"
                   }else if(gender==1){
                       return "~女"
                   }else{
                       return "~阴阳人"
                   }
                }
            },
            //过滤器
            filters:{
                Gender(gender){
                   if(gender==0){
                       return "男"
                   }else if(gender==1){
                       return "女"
                   }else{
                       return "阴阳人"
                   }
                }
            }
        })
    </script>
</body>
</html>

组件化--复用

全局组件，放在vue外面，所有的vue模板实例都可使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">
        <xiaowu :sonnum="parentNum"></xiaowu>
    </div>
   
    
    <script src="./node_modules/vue/dist/vue.js"></script>
    <!-- 在使用组件的时候不要使用驼峰命名！！！ -->
    <script>
        //组件也是vue实例在这里其实是app对象的子实例，要使用组件必须使用绑定app
        Vue.component("xiaowu",{
            //data属性必须写成函数形式
            data(){
                return {num:10}
            },
            //从父类中取值需要借助这个属性
            //模板 点击就会++的模板 两个标签一个从自己接收，一个从Vue实例接收
            //由于是嵌套解构在点击num的时候事件会冒泡影响到sonnum
            template:`
            <div @click="sonnum++">{{sonnum}} <div @click="num++">{{num}}</div></div>` 
            ,props: ["sonnum"]
            
        })
        new Vue({
            el:"#app",
            data:{
                parentNum:20
            }
        })
    </script>
</body>
</html>

局部组件，在vue里面声明，像这样写在外面清楚一点

Vue的生命周期

Vue-路由--没实现效果，暂时不知道错在哪

安装

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
      <div>
        <router-link to="/index">登陆</router-link>
        <router-link to="/product">商品</router-link>
        <router-view></router-view>
      </div>
     
    </div>



    <script src="./node_modules/vue/dist/vue.js"></script>
    <!-- 引入路由 -->
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
    <script type="text/javascript">
        let Index = Vue.component("index", {
            template: `<h1>欢迎来到宇智波联盟</h1>`
        });
        let Product = VUe.component("product", {
            template: `<ul><li>1.小米</li><li>2.iphone</li></ul>`
        });
        //绑定路由地址和组件
        const router = new VueRouter({
            routes: [{
                    path: "/index",
                    component: Index
                },{
                    path: "/product",
                    component: Product
                }]
        })
        var vm = new Vue({
            el: "#app",
            //名字相同可以省略
            router: router
        })
    </script>
</body>

</html>

脚手架

传送门

如何在脚手架中定义自己的页面

实现过程：

在components中创建XiaoWu.vue组件

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'helloword',
  data () {
    return {
      msg: '你好啊，小吴'
    }
  }
}
</script>

<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

在路由中导入组件

在helloworld里给到链接

装上axios

如果需要所有的东西都能使用axios那么需要把这两个注册为Vue的属性

注意是在main.js里写的而且use函数需要，+空格

兴趣使然的CV工程师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
5.前端-Vue的高级功能

侦听器watch-methods包括了它的功能效果图，在更改数量的时候总价随之变化，在超出库存的时候提示超出库存正常使用函数进行调用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compati...
复制链接

扫一扫