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

Posted 2021-02-12 好好学习，天天向上

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue-01基础Vue语法+JS复习相关的知识，希望对你有一定的参考价值。

Vue学习疑问及总结_SZS

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) ==绑定事件监听 (订阅消息==)

? 目标: 标签元素