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

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

? 目标: 标签元素

? 事件名(类型): 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.

原文地址：https://www.cnblogs.com/zhazhaacmer/p/10476936.html

时间： 2024-08-03 04:36:21

【Vue-01】基础Vue语法+JS复习的相关文章

vue框架：框架简介，基础实例成员，基础指令，js对象方法补充

1.指令 2.实例成员 3.组件 4.项目开发 1)定义:JavaScript渐进式框架 ? 渐进式:可以控制一个页面的一个标签,也可以控制一系列的标签,也可以控制整个页面,甚至可以控制整个前台项目 2)优势: ? 有指令(分支结构,循环结构...) 复用页面结构等 ? 有实例成员(过滤器,监听), 可以对渲染的数据进行二次格式化 ? 有组件(模板的复用或组合),快速搭建页面 ? ? 虚拟dom:所有文件加载到内存中 ? 数据的双向绑定 ? 单页面应用 ? 数据驱动 3)为什么学习vue: ?

Vue框架基础

Vue框架基础 1.什么是vue框架 渐进式的JavaScript框架 渐进式:可以控制一个页面的标签,也可以控制一系列标签,也可以控制整个页面,甚至可以控制整个前端项目 2.vue有什么优势 通俗来讲: 有指令(分支结构,循环结构...),复用页面结构等 有实例成员(过滤器,监听),可以对渲染的数据做二次格式化 有组件(模块的复用与组合),快速搭建页面 官方说法: 虚拟DOM,直接加载的到内存中,加载速度更快 数据的双向绑定 单页面应用 数据驱动 3.为什么要学vue 前端框架主要有三种:An

【01】Vue 之hello wolrd

1.1. Vue简介 Vue是一个前端的双向绑定类的框架,发音[读音 /vju?/, 类似于 view].新的Vue版本参考了React的部分设计,当然也有自己独特的地方,比如Vue的单文件组件开发方式都很有创新,另外Vue自身的一些绑定的语法.用法等都非常精炼,很容易上手,而且第三方的插件都非常丰富,社区非常活跃,最新的文档都有中文版本.而且Vue配合官方的和第三方的库可以实现单文件的组件化开发.SPA等现代化前端开发. 1.2. Vue的入门demo Vue 可以直接把它当做一个js库使用,

Vue组件基础用法

前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需,使用不同的组件来拼接页面.这种开发模式使前端页面易于扩展,且灵活性高,而且组件之间也实现了解耦.本文将详细介绍Vue组件基础用法 概述 组件是一个自定义元素或称为一个模块,包括所需的模板.逻辑和样式.在HTML模板中,组件以一个自定义标签的形式存在,起到占位符的功能.通过Vue.js的声明式渲染后,

Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法

添加新建.vue文件功能 ①Webstorm 右上角File-Plugins 搜索vue如果没有就去下载 点击serch in repositories ②点击安装vue.js ③安装成功后点击右下角Apply 提示重启webstorm 重启完成后 Setting-Editor-File and Code Templates 点击右上角的加号 添加vue文件 Name为vue File, Extension 为vue,下面的位置可以填写自定义的初始化模板内容 ④点击OK 返回,在项目中新建会出现

Vue入门--基础部分

一.初识Vue 使用双大括号{{message}}将数据渲染进DOM中. 可以使用app.message对渲染后的数据进行修改. Vue常用的指令: 1)v-bind 用来绑定常用属性 主要用法:直接在html标签上添加v-bind:属性名="vue实例中的message" 2)v-if  条件 主要用法:直接在html标签上添加v-if="vue实例中的某个属性名",这个属性对应的属性值应该是布尔值 3)v-for  可以绑定数组的数据来渲染一个列表 主要用法:实

前端工程化基础-vue

由浅入深支持更多功能 1.安装最新版本的node.js和NPM,并了解NPM基本用法. 2.创建一个目录demo.使用npm 初始化配置: npm init  ,执行后会有一系列选项,可按回车快速确认,在demo中生成一个package.json文件. 3.局部安装webpack  :  npm install webpack --save-dev --save-dev 会作为开发依赖来安装webpack.安装成功后,在package.json中会多一项配置 "devDependencies&q

vue+typescript基础练习

环境 win10 node -v 8.9.3 vue-cli 3.4 typescript 3.1.5 编辑器 vscode 目标 使用vuecli工具,建立一个项目,使用typescript.并实现基本的路由,组件等功能 步骤 一.建项目 官网文档https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create 安装必要的环境,然后使用管理员身份打开CMD输入vue ui: 这个是vuecli的图形化界面,使用它建立比较方便,命

javascript基础入门之js中的数据类型与数据转换01

javascript基础入门之js中的数据结构与数据转换01 js的组成(ECMAScript.BOM.DOM)        js中的打印语句:        数据类型        变量        运算符        数据类型转换        js中三大特殊值 js的组成(ECMAScript.BOM.DOM) ①ECMAScript: ECMAScript是一个标准,它规定了语法.类型.语句.关键字.保留子.操作符.对象.(相当于法律):②BOM(浏览器对象模型):对浏览器窗口进行