简单了解Vue

最新推荐文章于 2024-05-21 19:09:41 发布

guaiwu_

最新推荐文章于 2024-05-21 19:09:41 发布

阅读量80

点赞数 1

分类专栏： HTML JAVA 文章标签： vue.js 前端 javascript Powered by 金山文档

本文链接：https://blog.csdn.net/guaiwu_/article/details/129736116

版权

JAVA 同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

HTML

14 篇文章 0 订阅

订阅专栏

一. 简介

Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写

基于MVVM(Model-View-ViewMode)思想，实现数据的双向绑定，将编程的关注点放在数据上

官网: https://cn.vuejs.org

二. 快速入门

创建HTML页面,引入Vue.js文件

在JS代码区域,创建Vue核心对象,进行数据绑定

<script>
    //创建Vue核心对象
    new Vue({
        el:"#app",
        data:function(){
            return{
                username:""
            }
        }
    });

</script>

编写视图

<div id="app">
    <input name="username" v-model="username">
    <!--插值表达式-->
    {{username}}
</div>

结果展示

在框内输入什么,框外视图也会实时对应改变

三.Vue的常用指令

指令: HTML标签上带有v-前缀的特殊属性, 不同指令具有不同的含义

v-bind 为HTML标签绑定属性值，如设置 href，css样式等

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <a v-bind:href="url">点击一下</a><br>
    <!--简化-->
    <a :href="url">点击一下</a>
</div>


<script src="js/vue.js"></script>
<script>
    //创建Vue核心对象
    new Vue({
        el:"#app",
        data:function(){
            return{
                username:"",
                url:"https://www.baidu.com"
            }
        }
    });

</script>
</body>
</html>

v-model 在表单元素上创建双向数据绑定

v-on 为HTML标签绑定事件

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="button" value="按钮"v-on:click="show()"><br>
    <input type="button" value="按钮"@click="show()">
</div>


<script src="js/vue.js"></script>
<script>
    //创建Vue核心对象
    new Vue({
        el:"#app",
        methods:{
            show(){
                alert("已点击");
            }
        }
    });

</script>
</body>
</html>

v-if 条件性的渲染某元素，判定为true时渲染,否则不渲染

v-else 条件性的渲染某元素，判定为true时渲染,否则不渲染

v-else-if 条件性的渲染某元素，判定为true时渲染,否则不渲染

v-show 根据条件展示某元素，区别在于切换的是display属性的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <div v-if="count == 3">div1</div>
    <div v-else-if="count == 4">div2</div>
    <div v-else>div3</div>
    <hr>
    <div v-show="count == 3">div v-show</div>
    <br>

    <input v-model="count">


</div>

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

    //1. 创建Vue核心对象
    new Vue({
        el:"#app",
        data(){
            return {
                username:"",
                url:"https://www.baidu.com",
                count:3
            }
        },
        methods:{
            show(){
                alert("我被点了...");
            }
        }
    });

</script>


</body>
</html>

v-for 列表渲染，遍历容器的元素或者对象的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <div v-for="addr in addrs">
        {{addr}} <br>
    </div>

    <hr>
    <div v-for="(addr,i) in addrs">
        {{i+1}}--{{addr}} <br>
    </div>
</div>

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

    //1. 创建Vue核心对象
    new Vue({
        el:"#app",
        data(){
            return {
                username:"",
                url:"https://www.baidu.com",
                count:3,
                addrs:["北京","上海","西安"]
            }
        },
        methods:{
            show(){
                alert("我被点了...");
            }
        }
    });

</script>


</body>
</html>

四. Vue生命周期

生命周期的八个阶段: 每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)

状态: 阶段周期

beforeCreate: 创建前

created: 创建后

beforeMount: 载入前

mounted: 挂载完成

beforeUpdate: 更新前

updated: 更新后

beforeDestroy: 销毁前

destroyed:: 销毁后

mounted: 挂载完成, Vue初始化成功, HTML页面渲染成功--->发送异步请求,加载数据

代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <input name="username" v-model="username">  {{username}} </div> <script src="js/vue.js"></script> <script> //创建Vue核心对象 new Vue({ el:"#app", /*data:function(){ return{ username:"" } }*/ //简化 data(){ return{ username:"" } }, mounted(){ alert("加载完成") } }); </script> </body> </html>