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注意项的更多相关文章

  1. vue开发项目的坑

    [Vue warn]: Do not use built-in or reserved HTML elements as component id: MenuItem [Vue warn]: Do n ...

  2. 构建大型 Vue.js 项目的10条建议

    下面是我在开发大型 Vue 项目时的最佳实践.这些技巧将帮助你开发更高效.更易于维护和共享的代码. 今年做自由职业的时候,我有机会开发了一些大型 Vue 应用程序.我所说的这些项目,Vuex stor ...

  3. vue cli 3

    介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...

  4. ABAP system landscape和vue项目webpack构建的最佳实践

    基于Netweaver的ABAP transport route一般都有dev,test和prod三种类型的系统. 而Vue前端项目的webpack build设置也类似. 以SAP成都研究院数字创新 ...

  5. vue项目搭建及创建、目录结构、项目启动、全局配置

    Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...

  6. day66_10_10,vue项目环境搭建

    一.下载. 首先去官网查看网址. 下载vue环境之前需要先下载node,使用应用商城npm下载,可以将其下载源改成cnpm: """ node ~~ python:nod ...

  7. 如何创建vue项目

    Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...

  8. WijmoJS V2019.0 Update2发布:再度增强 React 和 Vue 框架的组件功能

    前端开发工具包 WijmoJS 在2019年的第二个主要版本 V2019.0 Update2 已经发布,本次发布涵盖了React 和 Vue 框架下 WijmoJS 前端组件的功能增强,并加入更为易用 ...

  9. WijmoJS 以声明方式添加 Vue 菜单项

    WijmoJS 以声明方式添加 Vue 菜单项 在V2019.0 Update2 的全新版本中,Vue框架下 WijmoJS 的前端UI组件功能得到再度增强. 如今,向wj菜单组件添加项的方法将不限于 ...

随机推荐

  1. WPF中制作带中国农历的万年历

    原文:WPF中制作带中国农历的万年历 本例应用.net 2.0中的ChineseLunisolarCalendar类,制作出带中国农历的万年历.  先看看效果图片(已缩小,原始图片为:http://p ...

  2. Leetcode 226 Invert Binary Tree 二叉树

    交换左右叶子节点 /** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode *left; * ...

  3. wpf之自定义滚动条

    原文:wpf之自定义滚动条 首先我们添加一个带滚动条的textbox控件: <ScrollViewer Height="130" Width="620" ...

  4. ASP.NET Core Razor 布局视图 - ASP.NET Core 基础教程 - 简单教程,简单编程

    原文:ASP.NET Core Razor 布局视图 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core Razor 布局视图 上一章节中我们学习了如何使用 EF ...

  5. C#WPF 如何绘制几何图形 图示教程 绘制sin曲线 正弦 绘制2D坐标系 有图有代码

    原文:C#WPF 如何绘制几何图形 图示教程 绘制sin曲线 正弦 绘制2D坐标系 有图有代码 C#WPF 如何绘制几何图形? 怎么绘制坐标系?绘制sin曲线(正弦曲线)? 这离不开Path(Syst ...

  6. Android - 小的特点 - 使用最新版本ShareSDK手册分享(分享自己定义的接口)

    前太实用Share SDK很快分享,但官员demo快捷共享接口已被设置死,该公司的产品还设计了自己的份额接口,这需要我手动共享. 读了一堆公文,最终写出来,行,废话,进入主题. 之前没实用过Share ...

  7. Jmeter 专题

    Jmeter是一个非常好用的压力测试工具.  Jmeter用来做轻量级的压力测试,非常合适,只需要十几分钟,就能把压力测试需要的脚本写好. 为什么要建立线程组?原因很简单,因为我们要模拟多个线程(用户 ...

  8. hibernate关于多对多注解配置

    Game实体类配置关系 @Entity @Table(name = "game") public class Game { @Id @GeneratedValue private ...

  9. linuxC动态内存泄漏追踪方法

    C里面没有垃圾回收机制,有时候你申请了动态内存却忘记释放,这就尴尬了(你的程序扮演了强盗角色,有借有还才是好孩子).当你想找出内存泄露的地方时,有的投入海量的代码中,头痛不已.还好GNU C库提供了些 ...

  10. SyncML是一平台无关的信息同步标准协议集

    SyncML (Synchronization Markup Language)是一平台无关的信息同步标准协议集.分为SyncML数据传输协议(SyncML-DS)和SyncML设备管理协议(Sync ...