Vue—基础概念—实例
原文地址:Vue实例
1、创建Vue实例
每个 Vue 应用都是通过用 Vue
函数创建一个新的 Vue 实例开始的:
var vm = new Vue({// 选项
})
在构造函数中传入一个对象,并且在对象中声明各种Vue需要的数据和方法,包括:
- el
- data
- methods
等等,接下来我们一 一介绍。
2、模板或元素
每个Vue实例都需要关联一段Html模板,Vue会基于此模板进行视图渲染。我们可以通过el属性来指定。例如一段html模板:
<div id="app"></div>
然后创建Vue实例,关联这个div
var vm = new Vue({el:"#app"
})
这样,Vue就可以基于id为app
的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。
3、数据
当Vue实例被创建时,它会尝试获取在data中定义的所有属性,用于视图的渲染,并且监视data中的属性变化,当data发生改变,所有相关的视图都将重新渲染,这就是“响应式“系统。
html:
<div id="app"><input type="text" v-model="name"/>
</div>
js:
var vm = new Vue({el:"#app",data:{name:"刘德华"}
})
- name的变化会影响到
input
的值 - input中输入的值,也会导致vm中的name发生改变
4、方法
Vue实例中除了可以定义data属性,也可以定义方法,并且在Vue实例的作用范围内使用。
html:
<div id="app">{{num}}<button v-on:click="add">加</button>
</div>
js:
var vm = new Vue({el:"#app",data:{num: 0},methods:{add:function(){// this代表的当前vue实例this.num++;}}
})
4.5.生命周期钩子
4.5.1.生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程 :创建实例,装载模板,渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数(监听函数)。每当Vue实例处于不同的生命周期时,对应的函数就会被触发调用。
生命周期:
4.5.2.钩子函数
- beforeCreated:我们在用Vue时都要进行实例化,因此,该函数就是在Vue实例化时调用,也可以将他理解为初始化函数比较方便一点,在Vue1.0时,这个函数的名字就是init。
- created:在创建实例之后进行调用。
- beforeMount:页面加载完成,没有渲染。如:此时页面还是{{name}}
- mounted:我们可以将他理解为原生js中的window.οnlοad=function({...}),或许大家也在用jquery,所以也可以理解为jquery中的$(document).ready(function(){….}),他的功能就是:在dom文档渲染完毕之后将要执行的函数,该函数在Vue1.0版本中名字为compiled。 此时页面中的{{name}}已被渲染成峰哥
- beforeDestroy:该函数将在销毁实例前进行调用 。
- destroyed:改函数将在销毁实例时进行调用。
- beforeUpdate:组件更新之前。
- updated:组件更新之后。
例如:created代表在vue实例创建后;
我们可以在Vue中定义一个created函数,代表这个时期的钩子函数:
// 创建vue实例var app = new Vue({el: "#app", // el即element,该vue实例要渲染的页面元素data: { // 渲染页面需要的数据name: "峰哥",num: 5},methods: {add: function(){this.num--;}},created: function () {this.num = 100;}});
结果:
4.5.3.this
我们可以看下在vue内部的this变量是谁,我们在created的时候,打印this
methods: {add: function(){this.num--;console.log(this);}},
控制台的输出:
Vue—基础概念—实例相关推荐
- Vue—基础概念—组建化
6.组件化 在大型应用开发的时候,页面可以划分成很多部分.往往不同的页面,也会有相同的部分.例如可能会有相同的头部导航. 但是如果每个页面都独自开发,这无疑增加了我们开发的成本.所以我们会把页面的不同 ...
- Vue—基础概念—指令
原文地址:Vue指令 5.指令 什么是指令? 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的预期值是:单个 JavaScript 表达式.指令的职责是,当表达式的值改变时,将 ...
- Vue—基础概念—路由(vue-router)
原文地址:Vue路由vue-router 7.路由vue-router 7.1.场景模拟 现在我们来实现这样一个功能: 一个页面,包含登录和注册,点击不同按钮,实现登录和注册页切换: 7.1.1.编写 ...
- Vue基础概念,基础指令,选项式API
- vue脚手架_基础API、Vue基本概念、vue-cli 脚手架、vue指令
vue脚手架_基础API 安装:vue-devtools 学习和调试vue必备之利器 - 官方插件 安装: 打开Chrome浏览器 =>点击浏览器右上角小图标,按图示操作 2.进入扩展程序菜单 ...
- Vue基础之Vue实例
构造器: 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的: 在实例化 Vue 时,需要传入一个选项对象,它可以包含数据.模板.挂载元素.方法.生命周期钩子等选项. ...
- Vue知识(一)Vue基础语法
Vue知识 一.邂逅Vue.js 1.认识Vue.js 2.Vue.js安装方式 3.Vue初体验 4.Vue的MVVM框架 二.Vue基础语法 v-if指令 v-show指令 v-else指令 v- ...
- 面试:JavaScript基础概念
文章目录 1. JS基础概念 JavaScript 常见知识总结 重点 1.js的基本数据类型都有哪些 2.判断基本数据类型的方法 typeof instanceof Object.prototype ...
- 2022前端知识整理:十、vue基础
十.vue基础 2022前端知识整理:第十部分.vue基础,仅包含vue2.0相关知识,建议先完成html5.css3和JavaScript ES6之后再学习.部分图片未上传成功,稍后完善,请见谅. ...
最新文章
- 无监督域对抗算法:ICCV2019论文解析
- calibrate_cameras算子说明
- 福州大学计算机专业排名2018,软科2018年世界一流学科排名发布 福州大学9个学科上榜...
- 15.Node.js REPL(交互式解释器)
- h5的fetch方法_你不需要jQuery(三):新AJAX方法fetch()
- 关于ReetrantLock
- doubango简介
- websocket文档_WebSocket推送 原理扫盲到上手实践
- 安卓apk签名提取工具_Android测试工具入门介绍(二)
- Maxcompute造数据-方法详解
- java 类 加载 初始化_java类的加载与初始化
- javascript的DOM、BOM操作
- HTML placeholder
- 什么是张量(tensor)
- kvm : virsh create *** 报错处理
- How to build UDK2015?
- Unity-拓展篇-接入海康威视摄像头
- marlab中主成分得分怎么求_线性回归中多重共线性处理——主成分分析法
- 基础平面设计(文字排版篇)
- 51单片机最小系统解读