VUE基础

最新推荐文章于 2023-10-11 15:43:32 发布

SinceThenLater

最新推荐文章于 2023-10-11 15:43:32 发布

阅读量375

点赞数 2

分类专栏：笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_42739776/article/details/109579111

版权

笔记专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js在实际开发中的应用，包括文本和事件处理，v-model的使用，动态改变元素颜色的策略，axios请求数据初始化，前端样式居中，模糊搜索功能，以及组件的全局和局部注册与父子组件间的数据传递。通过实例展示了Vue.js的强大功能和灵活性。

摘要由CSDN通过智能技术生成

vue.js引入：

1.文本

<div id="box">
        <h1>{{msg+"改变后"+msg.split('').reverse().join('')}}</h1>
    </div>      

  <script>
   var vm = new Vue({
            el:'#box',
            data:{
                msg:'hello'
            },
        });
   </script>

2.事件

<div id="box">
        <h1>{{msg+"改变后"+msg.split('').reverse().join('')}}</h1>
        <button @click='change'>改变</button>
        <div v-if='show'>为真显示</div>
        <div v-else>为假显示</div>
        //事件设置方式1 v-on:事件名="函数"
        <div v-on:click="click1">点击事件1</div>
        //事件设置方式2 @事件名="函数"
        <div @click="click2">点击事件2</div>
        //默认事件取消 .prevent  默认事件取消冒泡 .stop
        <a href="www.baidu.com" @click.prevent="click3">a标签点击事件</a>
    </div>
    <script>
        var vm = new Vue({
            el:'#box',
            data:{
                msg:'hello',
                show:false
            },
            methods:{
            //函数定义
                change(){
                    this.msg='OK'
                },
                click1(){
                    alert('点击事件1')
                },
                click2(){
                    alert('点击事件2')
                },click3(){
                    alert('a标签点击事件')
                }
            }
        });
    </script>

3.v-model使用

<input v-model="info" placeholder="edit me">
        <p>Message is: {{ info}}</p>
此处需要在data中加入info这个字段      
          data:{
                msg:'hello',
                show:false,
                info:''
              },

4.改变标签颜色的两种情况：

（1）只能存在一种不同的颜色状况时：
如导航栏：
在这里插入图片描述
代码如下：

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

<style>
        li{ float: left; list-style: none;text-align: center;width:80px}
        .color1{
            background-color: red;
        }
        .color2{
            background-color: green;
        }
    </style>

<div id="app">
        <div>
            <div>
                <ul>
  //三目运算：这里判断元素i的下标是否与当前被选中的元素下标相同，相同时设置其class为color1 否者为color2
                    <li v-for="(item,i) in title" :class="index==i?'color1':'color2'" @click="change(i)" v-text="item"></li>
                </ul>
            </div>
            <div>
                 你选择了<span class="color2" v-text="name"></span>
            </div>
        </div>
    </div>

<script>
    var vue = new Vue({
        el:"#app",
        data:{
            title:["HTML","CSS

","JavaScript","Vue.js"],
                name:'HTML',
                index:0 //当前元素，默认选中第一个
            },
            methods:{
               change(i){
               //动态改变被选中元素索引
                this.index=i;
                this.name=this.title[i]
               }
            }
        })
    </script>

（2）当需要多个时：
要求：原本都是绿色你点击一次后变为黄色，再点一次变为绿色。
底部的total为所有黄色数值之和
在这里插入图片描述
以下代码仅实现了功能，而没有添加样式：

<div id="app">
       <ul>
           <li v-for="(item,index) in course" :class="item.active?'color1':'color2'" @click="change(index)">
               <span v-text="item.name"></span>
               <span v-text="item.price"></span>
           </li>
       </ul>
       <span v-text="total"></span>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                course:[{
                    name:"前端开发",
                    price:3000,
                    active:false
                },
                {
                    name:"python",
                    price:"1000",
                    active:false
                },
                {
                    name:"Java开发",
                    price:2000,
                    active:false
                },{
                    name:"GO语言",
                    price:2200,
                    active:false
                }],
                total:0
            },
            methods: {
                change(i){
                  this.course[i].active=!this.course[i].active,
                  this.total=this.course[i].active?(this.total+=parseFloat(this.course[i].price)):(this.total-=parseFloat(this.course[i].price))
                }
            }
        })
    </script>

