vue小白快速入门
一、vue是什么
Vue 是一套用于构建用户界面的渐进式框架。
压缩后仅有17kb
二、vue环境搭建
你直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。
但在用 Vue 构建大型应用时推荐使用 NPM 安装。
这里推荐一下是用淘宝的cnpm，非常的快
npm install -g cnpm --registry=https://registry.npm.taobao.org
然后进行安装
# 全局安装 vue-cli
npm install --g vue-cli
# 创建一个基于 webpack 模板的新项目
vue init webpack my-project
# 安装依赖，走你
cd my-project
npm run dev
三、第一个vue应用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<div>{{title}}</div>
<button @click="say()">单击事件</button></br>
<div>今年{{age}}</div>
<input v-model="age">
</div>
</body>
</html>
<script src="lib/vue.js"></script>
<script src="js/hello.js"></script>
var app = new Vue({ //通过构造函数Vue就可以创建一个Vue的根实例，并启动Vue应用
el: '#app', //指定页面上一个已经存在的DOM元素来挂载Vue实例
data: { //对象的数据
title: 'hello vue', //通过插值语法{{}}绑定
age: 22 //通过v-model进行双向数据绑定
},
methods: { //对象的方法
say: function(){
console.log(this.title);
}
},
watch: { //监听数据的变化
'age': function(newVal, oldVal){
console.log(newVal, oldVal);
}
}
});
四、Vue生命周期
每个Vue 实例创建时，都会经历一系列的初始化过程，同时也会调用相应的生命周期钩子，我们可以利用这些钩子，在合适的时机执行我们的业务逻辑。
大体上的生命周期就是：创建（created)---挂载(mounted)---销毁(destroy)
Vue 的生命周期钩子比较常用的有：
• created 实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载， $el 还不可用。需要初始化处理一些数据时会比较有用．
• mounted el 挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始。
• beforeDestroy 实例销毁之前调用。主要解绑一些使用addEventListener 监听的事件等。
var app =new Vue({
el: '# app',
data: {
a: 2
} ,
created: function () {
console.log(this.a); //
},
mounted: function () {
console.log(this.el); //<div id =”app”></div>
}
});
完整的一个生命周期图：
vue小白快速入门的更多相关文章
- .NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用
写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...
- Vue.js+vue-element搭建属于自己的后台管理模板：Vue.js快速入门（二）
Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...
- 第三个视频作品《小白快速入门greenplum》上线了
1.场景描述 第三个视频作品出炉了,<小白快速入门greenplum>上线了,有需要的朋友可以直接点击链接观看.(如需购买,请通过本文链接购买) 2. 课程内容 课程地址:https:// ...
- Vue.js 快速入门
什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备 我推荐 ...
- Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例，vue基础语法
一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...
- 利用python 数据分析入门，详细教程，教小白快速入门
这是一篇的数据的分析的典型案列,本人也是经历一次从无到有的过程,倍感珍惜,所以将其详细的记录下来,用来帮助后来者快速入门,,希望你能看到最后! 需求:对obo文件进行解析,输出为json字典格式 数据 ...
- Vue.js快速入门
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...
- Vue.js—快速入门
Vue.js是什么 Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目 ...
- Vue.js——快速入门
Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使 ...
随机推荐
- 页面某些特定图标的权限，比如导入导出表格，下载等等，这个权限必须在有某个页面查看的权利的基础上（细粒度）（shiro项目中来的四）
一,查找按钮权限的设置 第一步:会根据用户的相关信息去查到它的角色表: SELECT * FROM SYS_USER WHERE user_id='eded77bdf35347249b2bacfa18 ...
- 浅谈JS中的浅拷贝与深拷贝
前端工程师应该都比较熟悉浅拷贝和深拷贝的概念,在日常业务代码的过程中,特别是做数据处理的时候,经常行的会遇到,比如如何在不修改原对象的基础上,重新生成一个一模一样的对象,加以利用,又或是,如何巧妙地运 ...
- Frogger POJ - 2253
题意 给你n个点,1为起点,2为终点,要求所有1到2所有路径中每条路径上最大值的最小值. 思路 不想打最短路 跑一边最小生成树,再扫一遍1到2的路径,取最大值即可 注意g++要用%f输出!!! 常数巨 ...
- mininet中加载ECN
今天捣鼓了一上午,中午把ECN部署到mininet中了,简单记录下加载过程: 加载前搜索了全网,找到了一个有用的参考网页:https://groups.google.com/a/openflowhub ...
- 详解QT5.10.0搭载OpenCV3.4.0环境配置步骤说明
一.准备工作: 1下载Qt5.10.0 和 Qt Creator 4.5.0软件(http://download.qt.io/official_releases/qt/) 2.下载opencv3.40 ...
- 《阿里巴巴Android编码规范》阅读纪要(二)
版权声明:本文出自汪磊的博客,转载请务必注明出处. 本篇继续上一篇<阿里巴巴Android编码规范>阅读纪要(一) ,还是建议各位同学有时间完整阅读一下<阿里巴巴Android编码规 ...
- js备战春招の三
DOM (Document Object Model)(文档对象模型)是用于访问 HTML 元素的正式 W3C 标准. window.alert() 弹出警告框. document.write() 方 ...
- java web需要好好掌握的一些东西
这是一些需要好好的复习的东西 本来存了个文档 怕整丢了 就在这里保存一下 java 基础 重点关注集合 如list hashmap等使用(有时间多看看hashmap的实现原理 问的比较多)多线程 ...
- WP Super Cache+七牛云配置CDN加速，让你的网站秒开
CDN加速网站是几乎所有的站长都在考虑的问题,CDN,全称是Content Delivery Network,即内容分发网络.所谓CDN加速,通俗的来说就是把原服务器上数据复制到其他服务器上,用户访问 ...
- 用JAVA进行Json数据解析（对象数组的相互嵌套）
这段时间我们在做一个英语翻译软件的小小小APP,涉及到了对Json数据的解析,所以特地来总结一下! 假设我们要对如下数据进行解析,其实在平时,返回的Json数据是很乱的,很难分清数据的关系,这是经过相 ...