• Vue的使用（1）

    一、Vue是什么？

    Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

    vue的官网：介绍 — Vue.js 

    这里我使用的是vue2.0版本的

    二、vue的安装

    1.基于cdn的项目创建


    必须要有网络的情况下才能使用

    2.下载js导入vue.js

    下载后引入

     三、vue的实例

    每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

    1. var app = new Vue({
    2.   // 选项
    3. })

    1、实例挂载

    el

    在创建实例时将实例挂载到指定的dom对象中。参数可以是css选择器或者原生dom对象

    实例.$el获取组件绑定的dom对象

    $mount

    如果在实例创建时没有指定挂载dom，可以在实例创建完成后调用$mount来挂载，参数css选择器或dom对象

     app.$mount("#app");

    data数据

    数据类型分两种，对象和function，在组件定义时只能使用函数

    为实例绑定数据，可以是包含多个key-value的对象，也可以是空对象。实例中绑定的数据可以通过实例.$data.属性或实例.属性，如果需要在vue实例中可以使用this.属性名

    1.  data: {
    2.           id:123,
    3.           password:'password',
    4.           message:'message',
    5.           userName:'userName'
    6.         }

    methods 方法

    定义的方法可以直接被vue的事件绑定使用，也可以通过实例来调用

    注意

    methods中不允许使用箭头函数

    1.  methods: {
    2.                 method1: function() {
    3.                     console.info(this.message + '1')
    4.                 },
    5.                 method2: function() {
    6.                     console.info(this.message + '2')
    7.                 }
    8.             }

    生命周期钩子

    1. beforeCreate

    在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。

    2. created

    在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且 $el property 目前尚不可用。

    实例创建完成但是未挂载时调用

    3. beforeMount

    在挂载开始之前被调用 ，这个时候创建了虚拟的dom的el ，但是还没有被vm.$el 替换了 且 $el 目前有数据。

    4. mounted

    实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。

    5. beforeUpdate

    数据发生改变，但dom没有渲染之前触发

    6. updated

    数据改变完成，dom也渲染完成后触发

    7. beforeDestroy

    实例销毁前触发

    8. destroyed

    实例销毁完成后触发】

    上面的代码演示 

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Documenttitle>
    9.     <script src="vue.js">script>
    10. head>
    11.  
    12. <body>
    13.     <div id="app">
    14.         <h1>
    15.             {{message}}
    16.         h1>
    17.         
    18.         <input v-model="message" />
    19.         
    20.         <button v-on:click="method1" /> 点我
    21.         <button v-on:click="method2()" />点我1
    22.     div>
    23.  
    24. body>
    25. <script>
    26.     var app = new Vue({
    27.             //vue的实例挂载   可以是css的样式 也可以是Element
    28.             //Element      document.getElementById("app") 
    29.             // el: '#app',
    30.             //data存放的数据   this代表vue的对象  
    31.             data: {
    32.                 message: 'hello vue'
    33.             },
    34.             //方法中的 this 自动绑定为 Vue 实例。 
    35.             //并且这个方法不能直接通过onclick  要通过vue的on
    36.             methods: {
    37.                 method1: function() {
    38.                     console.info(this.message + '1')
    39.                 },
    40.                 method2: function() {
    41.                     console.info(this.message + '2')
    42.                 }
    43.             },
    44.             //生命周期
    45.             beforeCreate: function() {
    46.                 //在实例初始化之后,
    47.                 console.info("beforeCreate....");
    48.             },
    49.             created: function() {
    50.                 //初始化后 data完成  el没转载前  没有el
    51.                 console.info("created....");
    52.                 console.info("data---" + this.message); //有数据
    53.                 console.info("el---" + this.$el); //undifind
    54.             },
    55.             beforeMount: function() {
    56.                 //在挂载开始之前被调用  但是这个时候有el了
    57.                 console.info("beforeMount....");
    58.                 console.info("data---" + this.message); //有数据
    59.                 console.info("el1---" + this.$el); //  有数据
    60.  
    61.             },
    62.             mounted: function() {
    63.                 //挂载之后调用
    64.                 console.info("mounted....");
    65.                 console.info("el2---" + this.$el); //有数据
    66.  
    67.             },
    68.             beforeUpdate: function() {
    69.                 //数据改变后dom为改变的前调用
    70.                 console.info("beforeUpdate....");
    71.             },
    72.             updated: function() {
    73.                 //dom改变后调用
    74.                 console.info("updated....");
    75.             },
    76.             beforeDestroy: function() {
    77.                 //销毁前  
    78.                 console.info("beforeDestroy....");
    79.                 console.info(this.message); //有
    80.             },
    81.             destroyed: function() {
    82.                 //销毁后 销毁的是连接但是vue对象还是有的  只不过不跟dom连接了
    83.                 console.info("destroyed....");
    84.                 console.info(this.message); //有
    85.             }
    86.         })
    87.         //声明式的挂载  代替了el
    88.     app.$mount("#app");
    89.     //主要操作的就是data中的数据
    90.     console.info(app.message)
    91.     console.info(app.$data.message)
    92.         //销毁
    93.     app.$destroy();
    94. script>
    95.  
    96. html>

    总结

    提示：这里对文章进行总结：

    例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

  • 相关阅读:
    Java中的容器(二) 双例集合
    dubbo配置及其属性参考文件，配置参考手册
    leetcode 102.二叉树的层序遍历
    【vue】axios请求封装，二次封装
    越权漏洞知识点
    天线设计该如何入门
    [ 目标检测 ] 经典网络模型——性能评价指标 AP、mAP
    AD21如何生成Gerber文件
    快用云科阎志涛：现代数据栈中的数据建模
    【Spring】Spring IOC&DI详解
  • 原文地址：https://blog.csdn.net/weixin_52574640/article/details/126632364