vue初级篇

最新推荐文章于 2022-11-06 12:54:54 发布

小韩Boy

最新推荐文章于 2022-11-06 12:54:54 发布

阅读量174

点赞数 1

分类专栏：前端文章标签： vue Vue初级

本文链接：https://blog.csdn.net/weixin_41967595/article/details/91866988

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

创建一个本地的 .html 文件，然后通过如下方式引入 Vue:

<script src="https://unpkg.com/vue/dist/vue.js">

V- * 标签语句

v-bind: 绑定属性

v-if : 判断

v-for : 循环

v-on: 绑定事件

v-model : 用于表单双向数据绑定

v-html：将html字符串内容转html进行加载（注意：XSS攻击）

v-once：只加载一次DOM , 数据改变也不会重新渲染

组件声明

vue钩子函数

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app">
     <p>{{ message }}</p>
</div>

<script type="text/javascript">
    
  var app = new Vue({
      el: '#app',
      data: {
          message : "xuxiao is boy" 
      },
       beforeCreate: function () {
                console.group('beforeCreate 创建前状态===============》');
               console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
               console.log("%c%s", "color:red","message: " + this.message)  
        },
        created: function () {
            console.group('created 创建完毕状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeMount: function () {
            console.group('beforeMount 挂载前状态===============》');
            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
        },
        mounted: function () {
            console.group('mounted 挂载结束状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);   
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el); 
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);  
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message)
        }
    })
</script>
</body>
</html>

小韩Boy

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue初级篇

创建一个本地的.html文件，然后通过如下方式引入 Vue:<script src="https://unpkg.com/vue/dist/vue.js">V- * 标签语句v-bind: 绑定属性v-if : 判断 v-for : 循环v-on: 绑定事件v-model : 用于表单双向数据绑定v-html：将h...
复制链接

扫一扫