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 ...
随机推荐
- java面向对象1-面向对象概念
面向对象概念-类与对象的关系 封装:指隐藏对象的属性和实现细节,仅对外提供公共访问方式,private-构造方法/构造器-this关键字-static关键字(javadoc制作工具类) -代码块 继承 ...
- day_10猜年龄游戏函数版
''' 1. 在猜年龄的基础上编写登录.注册方法,并且把猜年龄游戏分函数处理,如 2. 登录函数 3. 注册函数 4. 猜年龄函数 5. 选择奖品函数 ''' import json real_age ...
- iOS画线段
CGContextRef context = UIGraphicsGetCurrentContext(); //设置线条类型 CGContextSetLineCap(context, kCGLineC ...
- json 转xml
var jStr = JsonConvert.SerializeObject(new { root = new { li = list } }); var xml = JsonConvert.Dese ...
- SQL基础-order by
若sql语句中order by指定了多个字段,则怎么排序? 举个例子吧:order by id desc,time desc 先是按 id 降序排列 (优先)如果 id 字段 有些是一样的话 再 ...
- zookeeper3.5.5集群部署
ZooKeeper是一个为分布式应用所设计的分布的.开源的协调服务,它主要是用来解决分布式应用中经常遇到的一些数据管理问题,简化分布式应用协调及其管理的难度,提供高性能的分布式服务.ZooKeeper ...
- js控制页面每次滚动一屏,和楼梯效果
我最近在做我们公司官网的改版,产品中心就是每次滚一屏的,我觉得加上楼梯更方便用户浏览,就随便写了个demo, 先来看看结构,都很简单的 <!--楼梯--> <ul class=&qu ...
- mac 的 quickTime Player 设置播放速度
按住 option 点击 下一个视频的图标每次调整幅度为0.1,大于 1.9 声音会消失. 按住 option+J 调慢播放速度 option+L 调快播放速度 每次调整幅度为0.1
- Spring Cloud云服务架构 - commonservice-config配置服务搭建
1. 介绍 Spring Cloud Config为分布式系统中的外部配置提供服务器和客户端支持.使用Config Server,您可以在所有环境中管理应用程序的外部属性.客户端和服务器上的概念映射与 ...
- 实现Callable接口,并与Future结合使用
实现步骤: 创建 Callable 接口的实现类,并实现 call() 方法,该 call() 方法将作为线程执行体,并且有返回值. 创建 Callable 实现类的实例,使用 FutureTask ...