效果：
在这里插入图片描述

5.vue中通过axios发送请求对数据初始化：

需要引入axios

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <script src="../axios.min.js"></script>
</head>
<body>
    <div id="app">
        <div></div>
        <button @click="get">提交</button>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{},
            methods: {
            get(){
                var that = this;
                axios.get('http://localhost/user')
            .then(function(response){
            //then是事件处理后的数据回调
                that.data = response
                console.log(response)
             }).catch(function(error){
             //catch是错误捕获处理
              console.log(error)
             })}
            },
        })
    
    </script>
</body>
</html>

6.前端样式居中的问题：

（1）.首先body设置text-align:center
（2）对需要居中的div盒子设置css样式margin:0 auto
效果：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <script src="../axios.min.js"></script>
    <style>
         body {
	        background-color:#eee7e1;
	        font-size:12px;
            line-height:12px;
            text-align:center;
         }
         .goods{
             height:230px;
             width: 190px;
             background-color:aliceblue;
             margin:0 auto
         }
         .top{
           background-color: crimson;
           height: 20px;
           width: 190px;
           margin:0 auto
         }
    </style>
</head>
<body>
    <div id="app" class="app">
      <div class="top"></div>
      <div class="goods" v-for="item in infos">
          <p>
              <span v-text="item.num"></span>
              <span v-text="item.name"></span>
          </p>
          <p><img :src="item.imgUrl"/></p>
          <p v-text="item.desc"></p>
          <div style="background-color:aqua;height: 10px;width: 190px;"></div>
      </div>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                infos:[]
            },
            methods:{

            },mounted(){
                var that = this;
               axios.get("../data.json")
               .then(function(respnose) {
                   var string = JSON.stringify(respnose.data).trim();
                   console.log(respnose.data)
                   that.infos=eval(respnose.data);
                 })
               .catch(function(error){
                   console.log(error)
               })
            
            }
        })
    </script>
</body>
</html>

注意：这里有一个踩坑点：
原来的数据中num、name、imgUrl、desc是没有引号的，而且其文件为.txt文件，在通过上面的get请求时，得到的数据中有很多的/r/n导致页面无法正常显示，后来我就把它改成了标准的json格式数据就可以了：如下

[{
            "num": 1,
            "name": "Za姬芮新能真皙美白隔离霜 35g",
            "imgUrl": "../image/icon-1.jpg",
            "desc":"￥59.90 最近13403人购买"
        }, {
            "num": 2,
            "name": "美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml",
            "imgUrl": "../image/icon-2.jpg",
            "desc":"￥89.00 最近13610人购买"
        }, {
            "num": 3,
            "name": "菲奥娜水漾CC霜40g",
            "imgUrl": "../image/icon-3.jpg",
            "desc":"￥59.90 最近13403人购买"
        }, {
            "num": 4,
            "name": "HC 蝶翠诗橄榄卸妆油 200ml",
            "imgUrl": "../image/icon-4.jpg",
            "desc":"￥169.00 最近16757人购买"
        }]

7.模糊搜索功能

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <script src="../axios.min.js"></script>
</head>
<body>
    <div id="app">
      <div>
          <input v-model="searchQuery"/>
          <table>
              <thead>
                  <tr>
                      <td v-for="col in columns">{{col | toUpper}}</td>
                  </tr>
              </thead>
              <tbody>
                  <tr v-for="r in result">
                      <td v-for="col in columns">{{r[col]}}</td>
                  </tr>
              </tbody>
          </table>
      </div>
    </div>
    <script>
        var vm =new Vue({
            el:'#app',
            data:{
                columns: ['name', 'gender', 'age'],
                infos:[],
                searchQuery:""
            },
            methods: {
                
            },
            mounted() {
                var that = this;
                axios.get("../name.json").then(function (response) {
                    console.log(response.data)
                    that.infos = response.data
                  })
            },
            filters: {
              toUpper(value){
                return value.charAt(0).toUpperCase()+value.slice(1)
              }  
            },
            computed: {
                result(){
                    var that = this;
                    return this.infos.filter(function (param) { 
                        return param.name.toLowerCase().indexOf(that.searchQuery.toLowerCase())!==-1;
                     })
                }
            },
        })
    </script>
