vue知识点（下）

最新推荐文章于 2023-04-12 21:16:53 发布

A Joker

最新推荐文章于 2023-04-12 21:16:53 发布

阅读量241

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_45958304/article/details/109521119

版权

指令v-if和v-show的使用

用于指定一个boolean值的表达式，根据表达式判断当前元素是否显示。
区别：
v-if当表达式为false时，元素直接从dom中移除。支持else
v-show当表达式为false时，仅仅是把元素设置为隐藏display：none。而没有移除元素。

v-if实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <button @click="seen=!seen">点我</button>
  <p v-if="seen">现在你看到我了</p>
</div>

<script>
	var app = new Vue({
  el: '#app',
  data: {
    seen: true
  }
})
</script>
</body>
</html>

当把seen中true变为false时，就看不到汉字了。

v-bind的使用

日标：了解v-bind语法和作用；实现点击不同按钮切换不同的属性值；使用class属性中的特殊用法实现一个按钮切换背景色
分析：
其中src和height的值如果不想写死，而是想获取vue实例中的数据属性值的话；那可以通过使用v-bind实现；

<img v-bind:src="vue实例中的数据属性名" :height="vue实例中的数据属性名"/>

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <script src="vue.js"></script>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            color: white;
        }
        .red{
            background-color: red;
        }
        .blue{
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click="color='red'">红色</button>
    <button @click="color='blue'">蓝色</button>
    <div :class="color">
        点击按钮改变背景颜色
    </div>
    <hr>
    <br>
    <button @click="bool=!bool">点我改变下面色块的颜色</button>
    <div :class="{red:bool, blue:!bool}">
        点击按钮改变背景颜色
    </div>
</div>
<script type="text/javascript">
    const app = new Vue({
        el: "app",
        data: {
            color: "red"
        }
    });
</script>

</body>
</html>

v-bind的作用：可以对所有元素的属性设置vue实例的数据。

计算属性的使用

目标：
计算属性的应用场景，实现将一个日期时间值转换为yyyy-MM-dd格式字符串
分析:
一个日期的毫秒值要显示为格式化（yyyy-MM-dd）的日期字符串；可以使用computed计算属性里面的方法进行处理。

例题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <h2>
        你的生日是：
        {{new Date(birthday).getFullYear()}}-{{new Date(birthday).getMonth()+1}}-{{new Date(birthday).getDay()}}
    </h2>
    <br>
    <h2>
        你的生日是：
        {{birth}}
    </h2>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            birthday:1429032123201  //毫秒值
        },
        computed:{
            birth(){
                const date = new Date(this.birthday);
                return date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDay();
            }
        }
    })
</script>

</body>
</html>

运行结果：
在这里插入图片描述

小结：
computed计算属性的应用场景：可以应用再插值或者指令表示式复杂的时候。可以将一些属性数据经过方法处理之后返回。

watch基本和深度监控

目标：
watch的使用场景：并使用其监听简单属性值及其对象中属性值的变化。
分析:
在vue实例中数据属性；因为在页面中修改而产生了变化；可以通过watch监控获取其改变前后的值。如果是修改的对象数据属性，可以开启深度监控获取修改后最新的对象数据。如：person.name
小结:
可以如下使用watch进行数据属性的监控：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="message">
    <hr><br>
    <input type="text" v-model="person.name"><br>
    <input type="text" v-model="person.age"><button @click="person.age++">+</button>
    <h2>
        姓名为:{{person.name}}; 年龄为：{{person.age}}
    </h2>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
              message:"黑马",
              person:{"name":"heima", "age":13}
        },
        watch:{
            message(newValue, oldValue){
                console.log("新值："+ newValue + ";旧值：" + oldValue);
            },
            person:{
                //开启深度监控；监控对象的属性值变化
                deep: true,
                handler(obj){
                    console.log("name = " + obj.name + ";age = " + obj.age);
                }
            }
        }
    })
