Vue3-初识-引入-基本操作(第一篇)

最新推荐文章于 2024-04-17 12:58:54 发布
最新推荐文章于 2024-04-17 12:58:54 发布
阅读量7.8k 收藏 11
点赞数 6
分类专栏： vue学习 文章标签： javascript typescript vue.js vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43547255/article/details/121930959
版权
一、Vue3-初识

首先对于vue.js 3.0，它是vue.js 2.0的升级版本，总得来说是对响应式，模板等，更多的是对性能方面的优化，在底层代码和api方面都有更新，而且在vue3中，逐渐使用typeScript语言，更严格！

在这里插入图片描述

1、通过script引入的方式实现vue3应用

vue.global.js

  <script src="../vuejs/vue.global.js"></script>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="counter">
      <h1>counter:{{ num }}</h1>
    </div>
    <script src="../vuejs/vue.global.js"></script>
    <script>
      const Counter = {
        data: function() {
          return {
            num: 0
          };
        }
      };
       //创建一个应用，将配置的对象counter的内容渲染到选择器
      let app = Vue.createApp(Counter).mount("#counter");
    </script>
  </body>
</html>

在这里插入图片描述

//方式一
 data: function() {
          return {
            num: 0
          };
        }
//方式二
  data1(){
            return{
                num:0
            }
        }
2.vite构建工具创建vue3项目

1.按照步骤输入命令，生成文件目录

//vscode终端输入(终端快捷键ctrl+~)
//创建一个名为vue3demo02文件夹
 npm init vite-app vue3demo02
 //进入文件夹
 cd vue3demo02
 npm install
 npm run dev

按住ctrl点击链接打开项目
在这里插入图片描述

入口文件
在这里插入图片描述在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
示例

<template>
  <div>
  <h1>{{msg}}</h1>
  <button @click="changeMsg">显示内容</button>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  data(){
    return{
      msg:999
    }
  },
  methods:{
    changeMsg(){
      this.msg = "你今天有没有喝牛奶"
    }
  }
}
</script>

在这里插入图片描述

二、基本操作
1.Vue声明式语法与数据双向绑定

双向绑定
在这里插入图片描述

在这里插入图片描述###### 4.模板语法常用指令
在这里插入图片描述

在这里插入图片描述
使用 v-html指令

 <!-- v-html指令，使得内容插入html代码 -->

<template>
  <div>
  <h1>{{msg}}</h1>
  <!-- v-once只渲染一次 -->
  <button @click="changeMsg" >显示内容</button>
  <input type="text" v-model="msg">
  <!-- v-html指令，使得内容插入html代码 -->
  <div v-html="content"></div>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  data(){
    return{
      msg:999,
      content: `<h1>代码改变事件</h1>`
    }
  },
  methods:{
    changeMsg(){
      this.msg = "你今天有没有喝牛奶"
    }
  }
}
</script>

在这里插入图片描述

<template>
  <div>
  <h1>{{msg}}</h1>
  <!-- v-once只渲染一次 -->
  <button @click="changeMsg" >显示内容</button>
  <input type="text" v-model="msg">
  <!-- v-html指令，使得内容插入html代码 -->
  <div v-html="content"></div>
  <!-- v-bind指令，绑定属性的内容 -->
  <div :id="id" :class="id"></div>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  data(){
    return{
      msg:999,
      content: `<h1>代码改变事件</h1>`,
      id:"d1"
    }
  },
  methods:{
    changeMsg(){
      this.msg = "你今天有没有喝牛奶"
      this.id = "d2"
    }
  }
}
</script>
<style>
.d1{
  width: 100px;
  height: 100px;
  background-color: rgb(45, 155, 155);
}
.d2{
  width: 100px;
  height: 100px;
  background-color: blueviolet;
}
</style>

在这里插入图片描述

2.JavaScript表达式在模板中使用
<template>
  <div>
  <!-- JavaScript表达式在模板中使用 -->
  <h1>{{msg.split('')}}</h1>
  <h1>{{msg.split('').reverse()}}</h1>
  <h1>{{msg.split('').reverse().join('')}}</h1>
  <div :id="msg.split('').reverse().join('')"></div>
  <!-- 只能放置一个表达式 -->
  <h1>{{color=="red"?"开心":"难过"}}</h1>
  <button @click="changeMsg">颜色切换</button>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  data(){
    return{
      msg:"HelloWorld",
      color:"red"
    }
  },
  methods:{
    changeMsg(){
      this.color = "pink"
    }
  }
}
</script>
<style>
</style>

