下面为你详细讲解解析Vue中的$mount的完整攻略：
1.概述
- $mount是Vue实例化后挂载到DOM节点的入口函数，用于手动挂载不适用于el选项的情况。
- 根据不同的使用场景，$mount呈现出不同的表现，如Static Rendering、Client Side Rendering、Server Side Rendering等.
- 在解析$mount之前，需要先了解Vue的生命周期函数，以及Vue的响应式原理。
2.$mount的语法
- $mount方法可以接收一个选择器（CSS选择器），也可以接收一个DOM节点。
//接收选择器
let vm = new Vue({
...
})
vm.$mount('#app')
//接收DOM节点
let app = document.getElementById('app')
let vm = new Vue({
...
})
vm.$mount(app)
3.$mount的使用场景
3.1 静态渲染
- 当我们通过Vue的template选项进行静态页面渲染时，需要手动使用$mount进行挂载。
<div id='app'></div>
<script>
let vm = new Vue({
template:'#app',
data:{
msg:'hello'
}
})
vm.$mount('#app')
</script>
3.2 客户端渲染
- 应用程序部署在客户端上，采用SPA单页应用，通过vue-router路由进行跳转，当路由与当前URL匹配时，挂载组件。
const Home = {
template: '<div>Home</div>'
}
const Foo = {
template: '<div>Foo</div>'
}
const routes = {
'/': Home,
'/foo': Foo
}
const router = new VueRouter({
routes
})
new Vue({
router
}).$mount('#app')
3.3 服务端渲染
- 服务端渲染的核心是在服务器上直接渲染返回HTML字符串，达到首屏快速渲染。
//服务端渲染代码
const Vue = require('vue')
const server = require('express')()
server.get('*', (req, res) => {
const app = new Vue({
data: {
url: req.url
},
template: `<div>访问的URL是：{{ url }}</div>`
})
const renderer = require('vue-server-renderer').createRenderer()
renderer.renderToString(app, (err, html) => {
if (err) {
res.status(500).end('Internal Server Error')
return
}
res.end(`
<!DOCTYPE html>
<html lang="en">
<head><title>Hello</title></head>
<body>${html}</body>
</html>
`)
})
})
//客户端激活代码
const Vue = require('vue')
const app = new Vue({
template: `<div>访问的URL是：{{ url }}</div>`
})
app.$mount('#app')
以上就是解析Vue中$mount的完整攻略，希望能够对你有所帮助。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：解析vue中的$mount - Python技术站
微信扫一扫 
支付宝扫一扫 