vue3使用2

最新推荐文章于 2024-04-11 13:43:02 发布
最新推荐文章于 2024-04-11 13:43:02 发布
阅读量880 收藏
点赞数
文章标签： vue.js 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47039303/article/details/121406505
版权

1.context 可以拿到属性 插槽 发射的自定义事件

 <div id="app">
			<lk-box style="width: 200px; height: 200px;
			 background-color: red;"
			 >
			 </lk-box>
			
			
			
			
     </div>


	const app=Vue.createApp({
			
			
		});
   app.component('lk-box',{
			setup(props,context){
				const {attrs,slots,emit}=context;
				console.log(attrs.style);
				
				
			},
			template:
			//父组件给子组件传递数据 no-props
			  '<div :style="$attrs.style">我是子组件</div>' 
			
		});
	   app.mount("#app");

2.context的emit父组件向子组件传递数据

<div id="app">
			<lk-box style="width: 200px; height: 200px;
			 background-color: red;"
			 ></lk-box>
			
			
			
			
     </div>


	const app=Vue.createApp({
			
			
		});
       app.component('lk-box',{
			setup(props,context){
				const {attrs,slots,emit}=context;
		//拿到插槽里面的html代码(是个数组的形式,因为可能有多个元素)
				console.log(slots.default()[0]);
				
				
			},
			template:
			//父组件给子组件传递数据 no-props
			  '<div :style="$attrs.style">我是子组件</div>' 
			
		});
	   app.mount("#app");

3.context的computed属性

setup(props,context){
				const{ref,computed}=Vue;
				let num1=ref(10);
				let num2=computed(()=>{
					return num1.value*10;
				});
				return{
					num1,
					num2
				}
				
				
			}
			
		});

4.context的computed函数的属性 set//设置值时触发 和 get//浏览器得到值时触发

<script>  
		const app=Vue.createApp({
			setup(props,context){
				const{ref,computed}=Vue;
				let num1=ref(10);
				let num2=computed({
					get:()=>{//浏览器得到值时触发
						return num1.value*10;
					},
					  set:(res)=>{//设置值时触发
					         console.log(res)
					         num1.value=res / 10
					       }
				});
				let add=()=>{
					num2.value+=10;
				}
				return{
					num1,
					num2,
					add//可以返回函数
				}
				
				
			}
			
		});

	
	   app.mount("#app");

  1. 用reactive的计算属性的用法
    num1.value 要写成 num1.count 包括显示 {{num1}} ---> {{num1.count}}

  2. 监听器

const app=Vue.createApp({
			setup(props,context){
				const {ref,watch}=Vue;
				let myBrand=ref('xxx');
				let site=ref('xxxxsss');
				//    同时监听一个
				watch(myBrand,(currentB,preB)=>{
		console.log("现在的值"+currentS+"之前的值"+preS);
				},{});
				//    同时监听两个
		watch([myBrand,site],([currentB,preB],[currentS,preS])=>{
		  console.log("现在的值"+currentS+"之前的值"+preS);
				},{});
				
				return{
					myBrand
				}
				
				
			}
			
		});

在html中使用:

   <div id="app"> 
                <input v-model="myBlind"/>
	{{myBlind}}//可以使用这样取值
    </div>

7.监听器监听一个属性(不大明白)

   const app=Vue.createApp({
			setup(props,context){
				const {ref,watch,reactive,toRefs}=Vue;
		
			let endObj=reactive({brand:'1',site:'111'});
				//    同时监听一个(不大明白为什么是一个函数)
			watch(()=>endObj.brand,(current,pre)=>{
					console.log('xxxxx');
				},{});
		let {brand,site}= toRefs(endObj);//解构是解构对象
				
			
				return{
					brand,
					site
				}
				
				
			}
			
		});
	
	   app.mount("#app");

1.watch 与
watchEffect副作用(没有惰性第一次不会生效 更加抽象(非具体,功能少) 不能访问之前的值)

 const app=Vue.createApp({
			setup(props,context){
				const {ref,watch,reactive,toRefs}=Vue;
		
			let endObj=reactive({brand:'1',site:'111'});
				//    同时监听一个
			watch(()=>endObj.brand,(current,pre)=>{
					console.log('xxxxx');
				},{
  				immedia:true,//是否惰性(是否立刻)
                deep:ture//是否深度揭示(就是内部有变化也监听)
                                         });
		let {brand,site}= toRefs(endObj);//解构对象
				
			
				return{
					brand,
					site
				}
				
				
			}
			
		});
	
	   app.mount("#app");

2.watchEffect 可以直接深度监听 不能监听之前的值 全局监听(只要数据有变化)

   
  watchEffect(()=>{
            console.log("开始监听");		
  })

