vue基础

最新推荐文章于 2023-05-17 19:46:30 发布
最新推荐文章于 2023-05-17 19:46:30 发布
阅读量70 收藏 1
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42232876/article/details/115030701
版权

vue介绍

  • 什么是vue

    • vue是一个前端开发框架，用于降低UI复杂度

  • vue的特点

    • 渐进性
    • 响应性
    • 组件化

环境配置

  • node.js

    官网
https://nodejs.org/zh-cn/
检查是否安装成功
node --version

  • 配置淘宝镜像

    npm包的服务器在国外，下载速度会很慢，配置淘宝镜像（国内）

    终端中输入
npm config set registry https://registry.npm.taobao.org
检查是否配置成功
npm config get registry

  • vue cli （vue脚手架构建vue项目）

    终端中输入
npm install -g @vue/cli
检查是否安装成功
vue --version

vue脚手架(vue cli)构建vue项目

  • 命令行方式

    vue create myapp

  • 图形化界面

    vue ui

下载与卸载依赖

  • 下载

    npm init
npm i 包名
例如
npm i element-ui
npm i axios

  • 卸载

    npm uninstall 包名

插值表达式

  • {{表达式}}

    • 变量{{msg}}

    • 字符串{{‘测试’}}

    • 三元表达式{{true ? ‘测试1’ : ‘测试2’}}

      <template>
  <div>
    <h2>{{msg}}</h2>
    <h2>{{'测试'}}</h2>
    <h2>{{true ? '测试1' : '测试2'}}</h2>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: '测试'
    }
  }
}
</script>

<style scoped lang='less'>
</style>

常用的指令

  • v-text

  • v-html

    <template>
  <div>
    <h2 v-text="msg1"></h2>
    <div v-html="msg2"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg1: 'v-text相当于innerText',
      msg2: '<h2>v-html相当于innerHTML</h2>'
    }
  }
}
</script>

<style scoped lang='less'>
</style>

  • v-if、v-else-if、v-else

    <template>
  <div>
    <h2 v-if="item===1">测试1</h2>
    <h2 v-else-if="item===2">测试2</h2>
    <h2 v-else>测试</h2>
    <hr />
    <div class="box" v-if="isShow" style="background:red;"></div>
    <div class="box" v-else style="background:green;"></div>
    <button @click="isShow=!isShow">切换</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      item: 1,
      isShow: true
    }
  }
}
</script>

<style scoped lang='less'>
.box {
  width: 200px;
  height: 200px;
}
</style>

  • v-show

    <template>
  <div>
    <div class="box" v-show="isShow"></div>
    <button @click="isShow=!isShow">{{isShow ? '隐藏' : '显示'}}</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isShow: true
    }
  }
}
</script>

<style scoped lang='less'>
.box {
  width: 200px;
  height: 200px;
  background: pink;
}
</style>

  • v-bind:class 简写 :class 动态绑定属性

    <template>
  <div>
    <!-- 动态绑定class--对象形式 -->
    <div :class="classObj"></div>
    <button @click="handle()">切换</button>
    <!-- 动态绑定class--数组形式 -->
    <div :class="classArr"></div>
    <hr />
    <!-- 动态绑定style--对象形式 -->
    <div :style="styleObj"></div>
    <!-- 动态绑定style--数组形式 -->
    <div :style="[styleArr1,styleArr2]"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      classObj: {
        red: true,
        green: false
      },
      classArr: ['demo1', 'demo2'],
      styleObj: {
        width: '200px',
        height: '200px',
        background: 'pink'
      },
      styleArr1: {
        width: '200px',
        height: '200px'
      },
      styleArr2: {
        background: 'deeppink'
      }
    }
  },
  methods: {
    handle () {
      for (let item in this.classObj) {
        this.classObj[item] = !this.classObj[item]
      }
    }
  }
}
</script>

<style scoped lang='less'>
.red {
  width: 200px;
  height: 200px;
  background-color: red;
}
.green {
  width: 200px;
  height: 200px;
  background-color: green;
}
.demo1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
.demo2 {
  background-color: orange;
}
.demo2:hover {
  transform: scale(1.5);
}
</style>

  • v-on:click 简写 @click 事件处理

    <template>
  <div>
    <div class="box" v-show="isShow"></div>
    <button @click="handle()">{{isShow ? '隐藏' : '显示'}}</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isShow: true
    }
  },
  methods: {
    handle () {
      this.isShow = !this.isShow
    }
  }
}
</script>

