zoukankan      html  css  js  c++  java
  • Vue初步认识

    什么是Vue

    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架(根据需求使用特定的功 能)。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
    关于学习Vue的前置工作/技术储备
    1.GitBatch
    GitBatch是一个可以编写shell脚本的工具,今天我们学习的内容在cmd下是不支持的。你要       
    么选择gitbatch,要么你选择Linux系统
    2高级记事本
         UltraEdit UE
         NodePad++
         EditPlus
         SublimeText
    3.Node-----npm 命令
    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
    Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。
    Node.js 的包管理器 npm,是全球最大的开源库生态系统。
    单页面应用
    单页面应用(SinglePage Web Application,SPA)
    只有一张Web页面的应用,是一种从Web服务器加载的富客户端,单页面跳转仅刷新局部资源 ,          
    公共资源(js、css等)仅需加载一次,常用于PC端官网、购物等网站
     
    多页面应用
         多页面应用(MultiPage Application,MPA)
    多页面跳转刷新所有资源,每个公共资源(js、css等)需选择性重新加载,常用于 app 或 客户端
    等。
     
     
    Vue和React
    Vue和React目前都用到了VirtualDom
    轻量级
    响应式组件
    服务器端渲染
    易于集成路由工具,打包工具以及状态管理工具
    优秀的支持和社区
     
    Vue的几个简单小例子
    HTML

    <div id="app">
    {{ message }}
    </div>

    JS
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
     
    结果:
    Hello Vue!
     
    HTML
    <div id="app-2">
      <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息!
      </span>
    </div>
    JS
    app2 = new Vue({
      el: '#app-2',
      data: {
        message: '页面加载于 ' + new Date().toLocaleString()
      }
    })
     
     
    HTML
    <div id="app-3">
      <p v-if="seen">现在你看到我了</p>
    </div>
    JS
     
    结果:现在你看到我了
    HTML
     
     
    JS
    var app4 = new Vue({
      el: '#app-4',
      data: {
        todos: [
          { text: '学习 JavaScript' },
          { text: '学习 Vue' },
          { text: '整个牛项目' }
        ]
      }
    })
    结果:
    学习JavaScript
    学习Vue
    学习整个项目
    Node.js
    Node只能在shell中使用,也就是说,想要运行node命令,需要在系统的shell中,比如windows的cmd。node自带的那个叫repl,不能在其中运行npm命令,只能运行js语句
     
    打开GitBash>>>输入命令行>>>npm install -g cnpm --registry=https://registry.npm.taobao.org
    >>>>>在使用vue命令前,需要安装cnpm i -g vue-cli 这个脚手架>>>>vue  list测试>>>vue init webpack-simple +名称(小写)(设置一些东西)>>>>cd+文件名>>>npm install>>npm run dev
  • 相关阅读:
    easyui 获取分页栏中的行数(pageSize)和页码数(pageNumber)
    C# 跨盘符移动文件
    C# Json简单处理
    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解
    Jquery中的(function($){...})(jQuery)
    前端框架你究竟选什么
    Kindeditor使用心得
    jvm——内存模型
    jvm——NIO
    Java——静态类型 实际类型
  • 原文地址:https://www.cnblogs.com/864466244qq/p/8905735.html
Copyright © 2011-2022 走看看