首页 > 其他分享 >VUE2.0 学习 第一组

VUE2.0 学习 第一组

时间:2023-04-02 13:33:44浏览次数:39  
标签:el vue 第一组 学习 second new div VUE2.0 first

本笔记主要参考菜鸟教程和官方文档编写。

 1. 对于Vue2.0来说每个vue应用都需要实例化vue来实现。

      var vm = new Vue({

  // 选项
  })

 2.首先,DOM是一种api,它可以动态地访问程序和脚本,更新其内容、结构和文档,我认为符合这类功能的都可以叫dom,其次,每一个DOM元素的id(此处为div),都可以在后面的vue构造器中的el中一一对应,意味着改动全部在以上指定的 div 内,div 外部不受影响。比如,

     <div id="mozart"></div>

     <script type="text/javascript">

     var vm = new Vue({

       el:"#mozart"

      })

     <script/>

    对于我来说很像一种js中定义变量后引用的模式,这里只是引用后定义变量,正好相反.

 3.引用模式确定了,接下来就是定义了,先看如下代码,

   <div id ="mozart">

     <p>{{ first }}<p/>

    <p>{{ second }}<p/>

     <p>{{ amadeus() }}<p/>

   <div/>

   <script type="text/javascript">

      var vm =new Vue({

                    el:"#mozart",

                    data:{

                           first:"first",

                           second:"second",

                     },

                  method:{

                           amadeus:function(){

                           return first+second;

                           }

                }

      })

<script/>

   {{}}中可以写入变量或者方法,在vue构造体中的data来定义变量属性,method来定义方法/函数并且用return返回函数值

标签:el,vue,第一组,学习,second,new,div,VUE2.0,first
From: https://www.cnblogs.com/Agnoi/p/17280316.html

相关文章

  • qmake学习
    在Qt的.pro文件中,有许多变量可以用于配置和管理项目的构建过程以下是Qt中常用的.pro变量及其说明:SOURCES:指定项目源代码文件的名称和路径,以空格分隔HEADERS:指定项目头文件的名称和路径,以空格分隔FORMS:指定QtDesignerUI文件的名称和路径,以空格分隔RESOURCES:指定Qt资源文件的名称......
  • 计网学习笔记五 wireless && mobile networks
    老师把无线网络用一节课一遍过了…感觉没能学透,便课后自己总结,看书,找资料补充,把无线网络大概摸了个七七八八。虽然不算精细,但还能看!内容包括WLAN总概,WiFi—WLAN的实现,802.11规定的帧结构,以及蜂窝网络。强烈推荐一本书:《802.11WirelessNetworks:TheDefinitiveGuide》,2ndEd......
  • .net reactor 学习系列(五)---.net reactor针对De4Dot脱壳工具的应对
     De4Dot是一个专门反混淆.net程序的一个工具,支持对于以下工具混淆过的代码的清理:Agile.NET(akaCliSecure)Babel.NETCodeFortCodeVeilCodeWallCryptoObfuscatorDeepSeaObfuscatorDotfuscator.NETReactorEazfuscator.NETGoliath.NETILProtectorMaxtoCodeMPRESSRummageSkater.N......
  • 【算法学习】图论模板
    注意!并查集只适用于无向图。DFS特点:当前层可以获得下层状态、向下层不断遍历处理方式:递归模板://dfs注意剪枝voiddfs(intu){if(u>n){输出路径return;}for(inti=0;i<n;i++)//遍历点{if(条件)......
  • 【THM】Windows Fundamentals 2(Windows基础知识2)-学习
    本文相关的TryHackMe实验房间链接:https://tryhackme.com/room/windowsfundamentals2x0x本文介绍:本文所涉及的内容是Windows基础模块的第2部分,了解有关系统配置、UAC设置、资源监控、Windows注册表等更多信息。简介在WindowsFundamentals1中,我们已经介绍了Windows的桌面......
  • 极至框架Jz学习笔记
    设计的数据库表名:Select*fromjzmetadata_dataentity数据库表列名:Select*fromjzmetadata_dataentitycol    ......
  • 《暗黑战神》个人部分学习笔记 记录
    SIKI学院暗黑战神课程跳转链接其他同学的笔记csdn:正版游戏的受害者ARPG实战CSDN:听雨眠丨暗黑战神学习部分笔记音效播放服务中的一段代码privateDictionary<string,AudioClip>adDic=newDictionary<string,AudioClip>();publicAudioClipLoadAudio(stri......
  • 计算机网络学习总结(进程之间的通信)
    进程之间通信的方式之一是利用socket最近学习了计算机网络的一些知识,下面是我自己的一些简单理解,可能有些错误的地方(狗头保命)首先长报文在发送的时候是以分组的形式发送的,由应用层发送应用层报文到运输层然后运输层对接收到的每个分组加上一个运输层首部,然后发送到网络层网络......
  • Vue3学习笔记(7.0)
    Vue3计算属性计算属性关键词:computed计算属性在处理一些复杂逻辑时是很有用的。可以看下以下反转字符的例子:<!--*@Author:[email protected]*@Date:2023-03-3008:30:35*@LastEditors:Mei*@LastEditTime:2023-03-3008:33:36*@FilePath:\vscode\vue_co......
  • Vue3学习笔记(4.0)
    vue.js为两个最为常用的指令提供了特别的缩写://全称<av-bind:href="url"></a>//缩写<a:href="url"></a>v-on缩写//全称<av-on:click="doSomething"></a>//缩写<a@click="doSonthing"></a>条件判断条件判断使......