在这里插入图片描述

3.动态指令(比较少用)
<template>
  <div>
    <div :[attributeName]="id"></div>
    <div></div>
    <button @click="changeMsg">切换颜色</button>
     <button @[eventName]="changeMsg">切换颜色</button>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  data(){
    return{
      attributeName:"class",
      id:"d1",
      eventName:"click"
    }
  },
  methods:{
    changeMsg(){
      this.id = "d2"
    }
  }
}
</script>
<style>
.d1{
  width: 100px;
  height: 100px;
  background-color: rgb(45, 155, 155);
}
.d2{
  width: 100px;
  height: 100px;
  background-color: blueviolet;
}
</style>

在这里插入图片描述

4.计算属性

因为在插值表达式中方太多的逻辑对（逻辑：split，join,reverse等方法）,不方便

<template>
  <div>
    <div>{{reverseMsg}}</div>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  data(){
    return{
      msg:"click"
    }
  },
  computed:{
    reverseMsg:function(){
      return this.msg.split('').reverse().join('')
    }
  },
}
</script>

结果：kcilc

5.watch监听数据的变化
<template>
  <div>
    <input type="text" v-model="msg">
    <h1>{{msg}}</h1>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  data(){
    return{
      msg:"click"
    }
  },
  computed:{
    reverseMsg:function(){
      return this.msg.split('').reverse().join('')
    }
  },
  methods:{
  },
  watch:{
    msg:function(newvalue,oldvalue){
      console.log(newvalue)
      console.log(oldvalue)
      if(newvalue.length<3){
        alert("输入内容太短！")
      }
    }
  }
}
</script>

在这里插入图片描述

6.class类名的多种操作方式
<template>
  <div>
    <!-- 第一种写法：直接放置字符串 -->
   <div :class="msg"></div>
   <!--  第二种写法：放置对象-->
   <dir :class="{active:isShow}">hello</dir>
   <!--  第三种写法：放置数组 -->
   <div :class="arry">hello</div>
   <!--  第三种写法：数组和对象结合 -->
   <div :class="[classname,{active:isShow}]"></div>
   <button @click="taggleBtn">taggleBtn</button>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  data(){
    return{
    msg:"d1",
    isShow:true,
    arry:['active','d2'],
    classname:'d3'
    }
  },
  methods:{
    taggleBtn:function(){
      this.isShow = ! this.isShow
      this.arry.pop();
    }
  },
}
</script>
<style>
.d1{
  background-color: rgb(255, 176, 19);
  height: 20px;
}
.active{
  background-color: aquamarine;
}
.d2{
  width: 200px;
  height: 20px;
}
.d3{
  margin-top: 15px;
  width:100%;
  height: 20px;
}
</style>

在这里插入图片描述

<template>
  <div>
    <div v-if="user=='vip'">金主爸爸</div>
    <div v-else>金主宝宝</div>
    <h1 v-show="isShow">充值会让你更强大！</h1>
    <!-- //频繁切换用v-show -->
    <button @click="taggleBtn">切换</button>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  data(){
    return{
      user:"vip",
      isShow:"true"
    }
  },
  methods:{
    taggleBtn:function(){
      this.isShow = ! this.isShow
    }
  },
}
</script>
7.列表渲染
<template>
  <div>
    <!-- 有序列表 -->
   <ol>
     <li v-for="(item,i) in news" :key="i">{{item}}</li>
   </ol>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  data(){
    return{
      user:"vip",
      isShow:"true",
      news:[
        "国内",
        "国外",

      ]
    }
  },
}
</script>

在这里插入图片描述

<template>
  <div>
    <!-- 有序列表 -->
   <ol>
     <li v-for="(item,i) in news" :key="i">{{item.title}}</li>
   </ol>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  data(){
    return{
      user:"vip",
      isShow:"true",
      news:[
       {
         title:"直升机坠落",
         tag:"热"
       },
       {
         title:"中秋出现圆月",
         tag:"新"
       }

      ]
    }
  },
  methods:{
    taggleBtn:function(){
      this.isShow = ! this.isShow
     
    }
  },
}
</script>

在这里插入图片描述

