首页 > 其他分享 >Vue-生命周期

Vue-生命周期

时间:2023-07-03 21:12:45浏览次数:32  
标签:function 生命周期 addr alert Vue mounted

 

 

 

<!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}}--{{addr}} <br>
    </div>



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

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

        }*/
        mounted(){
            alert("加载完成。。")
        }
    });

</script>

</body>
</html>

 

标签:function,生命周期,addr,alert,Vue,mounted
From: https://www.cnblogs.com/Karl-hut/p/17524043.html

相关文章

  • Vue01
    1.简单了解前端的发展过程最初的网页以HTML为主,是纯静态的网页。网页是只读的,信息流只能从服务端到客户端单向流通。开发人员也只关心页面的样式和内容即可。1995年,网景工程师BrendanEich花了10天时间设计了JavaScript语言.2005年开始,ajax逐渐被前端开发人员所重视,因为不用......
  • Vue-指令-v-for
     <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><divid="app"><divv-for="addrinaddrs"&g......
  • Vue-CoreVideoPlayer 视频播放器组件
    安装cnpminstall-Svue-core-video-player快速使用#在main.js中importVueCoreVideoPlayerfrom'vue-core-video-player'Vue.use(VueCoreVideoPlayer)#默认是英文的'''做国际化'''importVueCoreVideoPlayerfrom'vue-core-video......
  • Vue-指令-v-on
     <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><divid="app"><inputtype="button"value="......
  • Vue-指令-v-if和v-show
     <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><divid="app"><divv-if="count==3">di......
  • Vue-指令-v-bind和v-model
      <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><divid="app"><av-bind:href="url">点击一下&......
  • Vue-快速入门
     <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><divid="app"><inputv-model="username">......
  • vue 中动态class的写法
    https://blog.csdn.net/u012320487/article/details/121806858......
  • vue 兼容 展开语法
    js的展开语法最低兼容到chrome的60版本,客户端的chrome版本如果低于这个版本就需要做兼容项目根目录找到.browserslistrcn文件(有的项目是在package.json中配置browserslistrcn,配置内容是一样的),其后添加chrome最低兼容至哪个版本,如下>1%last2versionsnotdeadChro......
  • vue+element-ui 实现可编辑表格、动态渲染表头和表格数据、列向数据合计(每行末尾合计
    HTML部分代码<template> <div>  <el-container>   <el-header>Header</el-header>   <el-main>    <div>     //表格数据在这里::data="tableData"     <el-table      border    ......