3.provide 数据发射出去,谁要用谁去订阅(直接可以子组件拿到父组件数据 但是不能修改)
一样要引入(但是会修改父组件的数据)

   父组件:   provide("myvalue",value);
          provide("myvalue",readonly(value));//发布
   子组件:  let value=inject('myvalue');//订阅

4.setup中的计算属性

  const {ref,computed}=Vue;
   let num1=ref(10);
   let num2=computed(()=>{
        return num1*10;
   });

5.vue3的setup的生命周期(放在setup里面)加个 on

const {onBeforeMount}=Vue;
 onBeforeMount(()=>{
     console.log("xxxx");

});

6.获取真实dom元素(特殊情况用) 直接定义常量 给某个html传值(与v-model差不多)
ref 一一对应可以获得dom元素

   const brand=ref(null);
    onMounted(()=>{
           console.log(brand.value);

    });
    return{
        brand
    }

7.Vue-cli 脚手架
Node.js 安装 npm install -g @vue/cli
更新 npm update -g @vue/cli
查看版本 vue -v
安装yarn npm install -g yarn
文件夹右键打开终端 yarn create @vitejs/app my-name (工程的名称小心不能驼峰)
安装 yarn
启动并下载对应依赖 yarn dev

8.(面试)为什么要用vue-cli脚手架:快速搭建项目和工具

  • public放一些静态的资源

  • src:gitignore进行项目版本控制 有个app.vue

  • 可以建个pages文件夹 放.vue最后会变成 index.html

  • main.js 把数据输出到index.html

  • .Vue 是带有 template script style 标签,就是组件化的思想

  • 单页面应用:最终会在1个页面显示(index.html) 不用创建很多页面了,一个页面就可以实现跳转等功能

  • package.json 命令行可以 打包 yarn build 会生成dist文件夹 里面有开发依赖和生成依赖

  • vite:与webpack都是打包工具 可以配置访问端口

9.要把html的元素拆出来给.vue
10.<style scoped>//代表这个样式仅仅能作用与本页面
11.

<template>
       <Header/>//在这里定义组件
</template>
  <script>
  import Header from './components/Head.vue'//引入组件
  export default{//es6的语法输出模块
        name:"app", //输出到app
        data(){
  	return{ }
        },
        components:{
	Header
           }
         
 }