<style scoped lang='less'>
.box {
  width: 300px;
  height: 300px;
  background-color: pink;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
</style>

  • v-model

    双向数据绑定，相当于绑定了input的value值，注册了input事件
<input type="text" v-model="msg">
<input type="text" :value="msg" @input="msg=$event.target.value" />

  • v-for

    <template>
  <div>
    <ul>
      <li v-for="item in arr" :key="item.id">
        <h3>{{item.title}}</h3>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      arr: [
        {
          id: 0,
          title: 'SACASCASCASCASCSASA'
        },
        {
          id: 1,
          title: 'SACASCASCASCASCSASA'
        },
        {
          id: 2,
          title: 'SACASCASCASCASCSASA'
        },
        {
          id: 3,
          title: 'SACASCASCASCASCSASA'
        },
        {
          id: 4,
          title: 'SACASCASCASCASCSASA'
        }
      ]
    }
  }
}
</script>

<style scoped lang='less'>
ul {
  list-style: none;
  li {
    width: 300px;
    border: 1px solid #ccc;
  }
}
</style>

事件修饰符

  • .stop

    <!-- 阻止事件冒泡或捕获 -->
<a @click.stop="handle()"></a>
相当于event.stopPropagation()

  • .prevent

    <!-- 阻止默认事件的执行，如a标签的默认跳转事件 -->
<a @click.prevent="handle()"></a>
相当于event.preventDefault()

  • 事件修饰符可以串联也可以只有修饰符

    <!-- 修饰符可以串联 -->
<a @click.stop.prevent="handle"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

  • .self

    <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<div @click.self="handle"></div>

  • .once

    <!-- 点击事件将只会触发一次 -->
<a @click.once="handle"></a>

按键修饰符

  • .enter

    回车键触发submit
<input @keyup.enter="submit">

侦听器watch

<template>
  <div>
    <!-- 浅度监听 -->
    <div>
      <h2>{{msg}}</h2>
      <input type="text" v-model="msg" />
    </div>
    <hr />
    <!-- 深度监听 -->
    <div>
      <input type="text" v-model="msg1" />
      <button @click="confirm()">修改name</button>
      <ul>
        <li v-for="item in obj" :key="item">{{item}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'safafasas',
      msg1: '',
      obj: {
        name: 'sadassda'
      }
    }
  },
  methods: {
    confirm () {
      this.obj.name = this.msg1
    }
  },
  watch: {
    // 浅度监听
    msg (newV, oldV) {
      console.log(newV, oldV)
    },
    // 深度监听
    obj: {
      deep: true,
      handler (newV, oldV) {
        console.log(newV, oldV)
      }
    }
  }
}
</script>

<style scoped lang='less'>
</style>

计算属性computed

<template>
  <div>
    firstName:
    <input type="text" v-model="firstName" />
    <br />
    laseName:
    <input type="text" v-model="lastName" />
    <br />
    fullName:
    <input disabled type="text" v-model="fullName" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      firstName: 'MEI',
      lastName: 'BO'
    }
  },
  computed: {
    fullName () {
      return this.firstName + '--' + this.lastName
    }
  }
}
</script>

<style scoped lang='less'>
</style>

组件

组件通信

  • 父传子

    父组件 Home.vue
<template>
  <div>
    <h2>父组件</h2>
    <Main :Msg="msg"></Main>
  </div>
</template>

<script>
import Main from '../components/Main'
export default {
  data () {
    return {
      msg: '我是父组件传来的信息'
    }
  },
  components: {
    Main
  }
}
</script>

<style scoped lang='less'>
</style>

    子组件 Main.vue
<template>
  <div>
    <h4>子组件</h4>
    <p>{{Msg}}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  props: {
    Msg: String
  }
}
</script>

<style scoped lang='less'>
</style>

  • 子传父

    父组件 Home.vue
<template>
  <div>
    <h2>父组件</h2>
    <p>{{msg}}</p>
    <Main @myevent="handle"></Main>
  </div>
</template>

<script>
import Main from '../components/Main'
export default {
  data () {
    return {
      msg: ''
    }
  },
  methods: {
    handle (val) {
      this.msg = val
    }
  },
  components: {
    Main
  }
}
</script>

