vue小白入门教程


Posted in Javascript onApril 02, 2018

一、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生命周期

每个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); //2
 },
 mounted: function () {
  console.log(this.el); //<div id =”app”></div>
 }
});

完整的一个生命周期图:

vue小白入门教程 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的Location地址对象
Jan 16 Javascript
JavaScript 学习点滴记录
Apr 24 Javascript
JQuery UI皮肤定制
Jul 27 Javascript
图片动画横条广告带上下滚动的JS代码
Oct 25 Javascript
常见的原始JS选择器使用方法总结
Apr 09 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
javascript中基本类型和引用类型的区别分析
May 12 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
微信小程序表单验证功能完整实例
Dec 01 Javascript
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
vue设计一个倒计时秒杀的组件详解
Apr 06 Javascript
Angular父组件调用子组件的方法
Apr 02 #Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 #Javascript
微信小程序block的使用教程
Apr 01 #Javascript
JavaScript动态加载重复绑定问题
Apr 01 #Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 #Javascript
Vue.js进阶知识点总结
Apr 01 #Javascript
vue 指定组件缓存实例详解
Apr 01 #Javascript
You might like
德生PL330测评
2021/03/02 无线电
PHP中上传大体积文件时需要的设置
2006/10/09 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
PHP 多任务秒级定时器的实现方法
2018/05/13 PHP
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
2013/12/31 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
javascript合并表格单元格实例代码
2016/01/03 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
总结在前端排序中遇到的问题
2016/07/19 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
JS实现拖拽的方法分析
2016/12/20 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
Python3处理文件中每个词的方法
2015/05/22 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
python MysqlDb模块安装及其使用详解
2018/02/23 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
pygame实现打字游戏
2021/02/19 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
HTML5中的新元素介绍
2008/10/17 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
2019/01/24 HTML / CSS
h5封装下拉刷新
2020/08/25 HTML / CSS
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
销售顾问的岗位职责
2013/11/13 职场文书
计算机专业毕业生自荐书
2014/06/02 职场文书
小学教师教学反思
2016/02/24 职场文书
2019求职信:应届生求职信范文
2019/04/24 职场文书
Python实现Hash算法
2022/03/18 Python