Vue-学习笔记

最新推荐文章于 2024-06-12 11:22:01 发布

I.GQ.I

最新推荐文章于 2024-06-12 11:22:01 发布

阅读量175

点赞数

分类专栏：学习笔记文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/weixin_47135811/article/details/123427974

版权

学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js的基础特性，包括声明式渲染、单向和双向数据绑定、事件处理、条件渲染、列表渲染、计算属性、侦听器、过滤器以及组件生命周期。通过示例展示了如何使用Vue管控元素，实现动态数据展示、响应式更新以及复杂交互。此外，还讨论了解决组件重用问题的策略。

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

vue

使用vue管控元素

声明式渲染

... 
<script src="./node_modules/vue/dist/vue.js"></script> <!-- 引入vue -->

</head>

<body>
    <div id="mydiv">
        <h1>
            姓名：{{name}}  <!-- 取`vm`中的值 -->
        </h1>
    </div>
    <script>
        //声明式渲染
        let vm = new Vue({
            el: "#mydiv", // el：element 元素
            data: {        // data 数据
                name: "张三"   // name 自定义的名字
            }
        })

    </script>

单向绑定

v-bind

简写：: :xxx

用在标签属性上面，通过指令获取data定义变量的值

<div id="app">
        <!-- <div v-bind:style="color" >单向绑定</div> -->
        <!-- 简写方式 ':' 取代了 v-bind -->
        <div :style="color">单向绑定</div>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                color: 'color:red'
            }
        })
    </script>

双向绑定：

v-model

一个地方动，其他地方也会跟着动，双向绑定的数据发生了变化，其他引用了同样数据的标签值也会跟着发生变化、而单向绑定只会自己发生变化

测试中，修改了v-model=num的值，那么其他地方的num也会改变

<body>
    <div id="mydiv">
        <input type="text" v-model=num>
        <h1>
            姓名：{{name}}
            点赞数量：{{num}}
        </h1>
    </div>

    <script>
        let vm = new Vue({
            el: "#mydiv", // el：element 元素
            data: {        // data 数据
                name: "张三",   // name 自定义的名字
                num: 1
            }
  })

事件绑定

v-on:事件名称="调用方法"

简写：@事件名称 @click

<button v-on:click="num++"> 点赞 </button> <!-- 事件绑定，点击button num自加1 -->

绑定方法

  <button v-on:click="cencel">取消点赞</button>
...<script>
  },
            methods: {      // 封装方法
                cencel() {
                    this.num--;
                }
            }

1、vue声明式渲染
2、双向绑定,模型变化，视图变化。反之亦然。
3、事件处理
 v-xx:指令
1、创建vue实例，关联页面的模板，将自己的数据（data）渲染到关联的模板，响应式的
2、指令来简化对dom的一些操作。
3、声明方法来做更复杂的操作。methods里面可以封装方法。
/*
el
*/

v-text,v-html

<body>
    <div id="mydiv">
        {{msg}} {{1+1}} {{hello()}}
        <!-- {{}}  这种方法会因为网速过慢的情况下，加载不出来读取的数据，而直接显示{{}}源码  -->
        <br />
        <span v-html="msg"></span>
        <span v-text="msg"></span>
    </div>
    <script>
        let v = new Vue({
            el: "#mydiv",
            data: {
                msg: "<h1>v-html</h1>"
            },
            methods: {
                hello() {
                    return "world"
                }
            }
        })
    </script>
</body>

v-if

<body>
    <div id="app">
        <input type="checkbox" v-model="ok">
        <div v-if="ok">选中了 </div>
        <div v-else="ok">没选中</div>
    </div>
    
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                ok: false
            }
        })
    </script>
</body>

测试效果

v-for

<body>
    <div id="app">

        <!-- 将userList的值遍历到user中 -->
        <div v-for=" user in userList ">
            {{user.name}}--{{user.age}}
        </div>

        <!-- index: 下标 -->
        <div v-for="(user1,index) in userList2">
            {{index}}:{{user1.name}}--{{user1.age}}
            {{index}}:{{user1.email}}--{{user1.gender}}
        </div>

    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                userList: [
                    { name: "zhangsan", age: 18 },
                    { name: "lisi", age: 20 }
                ],
                userList2: [
                    { name: "alice", age: 21 },
                    { email: "123@op.com", gender: "female" }
                ]
            }
        })
    </script>
</body>

计算属性和侦听器