<style scoped lang='less'>
</style>

    子组件 Main.vue
<template>
  <div>
    <button @click="handle">子传父</button>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  methods: {
    handle () {
      this.$emit('myevent', '我是子组件传来的信息') // 触发事件
    }
  }
}
</script>

<style scoped lang='less'>
</style>

  • 组件refs

    • ref放在标签上，拿到的是原生节点

      <template>
  <div>
    <input type="text" v-model="msg" ref="msgRef" @blur="handle" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: '测试'
    }
  },
  methods: {
    handle () {
      console.log(this.$refs.msgRef) // 原生节点input
      console.log(this.$refs.msgRef.value) // input的value值
    }
  }
}
</script>

<style scoped lang='less'>
</style>

生命周期

  • 什么是生命周期

    每个 Vue 实例在被创建时都要经过一系列的初始化过程。例如:从开始创建、初始化数据、编译模板、挂载Dom、数据变化时更新DOM、卸载等一系列过程。我们称这一系列的过程就是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会，利用各个钩子来完成我们的业务代码。

  • 生命周期图示

    在这里插入图片描述

  • 生命周期钩子函数

经常使用的是created(完成创建后执行的钩子函数)和mounted(编译好的html挂载到页面后执行的钩子函数)，在这里请求后台接口数据

推荐一个开源API：https://api.apiopen.top/api.html

例：

<template>
  <div>
    <!-- 名言 -->
    <div>
      <h1>随机一句名言</h1>
      <div class="wrap">
        <h2>{{info.from}}</h2>
        <p>{{info.name}}</p>
      </div>
    </div>
    <hr />
    <!-- 网易新闻 -->
    <div>
      <h1>网易新闻</h1>
      <ul>
        <li v-for="item in newsData" :key="item.title">
          <h2>
            <a target="_black" :href="item.path">{{item.title}}</a>
          </h2>
          <p>{{item.passtime}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      info: {},
      newsData: []
    }
  },
  created () {
    this.getInfo()
    this.getNewsData()
  },
  methods: {
    // 获取随机一句名言
    async getInfo () {
      const res = await this.$http.get('http://poetry.apiopen.top/sentences')
      if (res.status === 200) {
        this.info = res.data.result
      }
    },
    // 获取网易新闻
    async getNewsData () {
      const res = await this.$http.post('https://api.apiopen.top/getWangYiNews')
      if (res.status === 200) {
        this.newsData = res.data.result
      }
    }
  }
}
</script>

<style scoped lang='less'>
* {
  margin: 0;
  padding: 0;
}
.wrap {
  padding: 10px;
}
hr {
  margin: 20px 0 20px 0;
}
ul {
  list-style: none;
  li {
    padding: 10px;
    a {
      color: black;
      text-decoration: none;
    }
  }
}
</style>

MVVM

  • Model view viewModel（模型 视图 视图模型）数据驱动视图改变

  • 数据劫持

  • vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过object.defineProperty()来劫持各个属性的setter ,getter，在数据变动时发布消息给订阅者，触发相应的监听回调

  • 实现mvvm的双向数据绑定

    • 实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者

    • 实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数

    • 实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图

      在这里插入图片描述

