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

发布时间：2023-09-06 02:34责任编辑：顾先生关键词：暂无标签

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

? 目标: 标签元素