Vue基础精讲 —— 详解Vue实例、Vue实例的属性和方法(1)

devServer,

resolve:{

alias:{

‘vue’: path.join(__dirname, ‘…/node_modules/vue/dist/vue.esm.js’)

}

},

plugins: defaultPlugins.concat([

new webpack.HotModuleReplacementPlugin(),

new webpack.NoEmitOnErrorsPlugin()

])

})

module.exports = config

注意：需要设置 alias 中 vue 指向，这里需要注意不同vue.js 的区别

‘vue’: path.join(__dirname, ‘…/node_modules/vue/dist/vue.esm.js’)

在 node_modules/vue/dist/ 下有不同的vue.js，若不指定vue.js，项目默认使用的是.vue.runtime.esm.js（vue打包之后的代码），这份vue.js是不支持在Vue对象中使用template的。

若不设置alias指向，项目报错如图：

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

在package.json文件中新建一条启动命令

“practice”: “cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.practice.js”

Vue实例 —— 创建，template创建Vue实例

===========================

通过template创建Vue实例，这种方式Vue会将template编译成一个render function，render function返回真正要显示在页面上的HTML代码，效率稍低。

代码示例：

import Vue from ‘vue’

const div = document.createElement(‘div’)

document.body.appendChild(div)

new Vue({

el: div,

template: ‘

this is content {{text}}

’,

data: {

text: ‘text’

}

})

运行结果：

将template的内容挂载到div元素上，挂载过程是会把整个节点替换掉，因此在网页上看不到#root的元素

先定义document节点，再append到body中的方式，相对麻烦

可以注意到先加载了js，再加载真正的页面元素，比较奇怪

在真实的生产环境中，不建议这么操作，建议新建一个template.html文件，类似这样：

修改 webpack.config.practice.js 配置文件，生成HTML文件时会根据 template.html为模板生成

const defaultPlugins= [

new webpack.DefinePlugin({

‘process.env’: {

NODE_ENV: ‘“development”’

}

}),

new HTMLPlugin({

template: path.join(__dirname, ‘template.html’)

})

]

有了这个template模板文件之后， 修改el值

import Vue from ‘vue’

new Vue({

el: ‘#root’,

template: ‘

this is content {{text}}

’,

data: {

text: ‘text’

}

})

在新建Vue实例的时候，如若不传el参数，还能通过这种方式挂载

import Vue from ‘vue’

const app = new Vue({

template: ‘

this is content {{text}}

’,

data: {

text: ‘text’

}

})

app.$mount(‘#root’)

Vue实例 —— 创建，render function创建Vue实例

==================================

详见，Vue核心分解 —— render function创建Vue组件（实例）

Vue实例 —— 属性

===========

app.$data // 数据

app.$props // 接受参数

app.$el // 挂载点

app.$options

app.$options.data.text = ‘text1’ // 不会修改值

app.$data.text = ‘text1’ // 可以修改值

// $options上特殊的属性render

app.$options.render = (h) => {

// 需要有值变化，重新进行渲染之后才会生效

return h(‘div’, {}, ‘new render function’)

}

app.$root === app // Vue实例

app.$children // 子组件

app.$slots // 插槽

app.$scopedSlots // 插槽

app.$refs

app.$isServer // 服务端渲染会用到

Vue实例 —— 方法

===========

// 监听

const unWatch = app.$watch(‘text’, (nextText, oldText) => {

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
…(img-Wm9FyMrq-1715695097661)]

[外链图片转存中…(img-ThTQt7uw-1715695097661)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！