</body>
</html>

8.Vue全局组件，在多个vue实例之间都能使用

注意：当你在组件中对多行组件值渲染时，需要用一个容器进行包裹：

<template id="t">
//需要进行包裹
        <div>
            <span v-text="info"></span>
            <span>{{code}}</span>
        </div>
    </template>

完整代码：

 <div id="content">
        //调用组件
        <test></test>
    </div>
    <template id="t">
        <div>
        //这里的info取到的是组件中的info而非vue实例中的
            <span v-text="info"></span>
            <span>{{code}}</span>
        </div>
    </template>
    <script>
        Vue.component('test',{
           template:"#t",
           data:function () { 
               return {
                   info:"ok",
                   code:200
               }
            }
        })
        var vm = new Vue({
            el:'#content',
            data:{
                info:"OK",
                code:"200"
            }
        })
    </script>

9.局部组件

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <template id="t">
        <div>
            <span>{{msg}}</span>
        </div>
    </template>
    <template id="t2">
        <div>
            <span>{{msg}}</span>
        </div>
    </template>
    <div id="app">
      <test1></test1>
    </div>
    <div id="app2">
        <test2></test2>
    </div>
    <script>
        //第一个vue实例
        var vm = new Vue({
            el:'#app',
            data:{

            },
            components:{
                //此组件只能在id为app的容器中使用
                "test1":{
                    //引用id为t的模板内容
                    template:"#t",
                    data:function(){
                        return {
                            msg:"test1"
                        }
                    }
                }
            }
        });
        //第二个vue实例
        var vm2 = new Vue({
            el:"#app2",
            data:{

            },
            components:{
                //此组件只能在id为app2的容器中使用
                "test2":{
                    //引用id为t2的内容
                    template:"#t2",
                    data:function(){
                        return{
                            msg:"test2"
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>

10.父子组件

一个组件包含了另一个组件，就叫父子组件：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <template id="t1">
        <div>
            <h1>这是父组件</h1>
            <child></child>
            <div>
                <child></child>
            </div>
        </div>
    </template>
    <template id="t2">
        <div>这是子组件</div>
    </template>
    <div id="app">
        <parent></parent>
    </div>
    <script>
        var vm =new Vue({
           el:'#app',
           data:{},
           components:{
             "parent":{
                 template:"#t1",
                 components: {
                     "child":{
                         template:"#t2"
                     }
                 }
             }
           } 
        }) 
    </script>
</body>
</html>

11.传值问题：

1.props传值：

   <template id="t1">
        <div :class="color">
            <span>{{title}}</span>
        </div>
    </template>
    <div id="app">
     //这里的color与script文件中组件1的color对应，color是自定义的属性，建议传值时不要命名为class等属性，容易混淆导致报错
        <test color="red"></test>
        //这里的color和title与script文件中组件2的color和title对应
        <test2 color="red" title="t1"></test2>
    </div>
    <script>
    //组件1
        Vue.component('test',{
            props:['color'],
            //这里的color是组件中你定义的
            template:'<div :class="color">组件</div>'
        });
        //组件2
        Vue.component('test2',{
            props:['color','title'],
            template:"#t1"
        })
       var vm = new Vue({
           el:'#app',
           data:{}
       })
    </script>

2.$emit传值

SinceThenLater

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
VUE基础

vue.js引入：1.文本<div id="box"> <h1>{{msg+"改变后"+msg.split('').reverse().join('')}}</h1> </div> <script> var vm = new Vue({ el:'#box', data:{ msg:'hello'
复制链接

扫一扫