weixin_42232876
关注
专栏目录
Vue基础培训培训资料.ppt
06-06
MVVM（Model-View-ViewModel）模式是Vue.js的基础架构。在MVC（模型-视图-控制器）模式的基础上，MVVM将Controller改为了Presenter，并实现了双向数据绑定。在MVVM中，View的变化会自动反映到ViewModel，反之亦然。...
vue基础知识-菜鸟入门
01-03
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面。...通过深入理解和熟练掌握这些Vue基础知识，开发者能够构建出功能丰富、性能优秀的Web应用。不断学习和实践，是提升Vue技能的关键。
第一章 vue入门
热门推荐
Scarborought的博客
10-24 22万+
本篇文章是介绍vue的入门知识，记录了作者学习过程中的一些收获和遇到的坑，后续会更新，敬请期待。。。 1、vue官方网站： https://cn.vuejs.org 2、什么是vue vue是一个前端开发框架，用于降低UI复杂度 UI：user interface用户界面 3、vue的特点 渐进式 响应式 组件化 4、体验vue代码 开发工具：visual studio code 常用插件 Auto Rebane Tag:能够自动更改结束标签 Live Server:自动搭建本地服务器 Prett.
Vue 基础入门
最新发布
我的的博客哦
05-17 1万+
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
Vue基础知识总结 1：Vue入门
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
VUE基础知识
m0_60027772的博客
07-16 2473
vue框架是一个轻量级，渐进式的前端框架。
Vue基础
lijieling123的博客
04-09 3074
Vue遵循SoC关注度分离原则 前端基础 结构层：HTML 表现层：CSS –CSS预处理器：用一种专门的语言，进行Web样面设计，再通过编译器转化为正常的CSS 常用的：SASS(基于Ruby), LESS(这个是基于NodeJS,使用简单，一般用这个) 行为层：JS Vue概念 Augular特点：将后台的MVC模式搬到前端并增加了模块化开发的理念（MVVM）(VM双向绑定相当于控制层) React特点： 提出新概念虚拟DOM, 用于减少真实的DOM操作，在内存中模拟DOM操作，提升前端的渲染效率 Vu
Vue 基础
roydon
10-11 4485
vue2基础
vue基础教程
shiyzhang
07-24 2927
vue基础教程，带你走进vue
vue基础知识汇总
yuandawang的博客
01-06 5908
vue基础知识汇总
Vue基础知识测试
简单点的博客
10-18 7577
Vue基础知识测试
vue基础笔试题
qq_51066068的博客
07-01 1万+
ctions 选项用来定义事件处理方法，用于处理 state 数据。actions 类似于 mutations，不同之处在于 actions 是异步执行的，事件处理函数可以接收 {commit} 对象，完成 mutation 提交，从而方便 devtools 调试工具跟踪状态的 state 变化。...............
Vue基础培训PPT课件.ppt
03-01
Vue基础培训，Vue基础培训课件，Vue基础培训PPT
vue面试——2021最全面的vue基础面试题.pdf
12-14
Vue面试2021最全面的Vue基础面试题.pdf 本资源提供了Vue基础知识点的面试题，涵盖了Vue的基本原理、双向数据绑定的原理、MVVM、MVC、MVP等软件架构设计模式的区别等知识点。 1. Vue的基本原理 Vue实例创建时，Vue...
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
vue中使用嵌套路由(history方式),刷新页面，出现白屏
weixin_42232876的博客
09-12 1278
vue中使用嵌套路由(history方式),刷新页面，出现白屏 路由配置： export default { routes: [{ path: "/", name:"Home",//使用别名意味着以后修改path时，不需要去页面中修改路径 component: () => import("@/views/Home"), }, { path: "/channel/:id", name: "ChannelNews",
vue项目优化(配置webpack，为开发模式与发布模式(生产模式)指定不同的打包入口)
weixin_42232876的博客
11-03 1088
为开发模式与发布模式(生产模式)指定不同的打包入口 默认情况下，Vue项目的开发模式与发布模式，共用同一个打包的入口文件(即src/main.js)。 为了将项目的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件，即： 1.开发模式的入口文件为src/main-dev.js 2.发布模式的入口文件为src/main-prod.js 通过chainWebpack来自定义webpack的打包配置(链式编程) 通过vue-cli3.0工具生成的项目，默认隐藏了所有的webpack的配置项 通过配
vue项目优化(通过externals加载外部CDN资源)
weixin_42232876的博客
11-03 689
在发布模式下，使用externals配置项，可以使所配置的插件不会被打包进js文件中，同时我们需要在public/index.html文件的头部，添加这些未被打包的CDN资源引用 vue.config.js module.exports = { // 修改webpack默认打包入口 chainWebpack: config => { // 生产模式(发布模式) config.when(process.env.NODE_ENV === 'production', config =
vue指令动态参数issue
weixin_42232876的博客
08-29 474
vue指令动态参数 <div id="app"> <!-- 动态参数 --> <a v-bind:[attributeName]='url'>...</a> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> const vm=new Vue({ el:'#app',
Vue基础教程：轻松掌握核心指令与特性
一、Vue基础语法 1. HelloWorld Vue的HelloWorld示例展示了如何创建一个简单的Vue实例。首先引入vue.js库，然后在HTML中选择一个具有ID的DOM元素，通过Vue实例将数据绑定到该元素。Vue实例的数据可以通过双大括号{{ ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值