下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

web前端:Vue入门

作者:chenhongyong     来源: https://www.cnblogs.com/chy18883701161/archive/2020/03/31/12点击数:1237发布时间: 2020-04-10 11:27:41

标签: js框架jQueryVue

Web开发

  框架(framework)是一个框子--指其约束性,也是一个架子--指其支撑性。是一个基本概念上的结构,用于去解决或者处理复杂的问题。

  框架这个广泛的定义使用的十分流行,尤其在软件概念。框架也能用于机械结构。

  vue是国人开发的一个js框架,国人用得比较多。

  Vue等框架与jQuery的区别

  1jQuery基于dom操作

  2Vue框架以数据驱动、组件化开发为核心

  下载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)是构成一类特定软件可复用设计的一组相互协作的类。框架规定了你的应用的体系结构。它定义了整体结构,类和对象的分割,各部分的主要责任,类和对象怎么协作,以及控制流程。框架预定义了这些设计参数,以便于应用设计者或实现者能集中精力于应用本身的特定细节

赞(8)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程