vue使用笔记二
es6\es2015特性
http://lib.csdn.net/article/reactnative/58021?knId=1405
使用express-generator初始化你的项目目录
https://www.cnblogs.com/zjhr/p/5227042.html
1.Vue 基本属性与生命周期
https://www.jianshu.com/p/0ae4b5b8b012
var vm = new Vue({
name:'root',
el:"#app",
// 数据
data: { a: 1 } / Function, // data类型根实例为Object,组件中为Function
props:[]/{}, // 设置父组件传递给子组件的数据限制
computed:{}, // 计算属性
watch:{}, // 监控属性
methods:{}, // 事件操作
// 资源
directives:{}, // 内部指令
filters:{}, // 内部过滤器
components:{}, // 内部组件
// 生命周期:实例创建 => 编译挂载 => 组件更新 => 销毁
beforeCreate(){
console.log('beforeCreate ==> 实例创建')
},
created(){
// 可以操作data, 但未生成DOM(未挂载)发起异步请求,初始化组件状态数据 data
console.log('created ==> 实例创建完成,属性已绑定')
},
beforeMount(){
console.log('beforeMount ==> 模板编译/挂载之前')
},
mounted(){
// 已生成DOM到document中,可访问this.$el属性
console.log('mounted ==> 模板编译/挂载之后')
},
beforeUpdate(){
console.log('beforeUpdate ==> 组件更新之前')
},
updated(){
// 操作DOM $('#box1')
console.log('updated ==> 组件更新之后')
},
activated(){
// 操作DOM $('#box1')
console.log('activated ==> 组件被激活时(for keep-alive组件)')
},
deactivated(){
console.log('deactivated ==> 组件被移除时(for keep-alive组件)')
},
beforeDestroy(){
// 解除事件绑定,销毁非Vue组件实例等 如:this.$off('event1') select2.destory()
console.log('beforeDestroy ==> 组件销毁之前')
},
destroyed(){
console.log('destroyed ==> 组件销毁之后')
}
})
2.vue中 data与props区别
https://blog.csdn.net/xukongjing1/article/details/82457585
子组件中的data数据,不是通过父组件传递的是子组件私有的,是可读可写的。
子组件中的所有 props中的数据,都是通过父组件传递给子组件的,是只读的。
3.Vue中 如何才能不使用{{msg}} 来显示信息
4.vue 中 组件必须写<component></component> 要有开始和结尾
5.vue 中data 要使用return 返回一个对像
6.props中 使用的是属性值对应的是个json对像 如:属性值:{默认值,类型}
V-bind:text 或者{{}}
7.组件名称建议定义成两个单词,防止有些标签与h5标签重复,如 content组件是h5自有标签
8.vue使用路由
import Router from 'vue-router'
9.路由分到多个文件管理
https://blog.csdn.net/FungLeo/article/details/81014184
路由监测
https://blog.csdn.net/qq_25186543/article/details/80008671
10.vuex使用
mapState与mapGetter区别
https://segmentfault.com/q/1010000015849766
通常是在store中 另外写getter来获取state中的某个值,而后在vue组件中利用mapGetter来给组件赋值
在vuex里的action中改变路由是不太合理的。因为vuex只是状态管理。
但是真的可以在action里改变路由 可以把路由当作参数传递到action里去
action里的context 包括以下属性
mutation的第一个参数必然是state
计算属性映射到store里的getter对像中
:是自定义属性赋值
只单向是v-html 和v-text
v-model是双向绑定只能用于input
vue使用笔记二的更多相关文章
- vue学习笔记(二)vue的生命周期和钩子函数
前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...
- Vue学习笔记二:v-cloak,v-text,v-html的使用
目录 v-cloak:解决插值表达式闪烁问题 安装插件Live Server 右键以HTTP形式运行HTML v-text:以属性方式使用插值表达式 v-cloak和v-text的区别 v-html: ...
- VUE 学习笔记 二 生命周期
1.除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来 var data = { a: 1 } var vm = new Vue({ el: ' ...
- VUE学习笔记二
package.json不可以写注释!!!!!!!!!!初始化:npm init -y 有时候使用 npm i node-sass -D 装不上,这时候,就必须使用 cnpm i node-sass ...
- vue学习笔记二:v-if和v-show的区别
v-if vs v-show v-if 是“真正的”条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建. v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做—— ...
- vue 自学笔记记录
vue 自学笔记(一): 知识内容: 安装vue ,创建vue实例,安装第一个组件,单项数据流 https://www.cnblogs.com/baili-luoyun/p/10763163.htm ...
- vue学习笔记(三)class和style绑定
前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...
- Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发
===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...
- vue 学习笔记(二)
最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...
随机推荐
- Pythoy修炼之路
路漫漫其修远兮,吾将上下而求索... 编程语言众多,徘徊在C.C#.Java.PHP等十字路口,看到哪个领域大牛的成功,便想打开那扇窗,反反复复,犹豫不决,终无所获. 个人认为选择一门语言,要根据自身 ...
- 一个C语言外挂程序
首先建立一个控制台应用程序 引入Windows.h库函数 MessageBoxA(句柄--通常是0,提示框内容,提示框标题,按钮) #include <Windows.h> int mai ...
- java获取访问者真实的IP地址
众所周知java方法request.getremoteaddr()可以获得访问者的IP地址 但是在通过了Apache,Squid等反向代理软件就不能获取到客户端的真实IP地址了.如果使用了反向代理软件 ...
- 安装twisted遇到的坑
在使用twisted框架的时候,我们需要知道他是干什么的? twisted支持很多种协议,包括传输层的TCP, UDP, TLS和引用层的HTTP和FTP等. twisted框架其主要发行版本是以p ...
- 《Spring源码深度解析》二
第二章:容器的基本实现 2.1 基本用法 首先定义一个Bean:(假设在bean包下) 然后定义配置文件: 测试类: 当然,这并非是企业级用法,此处只是用来分析学习其实现 2.2 功能分析 上述三图代 ...
- js-头部的下拉框出现与隐藏,注意加上stop??
效果: 主要代码:
- Linux基础教程 linux中使用find命令搜索文件常用方法记录
find是linux非常强大的搜索命令,通过man find查看find手册,可以发现find的说明一屏接一屏,估计要看完也得花不少时间.兄弟连Linux培训 小编总结了下,整理出find常用的使用方 ...
- 【学习小记】Berlekamp-Massey算法
Preface BM算法是用来求一个数列的最短线性递推式的. 形式化的,BM算法能够对于长度为n的有穷数列或者已知其满足线性递推的无穷数列\(a\),找到最短的长度为m的有穷数列\(c\),满足对于所 ...
- MariaDB(Mysql)-主从搭建
卸载过程: 停止服务:systemctl stop mariadb 查询安装包:rpm -qa | grep mariadb 卸载: rpm -e mariadb-server rpm -e mari ...
- MapReduce数据倾斜的解决方式
数据倾斜:由于数据分布不均匀,造成数据大量的集中到一点,造成数据热点.map /reduce程序执行时,reduce节点大部分执行完毕,但是有一个或者几个reduce节点运行很慢,导致整个程序的处理时 ...