<template>
  <div>
    <!-- 有序列表 -->
   <ol>
     <li v-for="(item,i) in table" :key="i">{{item+""+i}}</li>
   </ol>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  data(){
    return{
      user:"vip",
      isShow:"true",
      table:{
        name:"coco",
        age:18
      }
    }
  },
  methods:{
    taggleBtn:function(){
      this.isShow = ! this.isShow
     
    }
  },
}
</script>

在这里插入图片描述

8.事件与参数和事件修饰符
<template>
  <div>
    <!-- 直接绑定事件不需要参数 -->
   <h1 @click="addEvent" class="d1">{{num}}</h1>
   <!-- v-on 是全程命令 ,@是缩写的命令-->
   <h1 v-on:click="addEvent" class="d1">{{num}}</h1>
   <h1 v-on:click="num++" class="d1">{{num}}</h1>
   <!-- 一个事件绑定多个处理函数 -->
   <h1 @click="addEvent(),changeColor()" :style="{background:color}">{{num}}</h1> 
   <!-- 事件修饰符
    阻止事件冒泡.stop
    阻止默认事件.prevent
    事件只会触发一次.once
    -->
    <h1 v-on:click.once="addEvent" class="d1">{{num}}</h1>
    <!-- 按键修饰符
    enter/tab/delete/esc/space/up/down/left/right
    系统修饰符
    .ctrl/.alt/.shift/.meta
    鼠标修饰符
    .left/.right/.middle
    -->
    <input type="text" @keydown.enter="searchEvent">
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  data(){
    return{
      num:0,
      color:"red"
      }
    }
  ,
  methods:{
   addEvent:function(){
     this.num++;
   },
   changeColor:function(){
     this.color = "pink"
   },
   searchEvent:function(){
     console.log("执行了回车搜索事件")
   }
  },
}
</script>
<style>
.d1{
  background-color: aquamarine;
}
</style>
9.表单的数据双向绑定v-model与修饰符

复选框

 <!-- 复选框 -->
   香蕉<input type="checkbox" value="香蕉" v-model="fruits">
      苹果<input type="checkbox" value="苹果" v-model="fruits">
         葡萄<input type="checkbox" value="葡萄" v-model="fruits">
            草莓<input type="checkbox" value="草莓" v-model="fruits">
            <h2>{{fruits}}</h2>

多行文本输入

 <!-- 多行文本输入框 -->
  <textarea name="" id="" cols="30" rows="10" v-model="cheack"></textarea>
   <h1>{{cheack}}</h1>

单选框

    女<input type="radio" value="女" v-model="sex">
    男<input type="radio" value="男" v-model="sex">
    <h2>{{sex}}</h2>

选项框单选

<select name="" id="" v-model="city">
      <option value="上海">上海</option>
      <option value="北京">北京</option>
      <option value="深圳">深圳</option>
      <option value="青岛">青岛</option>
    </select>
    <h2>{{city}}</h2>

选项框多选

    <select name="" id="" v-model="citys" multiple>
      <option value="上海">上海</option>
      <option value="北京">北京</option>
      <option value="深圳">深圳</option>
      <option value="青岛">青岛</option>
    </select>
    <h2>{{citys}}</h2>

表单获取是否选中

  <input type="checkbox" value="" v-model="checked1" true-value="喜欢" false-value="不喜欢" name="like">
   <h2>{{checked1}}</h2>

.lazy、input变为change事件改变值

  <input type="text" v-model.lazy="lazy" >
   <h2>{{lazy}}</h2>

number修饰符转化为数字

   <input type="text" v-model.lazy.number="changenumber">
   <h2>{{changenumber}}</h2>

trim修饰符去掉空格

 <input type="text" v-model.trim="changenumber">