</script>

</body>
</html>

运行结果：
在这里插入图片描述

watch使用场景：可以监控视图中数据的变化而做出响应；如：下拉框列表中，当如果选择了对于的下拉框选项之后，要根据最新的值去加载一些其它数据的话。

组件使用

目标：
了解组件的使用场景；定义点击则计数的组件并使用全局注册和局部注册方式
分析:
可以将通用或者公用的页面模块抽取成vue组件，在vue实例中引用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <!--使用组件-->
    <counter></counter>
    <counter></counter>
    <counter></counter>
</div>
<script type="text/javascript">

    //定义组件
    const counter = {
        template:"<button @click='num++'>你点击了{{num}}次</button>",
        data(){
            return {num:0}
        }
    };

    //全局注册组件：在所有的vue实例中都可以使用组件
    //参数1：组件名称，参数2：具体的组件
    Vue.component("counter", counter);

    var app = new Vue({
        el:"#app"
    });
</script>
</body>
</html>

运行结果：
在这里插入图片描述

1、组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等
2、不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
3、但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
4、全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
5、data的定义方式比较特殊，必须是一个函数。

局部注册

一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着Vue的加载而加载。
因此，对于一些并不频繁使用的组件，会采用局部注册。
先在外部定义一个对象，结构与创建组件时传递的第二个参数一致；然后在Vue中使用它：

组件使用场景：在项目需要重用某个模块（头部、尾部、新闻…）的时候，可以将模块抽取成组件，其它页面中注册组件并引用。

全局注册：在任何vue实例中都可以引用，如：一般网站的头部导航菜单。

局部变量：可以在有需要的页面引入组件，如：商城网站首页页面中各种活动模块。

现成的第三方组件库：
https://element.eleme.cn/#/zh-CN/component/layout

组件通信

页面首先分成了顶部导航、左侧内容区、右侧边栏三部分
左侧内容区又分为上下两个组件
右侧边栏中又包含了3个子组件

各个组件之间以嵌套的关系组合在一起，那么这个时候不可避免的会有组件间通信的需求。

父组件向子组件通信

**目标：**父组件与组件通信的意义：实现父组件将简单字符串和对象更新到子组件
小结:
组件通信意义：父子组件之间数据的交换，能够及时更新组件内容。

在子组件中使用props定义接受数据的属性
简单类型的数据
//定义组件

const introduce = {
template:"<h2>{{title}}</h2>,
//定义接受父组件的属性
props:["title"]
};

数组或对象类型
//定义组件

const myList = {
    template:
    <ul>
        <li v-for="item in items" :key="item.id">{{item.id}}--{{item.name}} </li>
</ul>
,
    //定义接受父组件的属性
    props:{
        items:{
            //数据类型，如果是数组则是Array，如果是对象则是Object
            type:Array,
            //默认值
            default:[]
        }
    }
};

通过props来定义需要从父组件中接受的属性
items：是要接受的属性名称
type：限定父组件传递来的必须是数组，否则报错；type的值可以是Array或者Object（传递对象的时候使用）
default：默认值，

default，如果是对象则需要写成方法的方式返回默认值，如：default（）{return{"xxx":"默认值"};}

子组件向父组件通信

通过子组件绑定自定义事件，自己触发自己的事情调用完成执行外界父组件传递过来的函数操作。函数调用时可以传递参数，从而间接的传递数据给父组件。
通俗来说，就是父组件给子组件传递一个函数，然后子组件调用此函数，调用时可以传参。函数执行时实际执行的是父组件中的逻辑，从而可以拿到子组件传参过来的数据。

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <h2>num={{num}}</h2>
    <!--使用组件-->
    <counter @plus="numPlus" @reduce="numReduce" :snum="num"></counter>
