vuejs hello world

In this example below you will see how to do a vuejs hello world with some HTML / CSS and Javascript

我的第一个codepen vuejs示例程序

Thumbnail
This awesome code was written by 小杜, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 小杜 ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>vuejs  hello world</title>
  
  
  
  
  
</head>

<body>

  <div id="myApp">{{msg}}</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/xiaodu/vuejs-hello-world-WJmpKV */
var myAppInstance = new Vue({
    el: '#myApp',
    data: {
        msg: 'Hello Vue!'
    },
    methods: {},
    beforeCreate() {
        console.log("生命周期钩子函数:beforeCreate");
    },
    created() {
        console.log("生命周期钩子函数:created");
    },
    beforeMount() {
        console.log("生命周期钩子函数:beforeMount");
    },
    mounted() {
        console.log("生命周期钩子函数:mounted");
    },
    beforeUpdate() {
        console.log("生命周期钩子函数:beforeUpdate");
    },
    updated() {
        console.log("生命周期钩子函数:updated");
    },
    activated() {
        console.log("生命周期钩子函数:activated");
    },
    deactivated() {
        console.log("生命周期钩子函数:deactivated");
    },
    beforeDestroy() {
        console.log("生命周期钩子函数:beforeDestroy");
    },
    destroyed() {
        console.log("生命周期钩子函数:destroyed");
    },
    errorCaptured() {
        console.log("生命周期钩子函数:errorCaptured");
    }
});

Comments