<template>
  <div class="content">
    <!-- 多行文本输入框 -->
   <textarea name="" id="" cols="30" rows="10" v-model="cheack"></textarea>
   <h1>{{cheack}}</h1>
   <!-- 复选框 -->
   香蕉<input type="checkbox" value="香蕉" v-model="fruits">
      苹果<input type="checkbox" value="苹果" v-model="fruits">
         葡萄<input type="checkbox" value="葡萄" v-model="fruits">
            草莓<input type="checkbox" value="草莓" v-model="fruits">
            <h2>{{fruits}}</h2>
    <!-- 单选框 -->
    女<input type="radio" value="女" v-model="sex">
    男<input type="radio" value="男" v-model="sex">
    <h2>{{sex}}</h2>
    <!-- 选项框单选 -->
    <select name="" id="" v-model="city">
      <option value="上海">上海</option>
      <option value="北京">北京</option>
      <option value="深圳">深圳</option>
      <option value="青岛">青岛</option>
    </select>
    <h2>{{city}}</h2>
     <!-- 选项框多选 -->
    <select name="" id="" v-model="citys" multiple>
      <option value="上海">上海</option>
      <option value="北京">北京</option>
      <option value="深圳">深圳</option>
      <option value="青岛">青岛</option>
    </select>
    <h2>{{citys}}</h2>
       <!-- 表单获取是否选中 -->
   <input type="checkbox" value="" v-model="checked1" true-value="喜欢" false-value="不喜欢" name="like">
   <h2>{{checked1}}</h2>
   <!-- .lazy、input变为change事件改变值 -->
   <input type="text" v-model.lazy="lazy" >
   <h2>{{lazy}}</h2>
   <!-- number修饰符转化为数字 -->
   <input type="text" v-model.lazy.number="changenumber">
   <h2>{{changenumber}}</h2>
   <!-- trim修饰符去掉空格 -->
   <input type="text" v-model.trim="changenumber">
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  data(){
    return{
      cheack:"",
      fruits:[],
      sex:"",
      city:"青岛",
      citys:["青岛"],
      checked1:"喜欢",
      lazy:"",
      changenumber:"1"
      }
    }
  ,
  methods:{
   searchEvent:function(){
     console.log("执行了回车搜索事件")
   },
  },
}
</script>
<style>
textarea{
  resize: none;
  width: 200px;
  height: 50px;
}
</style>

在这里插入图片描述


结束~~
在这里插入图片描述

可可鸭~
关注
  • 6
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
Vue3
qq_53464269的博客
02-18 882
vue3
VUE3 入门
追风人的博客
12-08 759
目录 1. 概述 2. 安装开发工具Visual Studio Code 3. VUE3 入门 4. 综述 5. 个人公众号 1. 概述 老话说的好：没有别人混的好，是因为自己能力欠佳，因此越是混的差，越要努力提升自己。 言归正传，现在 jquery 用的越来越少，大部分公司都使用 VUE 技术，今天我们也来聊聊 VUE3。 2. 安装开发工具Visual Studio Code 前端页面通常使用 Visual Studio Code 工具进行开发。 可以到官网进行下载并安..
Vue3不用任何构建的原始HTML
最新发布
weixin_44144773的博客
04-17 1415
Vue3不用任何构建的原始HTML
vue3.js本地引入
06-05
vue3.js
【13.0】Vue3之引入
Chimengmeng的博客
08-07 583
【一】Vue3介绍 1.性能的提升 打包大小减少41%： Vue3采用了一种新的编译器，它能够生成更精简的代码，从而减小了打包后的文件大小。 初次渲染快55%, 更新渲染快133%： Vue3对渲染过程做了优化，提高了首次渲染和更新渲染的速度。 内存减少54%： Vue3在内部对响应式系统进行了重写，减少了内存的使用量。 2.源码的升级 使用Proxy代替definePr...
【01Vue3 安装】Vue3 安装引入 Vue.js创建Vue实例编写Vue应用程序在HTML中使用Vue应用程序
燃正科技
06-08 3874
在开始使用 Vue.js 3之前，需进行一些简单的设置和安装步骤。本教程将指导完成Vue3的安装过程。
vue3 生命周期函数 引入篇
XSL_HR的博客
09-21 3507
关于引入vue3生命周期的一些基础知识整理
vue3学习笔记（1）script引入vue3实现简单应用
gtd54789的博客
04-23 4176
目录一、脚本引入简单使用二、双向绑定的基本表现 一、脚本引入简单使用 script引入 <!-- vue3脚本地址为:https://unpkg.com/vue@3.2.31/dist/vue.global.js --> <script src="https://unpkg.com/vue@3.2.31/dist/vue.global.js"></script> 简单使用实现数据渲染 <body> <!-- 添加html结构 -->
vue3-highcharts:Highcharts.js的Vue 3组件包装器
05-10
一个简单，快速的Vue 3组件，用于呈现使用composition API编写的Highcharts.js图表​​。 演示 最低要求 Vue@3.0.0 Highcharts@8.0.0（较旧的版本可能有效，但未经测试） Vue和Highcharts未与模块捆绑在一起，...
vue-cli3 引入 font-awesome的操作
11-20
补充知识：在Vue2.0中引入font-awesome，并在Element-ui中正确显示font-awesome的icon 如下所示： npm install font-awesome –save 在main.js中引入 import ‘font-awesome/css/font-awesome.css’ 在App.vue的
vue-toaster:Vue 3的Vue.js Toast通知插件
05-23
Vue 3的Vue.js Toast通知插件 安装 # yarn yarn add @meforma/vue-toaster # npm npm install @meforma/vue-toaster 进口 // In you main.js // ... considering that your app creation is here import Toaster ...
vue3-treeselect:vue 3的树选择组件（下一个）
04-13
vue3树选择 具有嵌套选项的多选组件支持 。感谢及其源代码和库，以此作为vue 2的基础。 从他的资料库中取得重大变化： 属性value => modelValue 事件input => updated:modelValue 现在将插槽与特征带有嵌套选项的...
vue3-icon-picker：Vue3项目的绝佳图标选择器
03-04
Vue3图标选择器 Vanilla Js版本是由很棒的人在这里开发的-https: 由移植到Vue3 :) 查看的演示:) 如何建造 git clone https://github.com/hasinhayder/vue3-icon-picker.git cd vue3-icon-picker yarn yarn dev ...
element plus 安装及引入 Vue3
qq_53659329的博客
04-30 678
1. 首先用vscode打开cli创建的文件 (cli创建vue3项目在此不赘述) 2..vscode快捷键 CTRL+J 打开终端 3. 安装Element Plus npm install element-plus--save 加上 --save 选项，可以同时将配置写入 package.json 的 dependencies 字段（生产环境依赖） 4. 引入 Element Plus 在 Vue 中引入 Element Plus 有两种方式，分别是全部引入和局部引入 5. 我认为最舒
1. 通过js引入实现vue3应用
细致-专业-实操
03-17 3133
官方文档： https://v3.cn.vuejs.org/guide/introduction.html 路由：https://router.vuejs.org/zh/ CDN: https://unpkg.com/vue@next 模板 <div id="hello-vue" class="demo"> {{ message }} </div> ​ <script> const HelloVueApp = { data() { return {
38.Vue3：引入路由配置
m0_63953077的博客
10-09 1919
Vue3：引入路由配置
vue cli3引入（vuex、vue-router、ant design vue、axios）
sam的博客
03-25 3230
项目依赖Nojs.js环境，安装教程 如何创建vue cli3项目，创建教程 vuex（状态管理模式【全局变量】） vue-router（路由【页面跳转传参，路由嵌套组件封装】） ant design vue（UI库【全面覆盖了 React、Angular、Vue 三大前端框架】） axios（基于promise的HTTP库【get，post请求封装】） 引入vuex 1.安装Vuex np...
八 引入前端框架Vue.js3
jnlup的博客
02-14 521
Vue.js 是什么 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
vue3项目实战(二)--引入常用依赖
qq_39253096的博客
03-03 803
vue3项目常用初始化配置
vue-infinite-scroll vue3 的引入方法
05-17
在 Vue 3 中使用 vue-infinite-scroll，需要先安装该插件。可以通过 npm 或 yarn 进行安装。 使用 npm： ``` npm install vue-infinite-scroll@next ``` 使用 yarn： ``` yarn add vue-infinite-scroll@next ``` 安装完成后，在需要使用无限滚动的组件中引入该插件： ```js import { ref } from 'vue'; import { useInfiniteScroll } from 'vue-infinite-scroll'; export default { setup() { const list = ref([]); const currentPage = ref(1); const loadMore = async () => { // 加载更多数据 const data = await fetchData(currentPage.value); currentPage.value++; list.value = [...list.value, ...data]; }; useInfiniteScroll(loadMore); return { list, }; }, }; ``` 在上面的示例中，我们使用 `useInfiniteScroll` 函数将 `loadMore` 函数注册为无限滚动事件的回调函数。当用户滚动到列表底部时，`loadMore` 函数会被调用，加载更多的数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

可可鸭~

想吃糖~我会甜

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值