美文网首页
初识Vuejs&&生命周期

初识Vuejs&&生命周期

作者: 大佬教我写程序 | 来源:发表于2021-05-03 21:32 被阅读0次

官网:https://cn.vuejs.org/v2/guide/installation.html

Vue安装

  • 方式一:直接CDN引入
    你可以选择引入开发环境版本还是生产环境版本
<!-- 开发环境版本,包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

  • 方式二:下载和引入
//开发环境 
https://vuejs.org/js/vue.js 
//生产环境 
https://vuejs.org/js/vue.min.js
  • 方式三:NPM安装
    后续通过webpack和CLI的使用,我们使用该方式。
    npm install vue
<body>
    <h1 id="app">{{message}}</h1>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        //声明式编程,数据界面完全分离,响应式(随数据的变化而变化)
        const app = new Vue({
            el: "#app", //用于要挂在管理的元素
            data: {//定义数据
                message: '你好'
            }
        })
    </script>
</body>
  • 响应式


    image.png

学习

  • 列表
    <div id="app">
        <ul>
            //movies: ['大话西游', '海贼王', '变形金刚', '火影忍者']
            <li v-for="item in movies">{{item}}</li>
        </ul>
    </div>
image.png
  • 计数器
<body>
    <div id="app">
        <h2>当前计数:{{counter}}</h2>
        <!-- <button v-on:click='counter++'>+</button>
        <button v-on:click='counter--'>-</button> -->
        <button v-on:click='add'>+</button>
        <button @click='sub'>-</button>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                counter: 0
            },
            //定义方法
            methods: {
                add: function() {
                    console.log('+++');
                    //直接用counter会报错
                    this.counter++;
                },
                sub: function() {
                    console.log('---');
                    this.counter--;
                }
            }
        })
    </script>
</body>
image.png
  • vue中的MVVM


    image.png
    image.png

Vue实例传入的options

  • el:
    类型:string | HTMLElement
    作用:决定之后Vue实例会管理哪一个DOM。
  • data:
    类型:Object | Function (组件当中data必须是一个函数)
    作用:Vue实例对应的数据对象。
  • methods:
    类型:{ [key: string]: Function }
    作用:定义属于Vue的一些方法,可以在其他地方调用,也可以在指令中使用。

Vue的生命周期

vue生命周期.jpg
vue生命周期2.jpg

缓存组件的生命周期

两函数在不断进入和离开之间会不断执行

  • activated():在进入缓存组件时会调用该方法
  • deactivated():在离开缓存组件会执行

  • 代码统一缩进两格进行保存
    方法:
    格式插件用的是 JS-CSS-HTML Formatter
  1. 按F1输入: image.png
  2. 将所有的intent_size都设置成2
    image.png
    3.重启软件

配置Vue模板

  1. 文件-->首选项-->用户片段,输入vue
    2.配置json文件
  • 添加下列代码
  "Print to console": {
    "prefix": "vue",
    "body": [
      "<script src=\"../node_modules/vue/dist/vue.js\"></script>",
      "<script>",
        "const app = new Vue({",
        "el: '#app',",
        "data: {\n",
          "}",
        "})",
      "</script>",
    ],
    "description": "Log output to console"
    }
  • 输入 vue按回车


    image.png

相关文章

  • 初识Vuejs&&生命周期

    官网:https://cn.vuejs.org/v2/guide/installation.html[https:...

  • Activity初识

    Activity初识之生命周期 Activity生命周期有七个节点, onCreate( ): activity启...

  • Vue基础

    初识Vue 框架作者 尤雨溪 官网 Vue 生命周期 beforeCreate:组件刚刚被创建 created:组...

  • React 初识—— 生命周期

    生命周期是一个组件从创建到销毁的整个过程;React 为生命周期提供了一些关键的节点,本质上是一些可以被触发的事件...

  • 初识小程序 - 生命周期

    小程序生命周期 一个完整的小程序执行的生命周期:app.onLaunch -> app.onShow -> ...

  • 初识:Activity的生命周期

    Activity是开发人员接触最多的,也是用户直接交互的组件。废话不多说直接上它的生命周期图[如下] 典型情况下的...

  • 初识react之生命周期

    组件的生命周期 简单说:一个组件从开始到最后消亡所经历的各种状态,就是一个组件的生命周期 组件生命周期函数的定义:...

  • Android Activity生命周期 超详解

    生命周期 四大启动模式 标识位 Task栈 Android 1.初识 Activity 四大组件之一 与用户交...

  • iOS App生命周期初识

    面对每次打开iOS应用时.都是否想到过其App运行过程:从启动到按Home键回到主屏幕,从运行中到按两下Home键...

  • 初识WatchOS,及其创建,生命周期

    1.Watch app与iPhone app关系:Watch app只是iPhone app的扩展(Watch a...

网友评论

      本文标题:初识Vuejs&&生命周期

      本文链接:https://www.haomeiwen.com/subject/gxyjrltx.html