<body>
    <div id="mydiv">
        <table>
            <!-- 某些结果是基于之前数据实时计算出来的，我们可以利用计算属性，来完成 -->
            <tr>
                <td>西游记</td>
                <td>售价:{{xyjPrice}}</td>
                <td>
                    数量 <input type="number" v-model="xyjnum">
                </td>
                <td>库存{{xyjStock}}</td>
            </tr>
            <tr>
                <td>水浒传</td>
                <td>售价:{{shzPrice}}</td>
                <td>
                    数量 <input type="number" v-model="shznum">
                </td>
                <td>库存{{shzStock}}</td>
            </tr>
            <tr>
                <td>红楼梦</td>
                <td>售价:{{hlmPrice}}</td>
                <td>
                    数量 <input type="number" v-model="hlmnum">
                </td>
                <td>库存{{hlmStock}}</td>
            </tr>
            <tr>
                <td>三国演义</td>
                <td>售价:{{sgyyPrice}}</td>
                <td>
                    数量 <input type="number" v-model="sgyynum">
                </td>
                <td>库存{{sgyyStock}}</td>
            </tr>
        </table>
        <table>
            <tr>
                <td>总价：{{totalPrice}} </td>
            </tr>
            <tr>
                <td> {{msg}}</td>
            </tr>
        </table>
    </div>
    <script>

        let v = new Vue({
            el: "#mydiv",
            data: {
                xyjPrice: 32.9,
                shzPrice: 35.9,
                hlmPrice: 29.9,
                sgyyPrice: 31.9,
                xyjnum: 0,
                shznum: 0,
                hlmnum: 0,
                sgyynum: 0,
                msg: "",
                xyjStock: 5,
                shzStock: 10,
                hlmStock: 7,
                sgyyStock: 12
            },
            computed: {
                totalPrice() {
                    return (this.xyjPrice * this.xyjnum) + (this.shzPrice * this.shznum) + (this.hlmPrice * this.hlmnum) + (this.sgyyPrice * this.sgyynum)
                }
            },
            watch: {//watch 可以让我们监控一个值的变化，从而做出响应的反应
                xyjnum(newVal, oldVal) {
                    if (newVal >= this.xyjStock) {
                        this.msg = "超出库存"
                        this.xyjnum = this.xyjStock
                    } else {
                        this.msg = ""
                    }
                },
                shznum(newVal, oldVal) {
                    if (newVal >= this.shzStock) {
                        this.msg = "超出库存"
                        this.shznum = this.shzStock
                    } else {
                        this.msg = ""
                    }
                },
                hlmnum(newVal, oldVal) {
                    if (newVal >= this.hlmStock) {
                        this.msg = "超出库存"
                        this.hlmnum = this.hlmStock
                    } else {
                        this.msg = ""
                    }
                },
                sgyynum(newVal, oldVal) {
                    if (newVal >= this.sgyyStock) {
                        this.msg = "超出库存"
                        this.sgyynum = this.sgyyStock
                    } else {
                        this.msg = ""
                    }
                },
            }
        })
    </script>
</body>

过滤器

<body>
    <div id="mydiv">
        <ul v-for="user in users">
            <li>
                {{user.id}}-->{{user.name}}-->{{user.gender}}-->{{user.gender==1?"男":"女"}}
                <!-- 三元运算的方式判断性别-->
                -->{{user.gender | genderFilter}}-->{{user.gender | genderF}}
                <!-- 过滤器的方式判断性别 -->
            </li>
        </ul>
    </div>
    <script>
        Vue.filter("genderF", function (val) { // 全局过滤
            if (val == 1) {
                return "男！！"
            } else if (val == 0) {
                return "女！！"
            }
        })
        let v = new Vue({
            el: "#mydiv",
            data: {
                users: [{ id: 1, name: "小刚", gender: 1 }, { id: 2, name: "小红", gender: 0 }]
            },
            filters: { // filters 定义局部过滤器，只可以在当前vue实例中使用
                genderFilter(val) {
                    if (val == 1) {
                        return "男"
                    } else if (val == 0) {
                        return "女"
                    }
                }
            }
        })
    </script>
</body>

生命周期

生命周期执行顺序 beforeCreated – created – beforeMounted – mounted – …

created
- 页面渲染之前执行
mounted
- 页面渲染之后执行

方法

.then()
- 请求成功执行
catch()
- 请求失败执行

组件重用问题

问题：

vue-router导航切换时，如果两个路由都渲染同个组件，

组件的生命周期方法(created或者mounted）不会再被调用,组件会被重用，显示上一个路由渲染出来的自建

解决方案：

可以简单的在router-view 上加上一个唯一的key，来保证路由切换时都会重新触发生命周期方法，确保组件被重新初始化

修改src/views/layout/componentslAppMain.vue文件如下

computed: {
    //解决组件重用问题
    // 每次路由都生成一个新的key，有就是每次使用路由都会刷新页面，使用的是一个新的路由
    key() {
      return this.$route.name !== undefined
        ? this.$route.name + +new Date()
        : this.$route + +new Date();
    },
  },

方法(created或者mounted）不会再被调用,组件会被重用，显示上一个路由渲染出来的自建

解决方案：

可以简单的在router-view 上加上一个唯一的key，来保证路由切换时都会重新触发生命周期方法，确保组件被重新初始化

修改src/views/layout/componentslAppMain.vue文件如下

computed: {
    //解决组件重用问题
    // 每次路由都生成一个新的key，有就是每次使用路由都会刷新页面，使用的是一个新的路由
    key() {
      return this.$route.name !== undefined
        ? this.$route.name + +new Date()
        : this.$route + +new Date();
    },
  },