【Vue-01】基础Vue语法+JS复习

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.三种相对路径:'./','../','/'

1. "./" 表示同级目录
2. "../"表示上一层目录
3. "/" 表示根目录

13.计算属性(computed)和监视(watch)

1. 计算属性
   
   在computed属性对象中定义计算属性的方法
   
   在页面中使用{{方法名}}来显示计算的结果

2. 监视属性:
   
   通过vm对象的$watch()或watch配置来监视指定的属性
   
   当属性变化时, 回调函数自动调用, 在函数内部进行计算;
   
   因此需要先赋值,避免出现warning!

3. 计算属性高级:
   
   通过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 自定义事件--只用于子组件向父组件发送消息

1. 绑定事件监听

   • // 方式一: 通过 v-on 绑定,在父组件的子标签中使用 @delete_todo="deleteTodo" 即可
   • // 方式二: 通过\(on()this.\)refs.xxx.$on('delete_todo', function (todo) {this.deleteTodo(todo)})2

2. 触发事件// 触发事件(只能在父组件中接收)

   • 在子组件中(methods)调用: this.$emit(eventName, data)

3. 注意:

     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('请求失败了!')
                })

21.