• 初识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>

    运行结果:

  • 相关阅读:
    Flink实例(十九):FLINK 异步IO (四)实例 (二) MySQL
    Flink实例(十八):FLINK 异步IO (三)实例 (一)
    Flink实例(十七):FLINK 异步IO (二)原理
    kata镜像
    golang no Go files
    docker命令
    golang 编译安装kata container (二)
    golang代理
    golang 安装依赖
    golang
  • 原文地址:https://www.cnblogs.com/ftx3q/p/15308667.html
Copyright © 2020-2023  润新知