vue的特点在于:响应的数据绑定、组合的视图组件。

vue的文件,分成三个部分<template>html模板</template>  <script>js</script>  <style>css<style>,这三个部分组成一个vue的组件。

我们先用vue-cli来初始化一个项目。

1.Node.js安装

https://nodejs.org/en/download/

2.安装vue-cli

npm install -g vue-cli

3.使用vue-cli初始化项目

 vue init webpack-simple my-project-name

4、进到目录

cd my-project

5、安装依赖

npm install

6、开始运行

npm run dev

运行后我们就可以在浏览器中看到一个这样的页面了

这是我们刚刚安装的vue项目,现在我们可以把它原来的页面删除或者改动,写自己需要的项目了。

new一个vue对象,主要包含了三个重要的属性data(vue对象的数据相当于model)、method(vue对象的方法)、watch(vue对象的事件监听)

模板指令将视图层(html)和逻辑层(data)连接起来,常用的模板指令:

v-if(v-show):判断指令

v-text(v-html、{{}}):模板渲染

v-for:循环指令

v-on:事件绑定

vue入门知识的更多相关文章

  1. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  2. React的入门知识与概念【1】

    回顾在以往的项目开发中,从最初的使用的原生html+js+css+jquery开发,到后来随着项目功能的增加,也渐渐学习了Vue.js框架的开发,以及Vue.js的全家桶Axios,Vue-route ...

  3. Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  4. Vue 入门之组件化开发

    Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...

  5. vue入门(二)----模板与计算属性

    其实这部分内容我也是参考的官网:http://cn.vuejs.org/v2/guide/syntax.html,但是我还是想把自己不懂的知识记录一下,加深印象,也可以帮助自己以后查阅.所谓勤能补拙. ...

  6. Vue大概知识体系和学习参考

    Vue大概知识体系和学习参考文档 官方文档学习,参考,借鉴地址:https://cn.vuejs.org/v2/guide/installation.html 菜鸟教程:https://www.run ...

  7. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  8. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  9. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

随机推荐

  1. 初步学习pg_control文件之八

    接前文  初步学习pg_control文件之七  继续 看:catalog_version_no 代码如下: static void WriteControlFile(void) { ... /* * ...

  2. PIC24 通过USB在线升级 -- USB CDC bootloader

    了解bootloader的实现,请加QQ: 1273623966 (验证填bootloader):欢迎咨询或定制bootloader:我的博客主页www.cnblogs.com/geekygeek 今 ...

  3. 云计算之路-阿里云上:受够了OCS,改用ECS+Couchbase跑缓存

    当今天早上在日志中发现这样的错误之后,对阿里云OCS(mecached缓存服务)的积怨倾泻而出. 2014-06-08 07:15:56,078 [ERROR] Enyim.Caching.Memca ...

  4. (原)编写JAVA工具之json自动封装成pojo

    代码在最后 我个人是不太喜欢http和json,可能是游戏做的多了的原因的,对通信协议和通信方式特敏感,因此即使是做应用我也会选择rpc而非http,但是有时候因为各种原因,还是不的不处理标准的htt ...

  5. C#3DES加密了解一下

    最近一个项目中,因为服务端是用的java开发的,客户端是用的C#,由于通信部分采用到了3DES加密,所以做个记录,以备以后需要的时候直接用. 这是对方(java)的加密算法,和网上流传的代码也差不多( ...

  6. npx 命令介绍

    这个是在 npmv5.2.0引入的一条命令(查看),引入这个命令的目的是为了提升开发者使用包内提供的命令行工具的体验. 为什么引入这个命令 举个例子,我们开发中要运行 parcel 命令来打包:par ...

  7. ES6 export,import报错

    问题描述: 现有两个文件: profile.js const firstName = 'Michael'; const lastName = 'Jackson'; const year = 2018; ...

  8. Qt Qwdget 汽车仪表知识点拆解7 图像绘制,旋转

    先贴上效果图,注意,没有写逻辑,都是乱动的 看下最中心的指针旋转,这里使用的QPainter的绘制函数 要显示复杂的效果,需要分层 void Widget::draw_number_pointer() ...

  9. MySQL训练营02

    一.表操作: 1.MySQL表的数据类型: MySQL的数据类型分为3种: 数值 时间/日期 字符/字符串 (1)数值类型: 包括:TinyInt.SmallInt.MediumInt.Int.Big ...

  10. webmagic 二次开发爬虫 爬取网站图片

    webmagic的是一个无须配置.便于二次开发的爬虫框架,它提供简单灵活的API,只需少量代码即可实现一个爬虫. webmagic介绍 编写一个简单的爬虫 webmagic的使用文档:http://w ...