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之后再学习.部分图片未上传成功,稍后完善,请见谅. ...
最新文章
- poj 3150 Cellular Automaton(迷糊,但原理是用的快速幂)
- 使用@Valid进行Spring验证bindingresult 用法
- 【设计模式】C++单例模式
- leetcode116. 填充每个节点的下一个右侧节点指针(层序遍历07)
- 前端学习(1132):正则表达式学习目标
- 相信冬天已来FreeEIM
- 数据结构图文解析之:哈夫曼树与哈夫曼编码详解及C++模板实现
- ASP.NET AJAX 学习笔记
- 人生不可能完美因此我们要学会讲究着过
- DevExpress v15.1:Reporting控件功能增强(二)
- Android应用程序组件Content Provider的启动过程源代码分析(5)
- 【SqlServer】不允许保存更改。您所做的更改要求删除并重新创建以下表。您对无法重新创建的表进行了更改或者启用了“阻止保存要求重新创建表的更改”选项
- DSGE模型的Stata实现简介
- securable的LOCKED ON,LOCKED OFF,YES,NO四个的区别
- 计算机网络管理 孙卫真,计算机网络管理员
- html中如何在数字上加方框,EXCEL单元格中方框添加数字(或者数字添加方框)
- u盘插入计算机显示被写保护,u盘被写保护了怎么去掉保护,教您解除u盘被写保护...
- GIT:cherry-pick挑拣提交
- 三菱服务器绝对位置,绝对位置控制指令
- Macbook 苹果电脑 安装搭建Vue脚手架教程m1芯片Vue脚手架初学