vue

最新推荐文章于 2024-09-06 18:57:22 发布

cyy——621

最新推荐文章于 2024-09-06 18:57:22 发布

阅读量347

点赞数

分类专栏： # 2.乐优商城文章标签： vue

本文链接：https://blog.csdn.net/qq_39193351/article/details/105455562

版权

2.乐优商城专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这里写目录标题

一.什么是MVVM
二.VUE入门

一.什么是MVVM

双向：js上的数据和HTML页面上的数据

二.VUE入门

1. 常用指令

1.1 插值

写法就是{{}}

1.2 v-text和v-html

在这里插入图片描述

1.3 v-model和v-on

v-model:做双向绑定，只能出现在input type=text password checkbox radio select 中
v-on: 上面的事件已经演示过了，v-on:可以使用@符号代替

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>

</head>
<body>
<div id="app">
    <div>
        <input v-model="a">+<input v-model="b">
        <button v-on:click="add">等于</button><input v-model="c">
    </div>
    <div>
       <input v-model="username">
        <span>{{age}}</span>
        <button v-on:click="addAge">下一年</button>
    </div>
    <div>{{userName}}</div>
    <br>
    <span v-text="userName"></span>
    <span v-html="userName"></span>


</div>
</body>
</html>
<script>
    new Vue({
        el:"#app",//指定了vue控制范围
        data:{    //页面上需要的数据一定要在data中先定义
            userName:"<h1>张三</h1>",
            age :"30",
            a:0,
            b:0,
            c:0
        },
        methods:{  //所用到的方法都在methods中定义
            addAge(){
                this.age++;
            },
            add(){
             this.c=parseInt(this.a)+parseInt(this.b);
            }
        }
    })
</script>

1.4 v-for 循环

user in userList 必须要这么命名

<div id="app">
 <div v-for="user in userList">
        {{user.username}}:{{user.age}}
 </div>
</div>    


<script>
    new Vue({
        el:"#app",//指定了vue控制范围
        data:{    //页面上需要的数据一定要在data中先定义
            userName:"<h1>张三</h1>",
            age :"30",
            a:0,
            b:0,
            c:0,
            userList:[{username:"aaa",age:20},{username:"bbb",age:33}]
        },
        methods:{  //所用到的方法都在methods中定义
            addAge(){
                this.age++;
            },
            add(){
             this.c=parseInt(this.a)+parseInt(this.b);
            },
        }
    })
</script>

遍历对象的时候命名
在这里插入图片描述

1.5 v-if和v-show

v-if和v-show=”boolean值”

v-if ：会彻底隐藏页面的内容
v-show ：会在页面上不显示内容，但是页面的源码中有此内容

HTML：

<div v-if="flag">
    这是v-if中的内容
</div>
<div v-show="flag">
    这是v-show中的内容
</div>
  <button v-on:click="flag=!flag">切换</button>

Js代码：

new Vue({
    el:"#app",//指定了vue控制范围
    data:{    //页面上需要的数据一定要在data中先定义
      flag:true 
    },
    methods:{  //所用到的方法都在methods中定义

    }
})

1.6 v-if 、v-else-if、v-else

<div id="app">
<div v-if="age<18">
        未成年
    </div>
    <div v-else-if="age>50">
        老年
    </div>
    <div v-else="age>=18">
        成年
    </div>

    <button v-on:click="age=age+10">+10</button>
</div>

<script>
    new Vue({
        el:"#app",//指定了vue控制范围
        data:{    //页面上需要的数据一定要在data中先定义   
            age :0
           
        },
        methods:{  //所用到的方法都在methods中定义
            addAge(){
                this.age++;
            },
            add(){
             this.c=parseInt(this.a)+parseInt(this.b);
            },
        }
    })
</script>

1.7 v-bind

可以简写在这里插入图片描述

1.8 Watch 监测数据的变化相当于onchange事件

<body>
    <div id="app">
        <select v-model="url">
            <option value="http://www.baidu.com">百度</option>
            <option value="http://www.jd.com">京东</option>
            <option value="http://www.itheima.com">黑马</option>
        </select>

        <br/><br/><br/>
        姓名：<input v-model="user.username">
        年龄：<input v-model="user.age">
        <br/><br/>
     <a v-bind:href="url">跳转</a>
     <a :href="url">跳转</a>
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",  //代表vue控制的范围
        data:{ //放了html需要的数据，注意：HTML中需要的数据必须要在这里先定义
           url:"http://www.baidu.com",
           user:{username:"zhangsan",age:30}
        },
        methods:{  //放的是方法
        },
        watch:{
            url(newValue,oldValue){
                console.log("之前的值："+oldValue+",现在的新值："+newValue);
                location=newValue;
            },
            user:{
                deep:true,  //开启深度监测，
                handler(v){
                    console.log(v);
                }
            }
        }
    })
</script>

2.生命周期—钩子函数

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>

<div id="app">
   <input v-model="username">
    <span>{{username}}</span>
    <button v-on:click="des">销毁</button>
</div>

<script>
    var vm =new Vue({
        el:"#app",
        data:{
            username:"zhangsan"
        },
        method:{
            des(){
                vm.$destroy();//销毁实例
            }

        },
        beforeCreate() {
            console.log("被实例化之前");
        },
        create(){
            console.log("被实例化之后");
        },
        beforeMount() {
            console.log("data数据挂载到html之前");
        },
        mounted() {
            console.log("data数据挂载到html之后");
        },
        beforeUpdate() {
            console.log("修改之前");
        },
        updated(){
            console.log("html上的数据修改之后++++++++++")
        },
        beforeDestroy() {
            console.log("vue实例被销毁之前。。。。。。。。。。")
        },
        destroyed() {
            console.log("vue实例被销毁了，页面效果就没有了比如双向绑定")
        }
    })
</script>
</body>
</html>