el和template的区别
发现问题
- 到此,所学的vue的相关知识,若想将vue的date中的数据在页面显示,就要修改index.html
- 添加了组件,要使用也必须修改index.html
- 频繁修改index.html,显然不太合适
template属性
- 之前的学习中,我们定义了el属性用来绑定index.html的元素,让Vue实例之后管理其中的内容
- template属性相当于是Vue实例的一个html模板,我们可以不用再在index.html中运用data
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Template</title>
</head>
<body>
<div id="app">
</div>
<script src="./dist/bundle.js"></script>
</body>
</html>
import Vue from 'vue'
const app=new Vue({
el: '#app',
template:`
<div>
<h2>{{message}}</h2>
<button>template按钮</button>
</div>
`,
data: {
message:'Template属性'
}
})
运行结果:
后序问题
- 但是这样在Vue实例中的template属性中添加,后序需要在Vue实例中写大量的html代码,不简洁,尝试将template移出去
console.log('使用webpack');
//模块化的思想
//1、CommonJS的方法
//CommonJS导入
const {add} = require('./mathUtil.js')
console.log(add(10, 20))
import Vue from 'vue'
const app = {
template: `
<div>
<h2>{{message}}</h2>
<button>template按钮</button>
</div>
`,
data(){
return{
message: 'Template属性打包'
}
}
}
new Vue({
el: '#app',
template: `<app/>`,
//components注册一下组件
components:{
app
}
})
执行结果:
现在就将template属性及其用到的data属性分离出去了,分离到一个实例当中,但是当代码量增大,也会导致main.js代码量庞大,继续分离,使用导入导出
新建文件夹vue,vue下新建一个app.js
//导出app
export default {
template: `
<div>
<h2>{{message}}</h2>
<button>template按钮</button>
</div>
`,
data(){
return{
message: 'Template属性打包3'
}
}
}
main.js
import Vue from 'vue'
//导入
import app from './vue/app'
new Vue({
el: '#app',
template: `<app/>`,
//components注冊一下
components:{
app
}
})
执行结果:
再优化一下,``的方式添加html代码过于笨重,现在将html代码从js中分离出来打包到.vue文件中
使用.vue文件也需要引入相应的loader:
npm install vue-loader vue-template-compiler --save-dev
阿西吧~
安装失败了,应该是版本号不匹配的问题,下午再弄吧,吃饭先