</script>
默默努力的小老弟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3中使用tinyMCE
07-01
vue3中使用tinyMCE的demo，setup语法糖写法，解压后请删除node_model包后重新cnpm i
Vue2 D3.js demo
03-03
npm install/yarn npm run serve
和vue2对比的Vue3新写法，在vue2基础上快速上手vue3项目
qq_50906507的博客
01-03 1671
本质上是第二种写法的语法糖，掌握了这种写法，其实第二种写法也基本上就会了。这一部分，我们需要注意一下了，Vue3 中，watch 有两种写法。所以我们需要关心的，就是 Vue2 里的内容，怎么用 Vue3 的方式写出来。第一种写法，跟过去 Vue2 的写法是一样的，所以我们不过多介绍。要不要用ref，就看你的这个变量的值改变了以后，页面要不要跟着变。在开头，我就已经写了一个简单的例子，我们直接拿过来做对比。剩下的在 Vue2 里是怎么写的，Vue3 是同样的写法。所以，接下来，我们主要介绍的，也就是。
Vue3和Vue2 语法对比
weixin_42132860的博客
09-15 887
的确组合式API（Composition API）相对于选项式API，代码复用性更高，可读性更好；个人觉得还是理性对待，通过评审及对比，结合业务特点选择性使用。Vue3升级，也考虑到兼容Vue2,所以我们老的项目，可以很好的平滑过渡为Vue3（以最小的代价），说到往下兼容，自然语法上面跟Vue2保持一致。自Vue3发布后，很多开发者对Vue3提出的组合式API，很是追捧。条件渲染：v-if v-else v-else-if v-show。事件绑定：v-on或者@表单绑定：v-model。
Vue3(+Vue2)
最新发布
m0_74409046的博客
04-11 364
①组件不用注册，直接创建一个与pages目录平级的components目录②在components中创建：组件名/组件名.vue③组件生命周期没有 onLoad() ，取而代之的是 created()data() {return {list:[]},},methods: {url:'',});
Vue 3 中与 Vue 2 代码写法、性能优化和生态系统改进的全面指南
qq_43326668的博客
05-25 1043
Vue.js 是一个流行的 JavaScript 框架，它的最新版本 Vue 3 在许多方面与之前的版本 Vue 2 有所不同。本博客将重点介绍 Vue 3 中与 Vue 2 不一致的代码编写方式。我们将探讨 Vue 3 中引入的新特性、语法变化以及优化等方面的变化。通过详细比较这些变化，我们将了解如何更好地迁移和使用 Vue 3。
Vue3 的新写法 与Vue2对比记忆法
qq_44146522的博客
06-27 231
1、最基本的 Vue2 写法。
Vue2+Vue3
qq_44013482的博客
10-04 1517
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录​​​ 前言 vue2和vue3结合 提示：以下是本篇文章正文内容，下面案例可供参考 一、vue基础 1.什么是vue 它是一套用于构建用户界面的渐进式JavaScript框架（渐进式说的是可以自底向上逐层的应用） 2.谁开发的 尤雨溪（2014年vue正式对外发布了，版本号为0.8.0，Taylor otwell讲自己在学vue） 后起之秀，生态完善，已然成为国内前端工程..
使用Vue3重构vue2项目
奇舞周刊
10-20 3925
前言2020年9月18日，vue3正式版发布了，前几天把文档整体读了一遍，感触很深，可以解决我项目中的一些痛点，于是就决定重构之前那个vue2的开源项目。本篇文章就记录下重构vue2项目...
Vue3学习记录(2)模板语法（vue2部分）
m0_58565716的博客
01-27 367
w
Vue3.0相对 Vue2.0的主要语法改变
李大人的博客
04-12 3584
Vue3.0的时代已经到来，为了紧追时代的步伐，学习 Vue3.0是势在必行的，在学习过程中，发现 Vue3.0相对于 Vue2.0，在语法上的改动并不是很大，为了巩固学习和便于日后复习，我特意总结一下Vue3.0相对 Vue2.0的主要语法改变。 1、ref 属性的定义 ref 是用于获取组件对象或者元素对象，在 Vue2.0中传入的是一个字符串，然而，在 Vue3.0中可以定义一个函数，函数的参数是接收到组件对象或者是元素对象，所以在使用过程中，可以自定义变量在函数中接收ref 的对象。如下例，用.
使用Vue3重构Vue2项目
zhmen的博客
01-07 1496
使用Vue3重构Vue2项目
vue3中使用vuedraggable
05-26
vue3中使用vuedraggable 内容概要：vue3中使用vuedraggable 适合人群：工作1-3年的前端人员
vue3+express
07-22
vue3 + express的项目中报错：warning in ./node_modules/express/lib/view.js， Critical dependency: the request of a dependency is an expression 的解决方案。 必能解决。
vue3 devtools 版本6.5.0
05-04
GitHub上构建完的包，解压后，在Chrome插件管理-加载已解压的扩展程序，即可使用
vue2与vue3的区别
m0_52942098的博客
08-29 531
vue2与vue3区别
vue3和vue3.2的的script的写法
06-03 356
定义的变量要return出去才能用。
vue3的两种写法（组合式和选项式）
2301_78646673的博客
12-19 1626
数据、方法、计算属性等，是分散在：data、methods、computed中的，如果想新增或者修改一个需求，就需要分别修改：data、methods、computed。相比较于传统的vue2的“选项式”写法，“组合式”更加的简便。总结来说：组合式写法更加灵活和可维护，我们在书写复杂的项目时，应该首选组合式写法，这也是vue官方推荐的写法。其他的组件都会直接或间接的被导入到App.vue组件中，这时就可以继续追踪其他的组件或直接显示其组件的内容了。记数： {{ count }}姓名： {{ name }}
vue3中如何用vue2中的this
晚星的博客
12-27 1777
两种方案分别如下： proxy = 》 this <script lang="ts"> import { getCurrentInstance, ComponentInternalInstance } from "vue"; export default function useCurrentInstance() { const { appContext } = getCurrentInstance() as ComponentInternalInstance; const
vue3使用vue2写法
08-24
在Vue 3中，你可以使用Vue 2的写法，但是需要进行一些调整。下面是一些常见的Vue 2写法在Vue 3中的对应方式： 1. 组件注册： - Vue 2：使用`Vue.component`全局注册组件。 - Vue 3：使用`app.component`在应用级别或组件级别注册组件。 2. 数据绑定： - Vue 2：使用`v-model`实现双向绑定。 - Vue 3：使用`v-model`仍然有效，但需要配合`v-model`的新语法糖，例如：`v-model:text="message"`。 3. 计算属性： - Vue 2：使用`computed`定义计算属性。 - Vue 3：使用`computed`定义计算属性的方式与Vue 2相同。 4. 生命周期钩子： - Vue 2：使用各种生命周期钩子函数，例如`created`、`mounted`等。 - Vue 3：引入了新的生命周期钩子函数，例如`onMounted`、`onUpdated`等，也保留了部分Vue 2的钩子函数。 5. 指令： - Vue 2：使用各种内置指令，例如`v-bind`、`v-on`等。 - Vue 3：内置指令的用法与Vue 2基本相同，但需要使用新的语法糖，例如：`v-bind:text="message"`。 以上只是一些常见的例子，实际上Vue 3还有更多的改进和新特性，你可以查阅Vue官方文档来了解更多详细信息。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值