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 ...
随机推荐
- 使用 python 开发 Web Service
使用 python 开发 Web Service Python 是一种强大的面向对象脚本语言,用 python 开发应用程序往往十分快捷,非常适用于开发时间要求苛刻的原型产品.使用 python 开发 ...
- java数据结构--array与ArrayList的区别
ArrayList 内部是由一个array 实现的. 如果你知道array 和 ArrayList 的相似点和不同点,就可以选择什么时候用array 或者使用ArrayList , array 提供 ...
- 算法复习-a 到 z不完全排列生成
在网上看到这个题,觉得很有意思,也算是一种方法...但是复杂度同样很高,生成全排列本身需要很大复杂度. 题目:现在有 a 到 z 26 个元素, 编写程序打印 a 到 z 中任取 3 个元素的组合(比 ...
- caffe 安装
安装caffe 拉取镜像 nvidia/cuda:9.0-cudnn7-devel-centos7 1,换源 安装https://blog.csdn.net/tuomen5867/article/de ...
- C# 自定义类中括号取值 测试
public class ABC : Hashtable{} static class Program { public static ABC a= new ABC(); static void Ma ...
- docker安装xxl-job
一 安装mysql root@localhost tmp]# docker run -itd --name xxl-mysql -p 3306:3306 -e MYSQL_ROOT_PASSWORD= ...
- 解决vuex保存的数据刷新页面时清空
参考文章: vuex中store保存的数据,刷新页面会清空 主要解决代码: 1.更改store文件下index文件state的定义 const store = new Vuex.Store({ sta ...
- Java并发编程的艺术笔记(二)——wait/notify机制
一.概述 一个线程修改了一个对象的值,另一个线程感知到变化从而做出相应的操作.前者是生产者,后者是消费者. 等待/通知机制,是指一个线程A调用了对象O的wait()方法进入等待状态,而另一个线程B调用 ...
- iterator删除元素
总结 在需要的删除等操作时,不能使用简单的foreach,因为其底层依然用的是Iterator,但是调用的是集合中的remove方法. 使用迭代器对象调用其中的remove方法,以保证线程同步.
- Mysql锁表问题解决过程
开发中难免会遇到数据库操作锁表问题,这里说下解决过程,算是记录了. show OPEN TABLES where In_use > 0; 查看哪些表被锁了 show processlist 查看 ...