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

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

                })

21.