网站建设和维护的职责,网站建设考试题,全屋定制包括设计吗,青岛网站建设 百度前言 上一篇分享了vue的基础指令#xff0c;这篇记录下vue3的核心内容#xff0c;也是自己的学习笔记#xff0c;可能有些核心还不全#xff0c;大佬请略过。 一、核心内容 分享这个之前#xff0c;先声明下#xff0c;我这里是用的脚手架的写法#xff0c;分享的讲解截…前言 上一篇分享了vue的基础指令这篇记录下vue3的核心内容也是自己的学习笔记可能有些核心还不全大佬请略过。 一、核心内容 分享这个之前先声明下我这里是用的脚手架的写法分享的讲解截图是vue3js暴露的写法刚好可以对比理解我也是这样的学习的是暴露的写法自己code的示例是脚手架的写法与大家共同进步。 先上我自己code的示例代码(还是接着之前webstrom创建的项目code) App.vue
templateHelloWorld v-bind:msgmsg/!-- v-model更多用法 --input typetext v-model.number.lazyinNum!-- 计算属性 --p refmsgTitlemsg:{{ msg }}/ppreversedMsg:{{ reversedMsg }}/ppdoubleNum:{{ doubleNum }}/p!-- watch监听 --ulliname:{{ user.name }}/liliage:{{ user.age }}/lilischool{{ user.school }}/li/ulinput typetext changechangeUserName($event.target.value) v-modeluser.name!-- 当前实例属性 --pspan refaaaaaa ref/span/pbutton clickchangeMsg()修改你好/button/templatescript setup
import {ref, computed, watch, getCurrentInstance, nextTick} from vue
import HelloWorld from ./components/HelloWorld.vue// ref创建响应式数据
const msg ref(Welcome to Your Vue.js App)
const inNum ref(0)const user ref({name: ref(John),age: ref(25),school: ref(MIT)
})// methods
function changeUserName(newName) {user.value.name newName;
}
function changeMsg(){console.log(---修改msg---);this.msg 你好;//直接proxy.$refs.msgTitle可能慧出现页面还没有渲染完的情况//console.log(----,proxy.$refs.msgTitle)//使用nextTick迭代页面渲染完再取里面的内容proxy.$nextTick(function (){console.log(--msgRefHtml,proxy.$refs.msgTitle)})
}// computed
const reversedMsg computed(() {return msg.value.toUpperCase().split( ).reverse().join( );
})const doubleNum computed(() {return inNum.value * 2;
})// watch
watch(inNum.value, (newVal, oldVal) {console.log(newVal:, newVal, oldVal:, oldVal);
})watch(user.value, (newUser) {console.log(new name:, newUser.name);
}, {deep: true, immediate: true})//vue3.2.0新增getCurrentInstance获取当前实例
const dint getCurrentInstance();
console.log(dint)//这种方式只能在开发环境下使用生产环境下的ctx将访问不到
const {ctx} getCurrentInstance();
console.log(ctx.$refs)//此方法在开发环境以及生产环境下都能放到组件上下文对象推荐
const {proxy} getCurrentInstance();
console.log(proxy.$refs)//nextTick
nextTick(() {//var msgTitleRef proxy.$refs.msgTitle;var msgRefHtml proxy.$refs.msgTitle;console.log(--msgRefHtml,msgRefHtml)
})/scriptstyle
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
/style
计算属性 监视器 实例方法 模版 生命周期 注意 beforeCreate并不是字面意思上的在创建前具体还是看下vue官网给出的生命周期的解释图
二、脚手架写法注意 code的示例代码大家有没有注意看script后面跟了一个setup,这个实际就是与生命周期的steup(组合式API)对应的。 总结
vuejs暴露的写法基本会htmljs就可以上手干了脚手架写法才是新阶段的开始 就是笔记备忘希望跟大家一起进步uping
