vue基础特性
在这里我们主要是讲解一些vue实例的属性和一些基础的指令
vue实例属性:
其实和我们之前所学的对象的属性是相似的东西
vue的基础指令:
对于指令,大家可能之前么有接触过相关的概念,其实大家可以这样理解
指令:
可以看做是命令,在vue中我们可以通过指令来完成相关的操作；在vue中以v-开头,后面紧跟具体的操作命令
一些基本的指令：
v-once: 只绑定一次
v-bind: 绑定数据
v-model: 绑定模型
v-on: 绑定事件
v-if v-show: 条件渲染
方法：
使用methods来定义方法,使用v-on监听事件,绑定事件处理函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<!--在这里使用v-on来绑定事件处理的方法(函数)-->
<button v-on:click='fn'>click</button> </div>
</body>
</html>
<script>
var dataModel = {
message: 'hello world!'
}
var vm= new Vue({
el:'#app',
data:dataModel,
//在这里使用methods对象来定义方法(点击事件处理函数)
methods:{
fn: function(){
console.log("这个方法被调用了")
}
}
})
</script>
生命周期钩子函数：
- 其实指的也就是生命周期方法,只不过是挂载到执行的各个阶段,所以叫钩子函数
演示：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Vue入门之生命周期</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head> <body>
<div id="app">
<p>{{ number }}</p>
<input type="text" name="btnSetNumber" v-model="number">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
number: 1
}, //在创建对象之前,监控数据变化和初始化事件之前调用
beforeCreate: function() {
console.log('beforeCreate 钩子执行...');
console.log(this.number) //数据监测还没有开始
},
//实例创建完成之后调用,挂载阶段还没有开始
created: function() {
console.log('cteated 钩子执行...');
console.log(this.number)
},
//开始挂载的时候执行,这时html还没有渲染到页面上
beforeMount: function() {
console.log('beforeMount 钩子执行...');
console.log(this.number)
},
//挂载完成,也就是模板中的heml渲染到了页面中,此时可以做一些ajax的操作,这个钩子函数只会执行一次
mounted: function() {
console.log('mounted 钩子执行...');
console.log(this.number)
},
//数据更新之前调用
beforeUpdate: function() {
console.log('beforeUpdate 钩子执行...');
console.log(this.number)
},
//数据更新之后调用
updated: function() {
console.log('updated 钩子执行...');
console.log(this.number)
},
//数据销毁之前
beforeDestroy: function() {
console.log('beforeDestroy 钩子执行...');
console.log(this.number)
},
//数据销毁之后
destroyed: function() {
console.log('destroyed 钩子执行...');
console.log(this.number)
},
}); //实现数据的更新
// vm.$set(dataModel, 'number', 123) //销毁钩子的执行
// vm.$destroy(true) </script>
</body> </html>
补充：
1.activated
keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。
2.deactivated
keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。
vue基础特性的更多相关文章
- vue总结 01基础特性
最近有时间来总结一下vue的知识: 一.vue.js 被定义成一个开发web界面的前端库,是一个非常轻量的工具.vue.js本身具有响应式和组件化的特点. 我们不需要在维护视图和数据的统一上花费大量的 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期
回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)
一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...
- vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...
- Vue基础知识之vue-resource和axios
Vue基础知识之vue-resource和axios 原文链接:http://www.cnblogs.com/Juphy/p/7073027.html vue-resource Vue.js是数据驱 ...
- Vue基础系列（四）——Vue中的指令（上）
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- Vue基础系列（五）——Vue中的指令（中）
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
随机推荐
- Algorithm --> 二进制中1的个数
行文脉络 解法一——除法 解法二——移位 解法三——高效移位 解法四——查表 扩展问题——异或后转化为该问题 对于一个字节(8bit)的变量,求其二进制“1”的个数.例如6(二进制0000 0110) ...
- OpenStreetMap、googleMap等经纬度和行列号之间相互转化
# OpenStreetMap经纬度转行列号 def deg2num(lat_deg, lon_deg, zoom): lat_rad = math.radians(lat_deg) n = 2.0 ...
- shiro权限框架（五）
五.与Spring集成 5.1 环境准备 <dependency> <groupId>org.apache.shiro</groupId> <artifact ...
- jsp pageEncoding属性详解
Java pageEncoding原理详解 首先看下文章解释: 意思是jsp文件本身的编码 巨大的疑问:这里有一个很大的问题,既然你都已经从jsp中读到了这条属性,证明内容读取正确,那你还需要知道这条 ...
- 十个 PHP 开发者最容易犯的错误
PHP 语言让 WEB 端程序设计变得简单,这也是它能流行起来的原因.但也是因为它的简单,PHP 也慢慢发展成一个相对复杂的语言,层出不穷的框架,各种语言特性和版本差异都时常让搞的我们头大,不得不浪费 ...
- 团队作业7——Beta版本冲刺计划及安排
上一个阶段的总结: 在Alpha阶段,我们小组已近完成了大部分的功能要求,小组的每一个成员都发挥了自己的用处.经过了这么久的磨合,小组的成员之间越来越默契,相信在接下来的合作中,我们的开发速度会越来越 ...
- android 自定义ScrollView实现背景图片伸缩(阻尼效果)
android 自定义ScrollView实现强调内容背景图片伸缩(仿多米,qq空间背景的刷新) 看到一篇文章,自己更改了一下bug: 原文地址:http://www.aiuxian.com/arti ...
- bzoj千题计划251：bzoj3672: [Noi2014]购票
http://www.lydsy.com/JudgeOnline/problem.php?id=3672 法一:线段树维护可持久化单调队列维护凸包 斜率优化DP 设dp[i] 表示i号点到根节点的最少 ...
- redis入门（05）redis的key命令
一.什么是redis键命令 Redis 键(key):Redis 键命令用于管理 redis 的键. Redis 键命令的基本语法: redis 127.0.0.1:6379> COMMAND ...
- GIT入门笔记（9）- git的add和commit机制原理
工作区有一个隐藏目录.git,这个不算工作区,而是Git的版本库. Git的版本库里存了很多东西,其中最重要的就是称为stage(或者叫index)的暂存区,还有Git为我们自动创建的第一个分支mas ...