Vue学习疑问及总结_SZS
0.vue router 带参数跳转
发送：this.$router.push({path:'/news',query:{id:row.id}})
接收：var id=this.$route.query.id
返回上一步：this.$router.go(-1)
1.变异方法 (重写:重新实现)
Vue包含异族观察数组的变异方法,所以他们将会触发视图更新;这些方法如下:
push()/pop()/shift()/unshift()/splice()/sort()/reverse()
2.splice 进行删除.增加和替换
methods:{
deleteP(index){
//删除persons中指定的index的p
this.persons.splice(index,1)
},
updateP(index,newP){
// this.persons[index] = newP
//并没有改变person本身,数组内部发生了变化,但并没有调用变异方法,此时vue不进行界面的更新!
//如下操作,则是进行替换,splice是变异方法
this.persons.splice(index,1,newP)
}
}
3.任意input表单默认值
使用v-model绑定后,在Vue的data中设置初值即可!
data:{
username:'admin',
pwd:'123457',
sex:'女',//进行默认勾选value=女的选项
fonts:['football'],
allCitys:[{id:1,name:'北京'},{id:2,name:'南京'},{id:3,name:'福建'}]
}
4.$event :默认的隐藏属性对象
下面两种写法一致:
<button type="button" @click="test3($event)">test3</button>
<button type="button" @click="test3">test3</button>
5.事件修饰符
.prevent : 阻止事件的默认行为,如何链接标签将不再发生跳转动作; event.preventDefault()
.stop : 停止事件冒泡(阻止单击事件继续传播,单击后续触发的效果停止) event.stopPropagation()
6.按键修饰符 (@click.enter)
.keycode : 操作的是某个keycode值的健
.enter : 操作的是enter键触发相应test8函数(.13同理,下面是keyup的等价写法)
<input type="text" @keyup="test8" />
test8(event){
if(event.keyCode==13)alert('按下enter键,context:'+event.target.value+'--keycode:'+event.keyCode)
}
.once : 只被触发一次
7.数组排序
fPersons是一个数组,function(p1,p2){...}为自动生成;
fPersons.sort(function(p1,p2){
//如果返回负数,p1在前面;如果返回正数,p2在前面;
//1升序,2降序
if(orderType==2){
return p2.age-p1.age
}else{
return p1.age-p2.age
}
return p2.age-p1.age;
})
8. ()=> 函数和function()函数的区别
mounted() {//初始化之后进行立即调用 , => 函数初始化时可以从外部调用内容,function()不可以
setInterval(() => {
this.isShow =!this.isShow
},1000)
// setInterval((function (){
// this.isShow =!this.isShow
// },1000)
},
9.时间处理库 mement.js 网站搜索也可
format || 'YYYY-MM-DD HH:mm:ss' 解决传入空值的情况
//自定义过滤器 ,函数对象
Vue.filter('dateString',function(value,format='YYYY-MM-DD HH:mm:ss'){
return moment(value).format(format);
// return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss');
})
10.Vue静态组件
按照三步进行, 引入组件, 映射到标签,使用组件标签
<template>
<div>
<div class="container">
<Add :addComment="addComment"/>
<List :comments="comments" :deleteComment="deleteComment"/>
</div>
</div>
</template>
// 按照三步进行,导入,映射到组件里,添加标签
<script>
import Add from './components/Add.vue'
import List from './components/List.vue'
export default {
components: {
Add, List
}
}
</script>
11.props 组件(仅父子)间通信
指定接受的属性名和属性值的类型**
<script>
export default {
// props: ['comment'] -->这种写法只制定了属性名,接受的内容
props: { // 指定接受的属性名和属性值的类型
comment: Object,
deleteComment: Function,
index: Number
},
方式三: 指定名称/类型/必要性/默认值
props: {
name: {type: String, required: true, default:xxx}, }
注意
1)此方式用于父组件向子组件传递数据
2) 所有标签属性都会成为组件对象的属性, 模板页面可以直接引用
3) 问题:a. 如果需要向非子后代传递数据必须多层逐层传递b 兄弟组件间也不能直接 props 通信, 必须借助父组件
12.三种相对路径:'./','../','/'
- "./" 表示同级目录
- "../"表示上一层目录
- "/" 表示根目录
13.计算属性(computed)和监视(watch)
-
计算属性
在computed属性对象中定义计算属性的方法
在页面中使用{{方法名}}来显示计算的结果 -
监视属性:
通过vm对象的$watch()或watch配置来监视指定的属性
当属性变化时, 回调函数自动调用, 在函数内部进行计算;
因此需要先赋值,避免出现warning! -
计算属性高级:
通过getter/setter实现对属性数据的显示和监视
计算属性存在缓存(对象), 多次读取只执行一次getter计算<script> computed:{ //初始化的时候就进行显示,相关的data属性发生改变的时候;就会执行计算属性 fullName1(){ //声明计算属性中的一个方法,方法的返回值作为属性值 // console.log('fullName1()',this) return this.firstName+'-'+this.lastName; }, fullName3:{ //回调函数: 1.你定义的,2.你没有调用;3.但最终它执行了 get(){ //回调函数,读取当前属性值时进行回调,计算并返回当前属性的值 return this.firstName+'-'+this.lastName; }, //set回调函数,监视当前属性值的变化;当属性值发生变化的时候进行回调,更新相关的属性数据 set(value){ //value就是fullName3的最新属性值; const names=value.split('-') this.firstName=names[0] this.lastName=name1[0] } } }, watch:{//配置监视 firstName:function(){ //监视的firstName发生变化时,执行下面的函数 // console.log(this) //就是vm对象 this.fullName2=this.firstName+'--'+this.lastName } } }) // vm.$watch 来监视lastName // vm.$watch('lastName',function(newvalue){ // //更新fullName3 // this.fullName3=this.firstName+'---'+this.lastName // })
14.从localStorage中读取存储的离线文件信息
data
<script>
data () {
return {
// 从localStorage中读取todos
// parse解析字符串函数,将string转换成对象! 添加'[...]'防止null空值!
todos: JSON.parse(window.localStorage.getItem('todos_key') || "[{title: '睡觉', complete: false},{title: '打豆豆', complete: false},{title: 'Coding', complete: true}]")
// 深度进行监视todos的任何改变,就进行存取
// todos: [
// {title: '吃饭', complete: false},
// {title: '睡觉', complete: false},
// {title: '打豆豆', complete: false},
// {title: 'Coding', complete: true}
// ]
}
},
监视信息
<script>
watch: {// 深度监视
todos: {
deep: true,// 深度监视
handler: function(newValue){
//将todos最新的值(json数据),先转换成String保存到localStorage
window.localStorage.setItem('todos_key',JSON.stringify(newValue))
}
}
}
15.组件间通信方式2: vue 自定义事件--只用于子组件向父组件发送消息
-
绑定事件监听
- // 方式一: 通过 v-on 绑定,在父组件的子标签中使用 @delete_todo="deleteTodo" 即可
- // 方式二: 通过(on()this.)refs.xxx.$on('delete_todo', function (todo) {this.deleteTodo(todo)})2
-
触发事件// 触发事件(只能在父组件中接收)
- 在子组件中(methods)调用: this.$emit(eventName, data)
-
注意:
1) 此方式只用于子组件向父组件发送消息(数据) 2) 问题: 隔代组件或兄弟组件间通信此种方式不
16.组件间通信 3: 消息订阅与发布(PubSubJS 库)--可实现任意关系组件间通信(数据)
2.8.1. 订阅(接受)消息 接收方
import PubSub from 'pubsub-js'
PubSub.subscribe('msg', function(msg, data){})
....
<script>
mounted () {// 执行异步代码
//订阅消息 ,改为 => 函数(才可以调用本函数范围外的deleteTodo函数) //msg不能省略!!多余的!
PubSub.subscribe('deleteTodo', (msg, index) => {
this.deleteTodo(index)
})
}
2.8.2. 发布消息 发送方
import PubSub from 'pubsub-js'
PubSub.publish('msg', data)
...
<script>
deleteItem () {
const {todo,index,deleteTodo} = this
const nowtitle=todo.title
if(window.confirm('确认删除'+nowtitle+' 吗?')){
// this.deleteTodo(index)
PubSub.publish('deleteTodo', index)
}
}
2.8.3. 注意1)
优点: 此方式可实现任意关系组件间通信(数据)
2.8.4. 事件的 2 个重要操作(总结)
1) 绑定事件监听 (订阅消息)
目标: 标签元素 button
事件名(类型): click/focus
回调函数: function(event){}
2) 触发事件 (发布消息)
DOM 事件: 用户在浏览器上对应的界面上做对应的操作自定义: 编码手动
17.组件间通信 4: slot [插槽,si-lao-te]
2.9.1. 理解
此方式用于父组件向子组件传递标签数据 (即在子组件中仅预留好slot标签体,在父组件中保留数据供子组件调用)
2.9.2. 子组件: Child.vue [只需要书写slot +name 标签调用即可! 不需要调用的,自行书写]
<template>
<div class="todo-footer">
<!-- <input type="checkbox" v-model="isAllCheck"/> -->
<slot name="AllCheck"></slot>
<!-- <span>已完成{{completeSize}} / 全部{{todos.length}}</span> -->
<span> <slot name="count"></slot> </span>
<!-- <button class="btn btn-danger" v-show="completeSize>0"
@click="deleteCompleteTodos">清除已完成任务</button> -->
<slot name="delete"></slot>
</div>
</template>
2.9.3. 父组件: Parent.vue [在script中完善每个标签体/slot的对应的方法等功能]
<template>
<todo-footer>
<input type="checkbox" v-model="isAllCheck" slot="AllCheck"/>
<span slot="count">已完成{{completeSize}} / 全部{{todos.length}}</span>
<button class="btn btn-danger" v-show="completeSize>0"
@click="deleteCompleteTodos" slot="delete">清除已完成任务</button>
</todo-footer>
</template>
18. 封装一个工具JS对象: src/util/StorageUtil.js
/*
src/util/StorageUtil.js
使用localStorage存储数据的工具模块
1. 函数
2. 对象
需要向外暴露1个功能,还是多个功能 : 两个方面
*/
// export default {} 向外暴露一个对象!
export default {
saveTodos (newValue){
//将todos最新的值(json数据),先转换成String保存到localStorage
window.localStorage.setItem('todos_key',JSON.stringify(newValue))
},
readTodos () {
// 从localStorage中读取todos
// parse解析字符串函数,将string转换成对象! 添加'[...]'防止null空值!
return JSON.parse(window.localStorage.getItem('todos_key') || '[]')
}
}
调用方法
<script>
import storageUtil from './util/storageUtil'
data () {
return {
// 从localStorage中读取todos
// parse解析字符串函数,将string转换成对象! 添加'[...]'防止null空值!
// todos: JSON.parse(window.localStorage.getItem('todos_key') || '[]')
todos: storageUtil.readTodos()
....
watch: {// 深度监视
todos: {
deep: true,// 深度监视
/* handler: function(newValue){
//将todos最新的值(json数据),先转换成String保存到localStorage
// window.localStorage.setItem('todos_key',JSON.stringify(newValue))
storageUtil.saveTodos(newValue)
}, */
handler: storageUtil.saveTodos, //14K的写法水平
}
},
19.使用VueResource 发ajax 请求获取数据
在线文档 https://github.com/pagekit/vue-resource/blob/develop/docs/http.md
下载 npm install vue-resource --save
可在main.js中进行声明,步骤
// 引入模块 import VueResource from 'vue-resource'
// 使用插件 Vue.use(VueResource)
编码
mounted () {
//使用VueResource 发ajax 请求获取数据,在生命周期的初期就开始执行
const url='https://api.github.com/search/repositories?q=vu&sort=start'
this.$http.get(url).then(
response => {
//成功了
const result = response.data
//得到第一个最受欢迎的repo
const mostRepo =result.items[0]
this.repoUrl = mostRepo.html_url
this.repoName = mostRepo.name
},
response => {
//失败了
alert('请求失败了!')
}
)
20.使用axios发ajax 请求获取数据
在线文档
https://github.com/pagekit/vue-resource/blob/develop/docs/http.md
下载:
npm install axios --save
编码
// 在script中引入模块 import axios from 'axios
//使用axios 发ajax 请求获取数据
axios.get(url).then(
response => {
//成功了
const result = response.data
//得到第一个最受欢迎的repo
const mostRepo =result.items[0]
this.repoUrl = mostRepo.html_url
this.repoName = mostRepo.name
}).catch(error =>{
//失败了
alert('请求失败了!')
})