深度解析：Vue.js框架在Web前端教程中的应用
发表时间: 2020-11-16 14:48
框架(framework)是一个框子--指其约束性，也是一个架子--指其支撑性。是一个基本概念上的结构，用于去解决或者处理复杂的问题。
Web前端教程
框架这个广泛的定义使用得十分流行，尤其在软件概念。框架也能用于机械结构。
vue是国人开发的一个js框架，国人用得比较多。
Vue等框架与jQuery的区别
下载vue.js
如果安装了node，执行命令npminstallvue下载vue.js，可在vue后面加上@版本号指定要下载的vue.js版本，未指定时默认下载最新稳定版。
在代码中引入下载的vue.js：
<scripttype="text/Javascript"src="vue.js"></script>
上线时要换为生产版vue.min.js
demovue.js的简单使用
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title></title>
<!--引入vue.js-->
<scriptsrc="js/vue.js"type="text/javascript"charset="utf-8"></script>
</head>
<body>
<!--留坑，后续填数据-->
<divid="app"></div>
<divclass="red"></div>
<div></div>
<script>
newVue({
el:'#app',//通过id来指定
template:'<p>hellovue1</p>'//要填充的内容。可以去嵌套元素，比如'<div><p></p></div>'；但只能有一个根元素，'<div></div><div></div>'这样就不行
});
newVue({
el:'.red',//通过class来指定
template:'<p>hellovue2</p>'
});
newVue({
el:'div',//通过元素名来指定。不常用，因为控制不精细
template:'<p>hellovue3</p>'
});
</script>
</body>
</html>
newVue()只会产生一个Vue对象，只能填一个坑。
比如有2个<divclass="red">，一个newVue()只能填一个。
demo动态数据
<divid="app"></div>
<script>
newVue({
el:'#app',
template:'<p>姓名：{{name}}，年龄：{{age}}</p>',//可以用{{}}占位
data:function(){
return{
name:'chy',//数据
age:20,
}
}
});
</script>
框架(Framework)是构成一类特定软件可复用设计的一组相互协作的类。框架规定了你的应用的体系结构。它定义了整体结构，类和对象的分割，各部分的主要责任，类和对象怎么协作，以及控制流程。框架预定义了这些设计参数，以便于应用设计者或实现者能集中精力于应用本身的特定细节。
以上是小科今日整理的“干货：Web前端教程之Vue.js框架解析”一文，希望为正在学习Web前端的同学提供参考。
鲁公网安备37020202000738号