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 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
对new functionName()定义一个函数的理解
May 22 Javascript
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
ajax前台后台跨域请求处理方式
Feb 08 Javascript
Angularjs中date过滤器失效的问题及解决方法
Jul 06 Javascript
使用Jenkins部署React项目的方法步骤
Mar 11 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
Sep 09 Javascript
vue.js实现三级菜单效果
Oct 19 Javascript
Vue退出登录时清空缓存的实现
Nov 12 Javascript
微信小程序scroll-view的滚动条设置实现
Mar 02 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
Mar 09 Javascript
JavaScript实现矩形块大小任意缩放
Aug 25 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
PHP的面试题集,附我的答案和分析(一)
2006/11/19 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
2015/03/02 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
JavaScript程序设计之JS调试
2015/12/09 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
基于JavaScript实现类似于百度学术高级检索功能
2016/03/02 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
Angularjs单选改为多选的开发过程及问题解析
2017/02/17 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
微信小程序实现图片放大预览功能
2020/10/22 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
2020/02/10 Javascript
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
tensorflow模型文件(ckpt)转pb文件的方法(不知道输出节点名)
2020/04/22 Python
德国高性价比网上药店:medpex
2017/07/09 全球购物
Notino法国:购买香水和化妆品
2019/04/15 全球购物
学年自我鉴定
2014/01/16 职场文书
2014年五四青年节活动策划书
2014/04/22 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
银行求职自荐信
2014/06/30 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
2014年班干部工作总结
2014/11/25 职场文书
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL
MySQL子查询中order by不生效问题的解决方法
2021/08/02 MySQL
对讲机知识
2022/04/07 无线电