首页 > 其他分享 >vue十四

vue十四

时间:2023-11-12 22:44:58浏览次数:31  
标签:vue console log 渲染 修改 Vue 阶段 十四

<div id="app14">
        <button @click="num = num+1">++</button>
        <span>{{ num }}</span>
    </div>
    <script>
        const app14=new Vue({
            el:'#app14',
            data:{
                num:0
            },
            beforeCreate(){
                console.log('beforecreate 创建阶段前,script数据尚未加载')
            },
            created(){
                console.log('created 创建阶段已完成')
            },
            beforeMount(){
                console.log('beforeMount,挂载阶段前,开始通过数据进行页面渲染')
            },
            mounted(){
                console.log('mounted 挂载阶段完毕')
            },
            beforeUpdate(){
                console.log('beforeUpdate 每次修改会经历本阶段,本阶段数据已经修改画面尚未渲染')
            },
            updated(){
                console.log('updated 每次修改会经历本阶段,本阶段数据已经修改画面也渲染完成')
            },
            beforeDestroy(){
                console.log('beforeDestroy Vue开始销毁')
            },
            destroyed(){
                console.log('destroyed Vue销毁完毕')
            }
        })
    </script>

    <div id="app15">
        <ul>
            <li v-for="(item , index) in news" :key="item.id" >
            {{ item.title }}
            <img alt="img" :src="item.img">
            </li>
        </ul>
    </div>
    <script>

 

标签:vue,console,log,渲染,修改,Vue,阶段,十四
From: https://www.cnblogs.com/cocotun/p/17828055.html

相关文章

  • 《Unix/Linux系统编程》教材学习笔记第十四章
    chapter14MySQLMySQL(MySQL2018)是一个关系数据库系统(Codd1970)。在关系数据库中,数据存储在表中。每个表由多个行和列组成。表中的数据相互关联。表也可能与其他表有关联。关系结构使得可在表上运行查询来检索信息并修改数据库中的数据。关系数据库系统的标准查询语言是SQL(结......
  • 解决vue-element-admin安装报错npm ERR! code 128
    在安装vue-element-admin的npminstall的时候报错npmERR!code128npmERR!AnunknowngiterroroccurrednpmERR!commandgit--no-replace-objectsls-remotessh://[email protected]/nhn/[email protected]:Permissiondenied(publickey).npmERR!fatal:......
  • 使用vue路由
    1.安装vue-router对应版本号为233344使用以下命令[email protected]或者[email protected].在main.js里面使用vue-routerimportVuefrom'vue'importAppfrom'./App.vue'importVueRouterfrom'vue-router'Vue.config.product......
  • Vue使用vuex刷新页面后state数据丢失
    使用 createPersistedState做持久化安装:npminstallvuex-persistedstate--save使用:importVuefrom'vue';importVuexfrom'vuex';importcreatePersistedStatefrom'vuex-persistedstate'importnavCollapsefrom'./modules/navCol......
  • vue基础
    一基础1、v-modelv-bind v-model一般为用户在页面输入的值 而v-bind不行(单项绑定)2、事件v-on  所有定义的方法都应该放在methods中3、vue事件修饰符prevent stop once  4、系统修饰键@keyup   例子@keyup.ctrl="shop" 在按ctrl可以进入绑......
  • vue指令
    props:当不需要检查时,可以写成props:['value']此时,不管传过来什么都不会检查,如果想要将数据进行检查,就可以将改成1.类型验证props:{'value':Number} 此时会限制类型为Number的数据2.如果需要更加完整的检查props:{'value':{type:Number,required:tr......
  • vue平级访问数据
    <template><divclass="a"><h2>thisisA</h2><span>{{msg}}</span></div></template><script>importBusfrom'../Tools/EventBusTool';exportdefault{data(){......
  • vue跨层访问数据
    <template><divclass="grf">thisisgrandpa<FatherComponent></FatherComponent></div></template><script>importFatherComponentfrom'./FatherComponent.vue';exportdefault{......
  • vue封装一个加载过程
    app.vue<template><divclass="main"><divclass="box"v-isLoging="isLoged"><ul><liv-for="iteminlist":key="item.id"class="news">......
  • vue项目部署添加时间
    constfs=require('fs');constpath=require('path');constHtmlWebpackPlugin=require('html-webpack-plugin');classBuildTimePlugin{ apply(compiler){  constbuildTime=+newDate()  compiler.hooks.beforeCompile......