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 ...
随机推荐
- CodeForces-721B-Passwords
链接: https://vjudge.net/problem/CodeForces-721B 题意: Vanya is managed to enter his favourite site Code ...
- js支持中文的hex编码 bin2hex (utf-8)
背景: 最近对接接口的时候需要将请求参数转为16进制,因此研究了下这个bin2hex.在js中转16进制 使用的是: str.charCodeAt(i).toString(16); 在遇到中文的时候编 ...
- Linux基础教程 linux无密码ssh登录设置
概述 在一些常用设备之间ssh, scp,不用输入密码可以节省不少时间. 生成密钥 先看本地是否有密钥,如果有,则不用生成,否则会影响到以前打通的设备. 复制代码代码如下: 没有则用 ssh-ke ...
- 判断字符串a是否以字符串b开头或结尾
使用字符串的 str.startwith() 和 str.endswith()方法 import os , stat for name in os.listdir('.') if name.endsw ...
- docker-compose部署ELK(亲测)
具体的配置可以参考上面一篇:docker部署ELK 以下是做了一些修改的地方: kibana.yml [root@topcheer config]# cat kibana.yml server.hos ...
- [THUSC2017]杜老师:bitset+线性基
算法一(50pts) 分析 有一个很显然的暴力做法,对于区间内的每个数开个bitset,然后暴力分解质因数.如果对于一个数,它的一个质因子的指数是奇数,那么就把bitset的对应位设成\(1\).答案 ...
- 南京网络赛C
分段打表大法好!!! 打表40min,A题1s https://nanti.jisuanke.com/t/41300 #include<bits/stdc++.h> #define int ...
- 模板引擎ejs的include方法
html无法include header.ejs footer.ejs 最后用 user.ejs在首尾include
- jsp四种属性范围
在JSP提供了四种属性的保存范围.所谓的属性保存范围,指的就是一个设置的对象,可以在多个页面中保存并可以继续使用.它们分别是:page.request.session.appliction. 1.pa ...
- sqlite的系统表sqlite_master
SQLite数据库中一个特殊的名叫 SQLITE_MASTER 上执行一个SELECT查询以获得所有表的索引.每一个 SQLite 数据库都有一个叫 SQLITE_MASTER 的表, 它定义数据 ...