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 ...
随机推荐
- Linux网络性能优化方法简析
Linux网络性能优化方法简析 2010-12-20 10:56 赵军 IBMDW 字号:T | T 性能问题永远是永恒的主题之一,而Linux在网络性能方面的优势则显而易见,这篇文章是对于Linux ...
- percona-xtrabackup-8.0.7简单快捷使用
percona-xtrabackup-8.0.7简单快捷使用 # 参考资料: https://blog.csdn.net/vkingnew/article/details/83012316 # 环境: ...
- js-点击tab按钮,同一页面显示不同的内容
效果: html: JS: css: .tabs-two{ .two{ display: inline-block; font-size:14px; height: 17px; font-weight ...
- java中System类
System作为系统类,在JDK的java.lang包中,可见它也是一种java的核心语言特性.System类的构造器由private修饰,不允许被实例化.因此,类中的方法也都是static修饰的静态 ...
- logstash之OutPut插件
output插件是经过了input,然后过滤结构化数据之后,接下来我们需要借助output传到我们想传到的地方.output相当于一个输出管道. 2.3.1: 将采集数据标准输出到控制台 配置示例: ...
- CVE-2019-0708
本机IP 192.168.1.100 靶机IP 1:windows2003sever :192.168.1.101 确认3389端口开启 0x01测试windowsxp 切到目录 目标机器确实存在 ...
- 白鹭http请求post
示例demo: //new http请求 var request = new egret.HttpRequest(); //请求参数 var params = "p1=postP1& ...
- spring security跳过认证
在启动springboot的时候,给启动注解后添加这个exclude参数后接想要跳过的类就不会加载它了. @SpringBootApplication(exclude = { org.springfr ...
- 微信小程序 API 界面 (2)
由于每个 API 参数:对象的属性都有 success,fail,complete,所以在这个提前介绍,就不再每个API 上写了 success:类型 函数 接口调用成功的回调函数 fail:类型 函 ...
- Python 写 ACM 题目的一些技巧
目录 输入输出 input() 输入 split() 用于输入 strip() 输入清理 print() 输入 sort 排序 输入输出 input() 输入 Python3 中 input() 函数 ...