Vue概述、入门案例、常用指令及生命周期

夏志121

已于 2022-05-30 21:43:15 修改

阅读量263

点赞数 7

分类专栏： Web前端开发与Vue.js实践文章标签： vue.js javascript 前端开发语言前端框架

于 2022-05-30 21:42:06 首次发布

本文链接：https://blog.csdn.net/m0_61961937/article/details/125053188

版权

Web前端开发与Vue.js实践专栏收录该内容

35 篇文章 5 订阅

订阅专栏

本文详细介绍了Vue.js的基础知识，包括Vue概述、入门案例、常用指令及Vue组件的生命周期。通过实例展示了如何创建Vue实例、数据绑定、事件处理以及条件渲染。还探讨了Vue的v-if、v-for等指令的使用，帮助读者快速掌握Vue开发。

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

一、Vue概述

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

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

官网：Vue.js (vuejs.org)https://cn.vuejs.org/MVC和MVVM的区别图例：

二、Vue入门案例

1、新建HTML页面，引入Vue.js文件

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

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

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

3、编写视图

<div id="app">

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

代码示例：

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

<body>

<div id="app">

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

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

<script>

  //1.创建vue核心对象
  new Vue({
    el:"#app",
      data(){
        return{
            username:""
        }
      }

  });
</script>
</body>
</html>

执行结果：

三、Vue常用指令

指令：HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义。例如v-if,v-for...

常用指令：

指令	作用
v-bind	为HTML标签绑定属性值，如设置href,css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染，否则不渲染
v-else
v-else-if
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

v-bind：

<a v-bind:href="url">百度一下</a>

<!--
    v-bind可以省略
-->
<a :href="url">百度一下</a>

v-model：

<input name="username" v-model="username">

执行结果：

v-on

html：

    <input type="button" value="一个按钮" v-on:click="show()"><br>
    <input type="button" value="一个按钮" @click="show()">

vue：

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

<script>

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

执行结果：

v-if：

    <div v-if="cont==3">div1</div>
    <div v-else-if="count==2">div2</div>
    <div v-else>div3</div>

v-show：

    <hr>
    <div v-show="count==3">div v-show</div>
    <br>

vue：

<script>

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

执行结果：

v-for：

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

加索引：

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

vue：

<script>

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

执行结果：

四、Vue生命周期

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

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	载入前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。

发送异步请求，加载数据

示例：

new Vue({
    el:"#app",
    mounted(){
        alert("vue挂载完毕，发送异步请求");
    }
})

执行结果：

夏志121

关注

7
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue概述、入门案例、常用指令及生命周期

Vue概述、入门案例、常用指令及生命周期示例的简单介绍
复制链接

扫一扫

专栏目录