初始vue

//官网有详细教程http://doc.vue-js.com/

一 介绍

     vue是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件Vue生态系统支持的库开发的复杂单页应用

   //所谓渐进式就是指一层一层的递进关系,比如说你做一个小项目,可能简单搭建一个vue框架就行,当你做大一点项目,可能会用到jquery框架,那你你就可以在你的项目中引入jquery,通过npm下载,当你做非常大的项目时,可能就会用到vuex来搭建项目,这就是所谓的渐进式,一步一步根据需求来递进

二 安装

首先vue的下载安装是基于node 所以第一步在官网下载node.js 

    进入shell命令窗口 安装vue-cli    

npm install --global vue-cli    (--global是全局安装,会将vue脚手架安装到node文件夹,否则会安装到当前文件夹)

     安装好后可以检查一下    npm --version     //出现版本号

三  创建项目

   通过webpack创建vue项目

  ·    首先在你想要的位置建立文件夹,从当前文件夹中进入shell窗口

   创建一个基于 webpack 模板的新项目 【vue init webpack xxx】  xxx(项目文件夹名),之后会出来一系列的项目属性,比如作者和是否需要检查等,这个基本都写no ,
  当出现这样的窗项目就搭建好了

                         
   运行一下项目 npm run dev  运行成功后会返回一个地址基本上为http://loaclhost:8080,通过这个ip进入你的项目,首次搭建的项目图如下
                         
四 基本介绍
   1.声明式渲染
      通过简洁的模板声明来渲染数据 
 1     <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>  //引入vue
 5   </head>
 6   <body>
 7     <div id="app">
 8       {{msg}}
 9     </div>
10    <script>
11      new Vue({
12        el:"#app",
13        data:{
14          msg:"我的第一个vue"
15        }
16      })
17     
19    </script>
20   </body>

       2 条件与循环

            通过v-if来显示和隐藏

1 <div id="app-3">
2   <p v-if="seen">Now you see me</p>
3 </div>
4 var app3 = new Vue({
5   el: '#app-3',
6   data: {
7     seen: true
8   }
9 })
  3 显示和隐藏
    使用v-show来呈现
 <div id="app">
  <p v-show="bs">{{ msg }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>
   <script>
var app5 = new Vue({
  el: '#app',
  data: {
    mag: 'Hello Vue.js!',
    bs:true
  },
  methods: {
    reverseMessage: function () {
      this.bs=!this.bs
      
    }
  }

      4 用组件进行构建

  组件系统是 Vue.js 另一个重要概念,因为它提供了一种抽象,让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这点,几乎任意类型的应用的界面都可以抽象为一个组件树

//今天刚接触,很多不懂

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏韩东吉的Unity杂货铺

零基础入门 7: 创建自己的菜单

在上一篇菜单介绍分享之后,有一些小伙伴在后台留言说能不能分享下如何创建自定义的菜单栏?怎么创建?

1094
来自专栏非著名程序员

环境配置:React Native智能开发工具,可代码提醒的IDE—VS Code

(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) VS Code是一个专门为React Nat...

3865
来自专栏九彩拼盘的叨叨叨

减少网站响应时间概要

933
来自专栏生信技能树

请品鉴我的vim配置

背景 本人是生信工程师,主要使用的语言是 python, R, perl, shell,经常要ssh到远程服务器上写代码,因此学习了vim,后来发现了spf13...

5816
来自专栏大魏分享(微信公众号:david-share)

VMware软件定义数据中心分析工具介绍----第二篇

在本文连载的第一篇中,我向大家介绍了vROps的架构、vROps的指标含义,以及如何自定义一个告警。该文章得到了VMware中国的转发,也使更多的朋友能够阅读到...

3748
来自专栏小尘哥的专栏

前后端分离Nuxt.js解决SEO问题

背景:由于后端程序猿通常对CSS 、JS掌握不是特别好,通常的开发模式,UI把静态html做好交给程序猿,程序猿开发,把静态html变成动态的时候经常会有各种样...

4184
来自专栏极客编程

Vue.js如何写一个简单的原生js模块,浏览器中的表现如何?

浏览器正在逐步的支持原生JavaScript模块。Safari和Chrome的最新版本已经支持它们了,Firefox和Edge也将很快推出。

1932
来自专栏Youngxj

js实现网页弹出窗口的代码详细教程

6005
来自专栏阮一峰的网络日志

短网址还原的Bookmarklet

如今,很多网站提供短网址服务。 ? 但是有时候,我们需要知道真实网址是什么。 ? 一个个点击,实在太麻烦。何况在国内,很多网址是点不开的。 我一直希望,有人做一...

3528
来自专栏前端儿

iPhone页面的常用调试方法

某些页面需要设置HOST才能进行访问,在iPhone上不好设置HOST,所以需要一些代理工具帮助我们

4011

扫码关注云+社区

领取腾讯云代金券