浅谈 vue实例 和 vue组件
2023-09-14 08:58:55 时间
vue实例:
import Vue from 'vue'; import app from './app'; import myRouter from './routers'; new Vue({ el: '#app', //渲染目标 router: myRouter, //前端路由,整个项目的路由都在这 template: '<App />', //渲染内容 components: { //内容内使用到的组件 App: app }, data:{ //需要用到的数据,根实例一般不需要用 num1: 5, num2: 8, }, methods:{ //需要用到的方法,根实例一般不需要用 fn1(){ // ..... }, fn2(){ // ..... } }, computed:{ //特殊的data,get和set之前都先经过自定义处理 b(){ //简写相当于只有get return 'bbbbb' }, c:{ //完整版 get(){ return 'ccc' }, set(val){ this.a = val; } } }, watch:{ //检测变量的变化 num1(n,o){ console.log(n,o); } } })
Vue组件:
相当于上面import的app
export default { template: `<div>{{a}}<span v-html="a"></span></div>`. data(){ return{ a: '你好,<strong>张啊咩</strong>', dataC: '', dataD: '' } }, methods:{ fn1() {}, fn2() {}, }, computed:{ b(){ return 'bbbbb' }, c:methods:{ fn1() {}, fn2() {}, }{ get(){ return this.dataC; }, set(val){ this.dataC = parseInt(val) } }, d:{ get(){ return this.dataD; }, set(val){ this.dataD = parseInt(val) } } }, watch:{ d(newVal,oldVal){ console.log(newVal,oldVal); } }, props: ['inputData1','inputData2'], mixins: [ { methods:{ fn3() {} } }, { data(){ return { dataE: '' } }, methods:{ fn4() {} } } ], extends: { methods:{ fn5() {} } }, delimiters: ['<%=','%>'], beforeRouteEnter:(to,from,next)=>{ //组件进入的路由钩子 console.log("准备进入"); next(); }, beforeRouteLeave: (to, from, next) => { //组件离开的路由钩子 console.log("准备离开"); next(); } }
区别
其实vue实例和vue组件本质都是一个组件而已,大家的属性基本是一样的
但是vue实例会比vue组件多出el和router属性,而vue组件的data会被要求必须是函数,防止出现同种组件多实例共享同一个data的事情
vue实例的高逼格写法:
import App from 'app'; new Vue({ render: h =>h(App) }).$mount('#app')
我们经常写出一些整个应用就只有一个组件。
所以为了方便,
原来的 template、components ------变成------> render: h=>h(App)
原来的 el ------变成------> .$mount('#app')
ps:mount是挂载的意思
值得注意的是里面的methods
我们千万不要把里面的方法写成箭头函数的形式
因为我们避免不了在这些方法里面写this,若写成箭头函数,this的指向就会变成未被编译成vue对象的这个配置obj
相关文章
- Java项目毕业设计:基于springboot+vue的电影视频网站系统「建议收藏」
- vue 加载页面时触发时间_Vue 刷新页面时会触发事件吗「建议收藏」
- Vue(27)vue-codemirror实现在线代码编译器「建议收藏」
- 【说站】超级容易上手,Vue中使用JSX
- vue-cli 初始----安装运行Vue项目
- VUE双向绑定原理_vue的数据绑定怎么实现
- 你可能需要的vue相关考点汇总
- 如何在vue组件中引入外部的css和js文件[通俗易懂]
- vue父组件调用子组件属性_vue子组件获取父组件实例
- Vue生成二维码_vue通过二维码分享
- 每日一题之请描述Vue组件渲染流程
- Vue源码之虚拟DOM和diff算法(一)使用snabbdom
- 4. 「vue@2.6.11 源码分析」new Vue() 整体流程和组件渲染之前的准备工作
- Vue动态添加和删除组件的实现,子组件和父组件的传值实例演示
- 开心档-软件开发入门之Vue.js 响应接口
- Vue结合Redis,加快数据读取速度(vue读取redis)
- Vue实时监测Redis变化(vue监控redis变化)
- Vue搭配Redis做针对性取值(vue redis取值)