vue注意项
1.通过官方vue生命周期图，总结其中的几个钩子函数
var vm = new Vue({
el: '#app',
data: {
},
beforeCreate() {
alert('组件刚刚被创建，但是没有赋予任何属性，和方法');
},
created() {
alert('我是在创建对象之后调用');
},
// beforeCompile和compiled这两个生命钩子函数在2.0之后被created函数代替
/* beforeCompile() {
alert('我是在编译之前调用的');
},
compiled() {
alert('我是在编译之后调用的');
},*/
beforeMount() {
alert('我是挂载之前');
},
// ready()函数被替换成了mounted
mounted() {
this.$nextTick(function () {
alert('节点完全插入到了dom元素中');
})
},
beforeDestroy() {
alert('对象销毁之前调用');
},
beforeUpdate(){
alert('组件更新之前')
},
updated(){
alert('组件更新完毕');
},
destroyed() {
alert('对象销毁');
}
})
2.计算属性
计算属性根据字面意思就是一种属性，而写法看起来却像是一个函数，这个会给人一种误导，所以这一点需要注意，这个属性只是根据返回结果来的。注意计算属性一定要有return
计算属性对象中，有两个函数get(),set(),一般默认的直接返回是调用了其中的get()函数
<script>
var vm = new Vue({
el: '#app',
data: {
beforeAge: 10
},
computed: {
/*age:function() {
return this.beforeAge+1
}*/
//ES6写法
/*age(){
return this.beforeAge+1;
}*/
age: {
get() {
return this.beforeAge + 1;
},
set() {
// 这样是改变不了自己的，因为在get()中返回值是依赖于beforeAge属性的
return 20;
}
}
}
}) </script>
3.在moutend生命钩子加载之前，可能由于网络原因，页面渲染的时候，会出现花括号，这种给人的体验就是非常糟糕的，vue中提供了一种解决这个的方法，就是在挂载点中加一个属性v-cloak
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head> <body>
<div id="app" v-cloak>
<p>{{beforeAge}}</p>
<p>{{age}}</p>
</div>
</body>
....
3.vue简单实例方法
<script>
var vm = new Vue({
// el: '#app',
data: {
age: 10
},
say(){
alert('我是自定义方法');
}
})
vm.$mount('#app'); //这个是手动将vue实例化后的对象挂载到dom中
console.log(vm.$el) //这个是获取挂载点元素
console.log(vm.$data) //这个是获取整个对象中的数据
vm.$options.say(); //这个是调用vue中自定义方法，而不是methods中的方法，也可以调用自定义属性 </script>
4.在旧的版本中，v-for循环如果不加:key时，重复数据不让添加，但在目前最新版本中，已经解决这个问题，可以直接使用v-for
vue注意项的更多相关文章
- vue开发项目的坑
[Vue warn]: Do not use built-in or reserved HTML elements as component id: MenuItem [Vue warn]: Do n ...
- 构建大型 Vue.js 项目的10条建议
下面是我在开发大型 Vue 项目时的最佳实践.这些技巧将帮助你开发更高效.更易于维护和共享的代码. 今年做自由职业的时候,我有机会开发了一些大型 Vue 应用程序.我所说的这些项目,Vuex stor ...
- vue cli 3
介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...
- ABAP system landscape和vue项目webpack构建的最佳实践
基于Netweaver的ABAP transport route一般都有dev,test和prod三种类型的系统. 而Vue前端项目的webpack build设置也类似. 以SAP成都研究院数字创新 ...
- vue项目搭建及创建、目录结构、项目启动、全局配置
Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...
- day66_10_10,vue项目环境搭建
一.下载. 首先去官网查看网址. 下载vue环境之前需要先下载node,使用应用商城npm下载,可以将其下载源改成cnpm: """ node ~~ python:nod ...
- 如何创建vue项目
Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...
- WijmoJS V2019.0 Update2发布：再度增强 React 和 Vue 框架的组件功能
前端开发工具包 WijmoJS 在2019年的第二个主要版本 V2019.0 Update2 已经发布,本次发布涵盖了React 和 Vue 框架下 WijmoJS 前端组件的功能增强,并加入更为易用 ...
- WijmoJS 以声明方式添加 Vue 菜单项
WijmoJS 以声明方式添加 Vue 菜单项 在V2019.0 Update2 的全新版本中,Vue框架下 WijmoJS 的前端UI组件功能得到再度增强. 如今,向wj菜单组件添加项的方法将不限于 ...
随机推荐
- 1-6 WebAPI基础和演示项目搭建
启动项目的时候 在控制台用dotnet MsgService.dll的方式启动. 在program.cs文件下做如下修改: 实现在控制台 自定义ip和端口,修改之后有将项目重新生成,在控制台启动项目, ...
- 如何停止处于stopping状态的windows服务（使用taskkill）
工作中有时需要启动和停止windows service,有时候会出现服务处于stopping或者starting的状态,但是,在services界面中,start service/stop servi ...
- Scatter matrix（散布矩阵）
n 个 m 维的样本,Xm×n=[x1,x2,-,xn],样本均值定义为: x¯=1n∑i=1nxi 散列矩阵定义为如下的半正定矩阵: S=∑j=1n(xj−x¯)(xj−x¯)T=∑j=1n(xj− ...
- opengl编程指南 第七版 源代码bug Page35 lines.c 红宝书
问题1:根据源代码时,我发现的时候去敲门.不正确实施效果.哪里是不正确?没有源代码glPushAttrib(GL_LINE_STIPPLE) glPopAttrib().所以会出现最后的下一次抽奖提供 ...
- boost库交叉编译（Linux生成ARM的库）
1. 环境: Linux系统:Ubuntu 14.04 编译工具:arm-fsl-linux-gnueabi-gcc 2.下载boost源码: 地址:https://sourceforge.net/p ...
- JS enter代替tab，只有部分键可以代替
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- 图片处理拓展篇 : 图片转字符画(ascii)
首先要明确思路, 图片是由像素组成的, 不同的像素有不同的颜色(rgb), 那么既然我们要转化为字符画, 最直接的办法就是利用字符串来替代像素, 也就是用不同的字符串来代表不同的像素. 另外图片一般来 ...
- 【C#】WixToolset快速入门教程
原文:[C#]WixToolset快速入门教程 介绍 给windows系统做软件,常见的打包工具大家可能都听说过,如:大名鼎鼎的Installshield.Inno setup等.在遇见Wix之前In ...
- Keil5生成bin文件
进入“Options for Target”设置界面如下: 如图所示方框中输入: fromelf.exe --bin -o "$L@L.bin" "#L" 生成 ...
- HTTP协议解析（格式和举例十分清楚）
掌握HTTP虽然不是必须的,但是如果你知道它的工作原理,那么在学习JSP开发中的某些知识就可以易如反掌了. 一,HTTP协议详解之URL篇 http(超文本传输协议)是一个基于请求与响应模式的.无状态 ...