zoukankan      html  css  js  c++  java
  • Vue学习之路第二篇:插值表达式

    要开始写Vue的功能了,是不是很激动呢!开始吧!

    1、首先建立一个html页面,导入Vue js包

     1 <script type="text/javascript" src="js/vue.min.js"></script> 

    2、架包导入之后,我们需要创建一个Vue对象,用来绑定元素节点,从而达到操作元素的目的。即一个Vue对象必须要绑定一个元素节点,且为根节点。

    1 <div id="app">
    2         <p> {{ msg }} </p>
    3 </div>
    1 var vm = new Vue({
    2       el : "#app",
    3       data : {
    4            msg : "Hello Vue"
    5        }
    6 });

    大家可以看到,通过new的方式创建了一个Vue对象,对象包含了 el 和 data两个属性(这一篇只涉及这两个属性),"el" 是用来绑定元素节点的,对应的是id为app的元素节点,由于是id,所以不要忘记 "#" 号哦。"data" 是Vue对象里绑定的数据,采用的 key-value形式定义。展示数据的时候采用的是插值表达式 “{{ }}”。

    怎么样,是不是很简单? 

    插值表达式问题点:

    大家功能实现之后,如果频繁刷新页面或者通过浏览器调试工具把网速模拟调的很慢的话,会发现一个现象:页面会先显示" {{ msg }} "内容,然后才会显示“Hello Vue”,对于这个问题下篇会讲解解决办法并介绍更多的Vue内容。

    每天进步一点点!

      

      

  • 相关阅读:
    Eureka与ZooKeeper 的比较(转)
    springcloud 与分布式系统(转载)
    jvm 分代回收算法通俗理解
    关于JVM调优
    Java常用的数据结构
    mysql数据库引擎(转载)
    java的堆栈通俗理解
    ArrayList 的实现原理
    hashMap 源码解读理解实现原理和hash冲突
    Sklearn库例子——决策树分类
  • 原文地址:https://www.cnblogs.com/shibin90/p/10308837.html
Copyright © 2011-2022 走看看