</div>
<script type="text/javascript">

    //定义组件
    const counter = {
        template:`
        <div>
            <button @click='snum++'>+</button>
            <button @click='snum--'>-</button>
    </div>
    `,
        props:["snum"],
    methods:{
        //递增
        incrNum(){
            //调用父组件中的方法
            return this.$emit("plus");
        },
        decrNum(){
            //调用到父组件中的方法
            return this.$emit("reduce");
        }
    }
    };

    var app = new Vue({
        el:"#app",
        components: {
            counter: counter
        },
    data:{
            num:0
        },
    methods:{
            numPlus(){
                this.num++;
        },
        numReduce(){
                this.num--;
        }
    }
    });
</script>
</body>
</html>

axios概述

目标：axios的用途及了解常见方法
小结:
axios的作用：发送异步请求获取数据。常见的方法：get、post；在发送的时候可以指定参数（地址、请求方式和请求头部信息）；返回数据结构（data/status/statusText/headers/config）

格式:
axios.get().then(function(resp)).catch(function()).finally()
或在js中，ES6中，匿名函数可以写为箭头函数。
例：
axios.get().then(function(res,xxx){函数体})或axios.get().then(function(res){函数体})
可以写为
axios.get().then((res,xxx)=>{函数体})或
axios.get().then((res)=>{函数体})
使用箭头函数，好处：
箭头函数没有自己的this关键字。在箭头函数内写this相当于在箭头函数外的this

axios方法及get、post方法使用

**目标：**使用axios方法获取数据并在页面中将数据遍历显示；切换改为get/post方法实现数据加载
小结：
可以使用axios获取对应服务器数据；如果不是同一个服务的数据则可能会出现跨域请求；需要在响应的服务器上配置跨域。

<!DOCTYPE html>
<html lang="en" xmlns="">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <script src="vue.js"></script>
    <script src="axios.min.js"></script>
</head>
<body>
<div id="app">
    <ul>
       <li v-for="(user, index) in users" :key="index">
           {{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
       </li>
   </ul>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
    data:{
            users:[]
        },
    created(){
            //初始化加载数据
        axios({
            url:"data.json",
            method:"get"
        }).then(res=> {
            console.log(res);
            //将数据赋值到vue实例中的数据属性users；
            //不能使用this，在axios回调函数中表示窗口，不是vue实例
            app.users = res.data;
        }).catch(err=>alert(err));
        }
    });
</script>
</body>
</html>

若按住shift运行，会运行catch中的报错内容

在这里插入图片描述

直接运行，以服务的方式去获取数据文件可以直接输出

在这里插入图片描述

跨域：在前端js中如果发送异步请求的话，请求的地址与当前服务器的ip或者端口号不同都是跨域请求，可以使用如下方法在服务器端进行配置：

用post和get实现：

<!DOCTYPE html>
<html lang="en" xmlns="">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <script src="vue.js"></script>
    <script src="axios.min.js"></script>
</head>
<body>
<div id="app">
    <ul>
       <li v-for="(user, index) in users" :key="index">
           {{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
       </li>
   </ul>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
    data:{
            users:[]
        },
    created(){
            //初始化加载数据

        axios.post("data.json").then(res=>{
            console.log(res);
            //将数据赋值到vue实例中的数据属性users；
            //不能使用this，在axios回调函数中表示窗口，不是vue实例
            app.users = res.data;
        }).catch(err=>alert(err));

        /*axios.get("data.json").then(res=>{
            console.log(res);
            //将数据赋值到vue实例中的数据属性users；
            //不能使用this，在axios回调函数中表示窗口，不是vue实例
            app.users = res.data;
        }).catch(err=>alert(err));*/

        /*axios({
            url:"data.json",
            method:"get"
        }).then(res=> {
            console.log(res);
            //将数据赋值到vue实例中的数据属性users；
            //不能使用this，在axios回调函数中表示窗口，不是vue实例
            app.users = res.data;
        }).catch(err=>alert(err));*/
        }
    });
</script>
</body>
</html>