vue入门知识
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入门知识的更多相关文章
- Vue学习记录第一篇——Vue入门基础
		
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
 - React的入门知识与概念【1】
		
回顾在以往的项目开发中,从最初的使用的原生html+js+css+jquery开发,到后来随着项目功能的增加,也渐渐学习了Vue.js框架的开发,以及Vue.js的全家桶Axios,Vue-route ...
 - Vue入门基础
		
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
 - Vue 入门之组件化开发
		
Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...
 - vue入门(二)----模板与计算属性
		
其实这部分内容我也是参考的官网:http://cn.vuejs.org/v2/guide/syntax.html,但是我还是想把自己不懂的知识记录一下,加深印象,也可以帮助自己以后查阅.所谓勤能补拙. ...
 - Vue大概知识体系和学习参考
		
Vue大概知识体系和学习参考文档 官方文档学习,参考,借鉴地址:https://cn.vuejs.org/v2/guide/installation.html 菜鸟教程:https://www.run ...
 - wepack+sass+vue 入门教程(三)
		
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
 - wepack+sass+vue 入门教程(二)
		
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
 - wepack+sass+vue 入门教程(一)
		
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
 
随机推荐
- 如何将h5网页改成微信网页
			
1.如何将h5网页改成微信网页 1.设置安全域名 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”. 备注:登录后可在“开发者中心”查看对 ...
 - 初步学习pg_control文件之十三
			
接前文,初步学习pg_control文件之十二 看这个: * backupStartPoint is the redo pointer of the backup start checkpoint, ...
 - Java 基础------16进制转2进制
			
我们知道,数字8用二进制表示为:1000 用16进制表示为:8 那么我给你一个16进制的数字,0x7f,他的二进制是什么呢? 一个16进制的位数,用4位表示.比如,0x 7 f 其中: 7用4位二进制 ...
 - 【jQuery】 效果
			
[jQuery] 效果 资料 http://www.w3school.com.cn/jquery/jquery_ref_effects.asp 1. 显示隐藏 hide(); 隐藏 show(): 显 ...
 - 云计算之路-阿里云上:受够了OCS,改用ECS+Couchbase跑缓存
			
当今天早上在日志中发现这样的错误之后,对阿里云OCS(mecached缓存服务)的积怨倾泻而出. 2014-06-08 07:15:56,078 [ERROR] Enyim.Caching.Memca ...
 - 【APUE】Chapter15 Interprocess Communication
			
15.1 Introduction 这部分太多概念我不了解.只看懂了最后一段,进程间通信(IPC)内容被组织成了三个部分: (1)classical IPC : pipes, FIFOs, messa ...
 - js解决img标签加载失败显示默认图片
			
问题: 为所有显示楼盘的页面添加一个加载失败的默认图片. 基本思路: img标签中有个onerror属性,专门用来处理加载失败的事件.所以可以用jquery添加onerror属性,在onerror中加 ...
 - Android之内容提供者ContentProvider的总结
			
本文包含以下知识点: ContentProvider Uri 的介绍 ContentResolver: 监听ContentProvider的数据改变 一:ContentProvider部分 Conte ...
 - python安装Django
			
现在有很多建站系统,很多都是基于php的,比如WordPress. 而Django 是老牌基于Python的CMS框架了,一直听说很强大,甚至曾经很红的Ruby On Rails都参考了它的很多概念, ...
 - 【iOS开发】NSOperation简单介绍
			
iOS开发多线程篇—NSOperation简单介绍 一.NSOperation简介 1.简单说明 NSOperation的作⽤:配合使用NSOperation和NSOperationQueue也能实现 ...