SPA(simple page application)单页面应用
多页面通过路由跳转vue-router(前端路由)
一般开发时只有一个index.html页面,所以在里面,一般只有这个,外面的壳,而没有里面的内容
el和template区别(一):
提出问题模型:
如果外面希望将data中的数据显示在界面中,就必须是修改index.html
如果外面后面自定义了组件,也必须修改index.html来使用组件
但是html模板在之后的开发中,我并不希望手动的来频繁修改,是否可以做到?
定义template属性:
在前面的Vue实例中,外面定义了el属性,用于和index.html中的#app进行绑定,让Vue实例之后可以管理它其中的内容
这里,我们可以将div元素中的{
{message}}内容删掉,只保留一个基本的id为div的元素
但是如果我依然希望在其中显示{
{message}}的内容,应该怎么处理呢?
我们可以再定义一个template属性
<div id="app">
</div>
然后在vue中是这样的:
new Vue({
el: '#app',
data: {
message: '你好啊,李银河',
}
})
但是这样应该怎么在页面中展现呢?
在vue实例中的template。
new Vue({
el: '#app',
template: `
<div>
<h2>{
{message}}</h2>
<button @click="btnClick">按钮</button>
<h2>{
{name}}</h2>
</div>
`,
data: {
message: '你好啊,李银河',
name: 'codewhy'
},
methods: {
btnClick() {
}
}
})
运行结果: