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. vue2.0 Axios 的简单用法

    安装 使用 npm: $ npm install axios 使用 bower: $ bower install axios 使用 cdn: <script src="https:// ...

  2. Hive 函数之内置运算符

    本章介绍Hive的内置运算符.在Hive有四种类型的运算符: 关系运算符 算术运算符 逻辑运算符 复杂运算符 关系运算符 这些操作符被用来比较两个操作数.下表描述了在Hive中可用的关系运算符: 运算 ...

  3. Scala Tuple

    Python中的Tuple 元组将多样的对象集合到一起,元素不能修改,通过索引进行查找, 使用括号"()" 允许重复 Scala中的Tuple 概念跟Python是完全相同的 定义 ...

  4. 前端学习webpack

    ### 模块化- 为了保证代码充分解耦,一个大的项目拆分成互相依赖的一个一个的小的模块,最后再通过简单的方式合并在一起- 每一个js文件都可以看成一个单独的模块在node这边(服务器端),提出Comm ...

  5. 使用TFS需要注意的地方

    1. 用管理员添加了本地映射,然后用其他用户就添加不了映射,一定要先用管理员账户去把映射 删除掉: 2. 在正式使用TFS时,一定需要在VS工具的设置里面,设置一下,签出时自动获取最新的代码.(默认是 ...

  6. js 操作表格行数的删减

    沉溺了好几个月了,自从年假回来就一直在忙换工作的事情: 新环境.新同事,一如既往的工作, 那么闲话不多说,前两天师妹问我要一个类似于添加和删除的demo:闲暇时间我就参照一些代码写了一下, (发现有错 ...

  7. 【个人训练】(POJ1276)Cash Machine

    最近的很多题解应该都是dp相关的了,emmm因为dp对我而言思考难度比较大,那么为了理顺自己的思路当然只能通过写blog整理了.愿我能成功搞定dp这个大关!(至少中等难度的dp要能够解决啊o(TヘTo ...

  8. Sumsets 递推

    Sumsets Time Limit : 6000/2000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total Submi ...

  9. HTML如何给table添加滚动条

    HTML如何给table添加滚动条 要给table添加滚动条其实很简单,主要是给table放到一个div里去,然后再设置div显示滚动条即可.示例代码如下所示: <!--div比table大小要 ...

  10. 【iOS开发】IOS界面开发使用viewWithTag:(int)findTag方法获取界面元素

    http://blog.csdn.net/lxp1021/article/details/43952551 今天在开发OS界面的时候,遇到通过界面UIview viewWithTag:(int)fin ...