zoukankan      html  css  js  c++  java
  • 初识Vue之helloworld

    Vue简介

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

    作者:尤雨溪

    特点:

    1.遵循MVVM模式

    2.编码简洁,体积小, 运行效率高, 适合移动/PC 端开发

    3.它本身只关注 UI, 也可以引入其它第三方库开发项目

    与其他Javascript框架的关系:

    1. 借鉴 Angular 的模板和数据绑定技术
    2. 借鉴 React 的组件化和虚拟 DOM 技术

    初识Vue

    源代码:

     1 <!DOCTYPE html>
     2   <html>
     3     <head>
     4         <meta charset="UTF-8" />
     5          <title>初识Vue</title>
     6          <!-- 引入Vue -->
     7         <script type="text/javascript" src="../js/vue.js"></script>
     8     </head>
     9       <body>
    10        <!-- 
    11     初识Vue:
    12         1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象;
    13         2.root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法;
    14         3.root容器里的代码被称为【Vue模板】;
    15         4.Vue实例和容器是一一对应的;
    16         5.真实开发中只有一个Vue实例,并且会配合着组件一起使用;
    17         6.{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性;
    18         7.一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新;
    19 -->
    20        <!-- 准备好一个容器 -->
    21         <div id="app">
    22             <h1>{{hello}}</h1>
    23         </div>
    24 
    25          <script type="text/javascript" >
    26              Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    27 
    28             //创建Vue实例
    29              new Vue({
    30                  el:'#app', //el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串。
    31                  data:{ //data中用于存储数据,数据供el所指定的容器去使用,值我们暂时先写成一个对象。
    32                      hello:'hello world!'
    33                      
    34                 }
    35              })
    36 
    37          </script>
    38      </body>
    39  </html>

    运行结果:

  • 相关阅读:
    [湖南集训]谈笑风生
    【SCOI2010】序列操作
    ●BZOJ 3994 [SDOI2015]约数个数和
    ●BZOJ 3309 DZY Loves Math
    ●UOJ 21 缩进优化
    ●BZOJ 2693 jzptab
    ●BZOJ 2154 Crash的数字表格
    ●BZOJ 3529 [Sdoi2014]数表
    ●2301 [HAOI2011] Problem b
    ●BZOJ 2820 YY的GCD
  • 原文地址:https://www.cnblogs.com/ftx3q/p/15308667.html
Copyright © 2011-2022 走看看