做电影网站要懂代码,建设网站推广广告图,美容美发培训职业学校,黑龙江新闻广播在线收听什么是框架#xff1f;
盖房子#xff0c;框架结构
框架结构就是房子主体#xff0c;基本功能
把很多基础功能已经实现#xff08;封装了#xff09;
框架#xff1a;在基础语言之上#xff0c;对各种基础功能进行封装#xff0c;方便开发者#xff0c;提高开发效…什么是框架
盖房子框架结构
框架结构就是房子主体基本功能
把很多基础功能已经实现封装了
框架在基础语言之上对各种基础功能进行封装方便开发者提高开发效率
举例操作网页
现在点击一个按钮触发事件获得我们要操作的标签再对标签内容进行操作
框架操作网页时程序员之关注要操作的内容即可对标签内容的更新等操作都由框架完成
Vue官网Vue.js (vuejs.org)
前端框架
Vue.Js 是一个js框架不是代替js的是对js进行了封装。
Vue官网Vue.js (vuejs.org)
后端Java框架
mybatis--jdbc
spring...
今天先来入门Vue.js
什么是 Vue.js Vue (读音 /vju ː /类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层不仅易于上手还便于与第三方库或既有项目整合。 Vue.js 是前端的主流框架之一和 Angular.js、React.js 一起并成为前端三 大主流框架 https://v2.cn.vuejs.org/ Vue.js 优点 1.体积小 压缩后 33K 2.更高的运行效率 用 JQuery 或者原生的 JavaScript DOM 操作函数对 DOM 进行频繁操作的 时候浏览器要不停的渲染新的 DOM 树导致页面看起来非常卡顿。 基于虚拟 dom一种可以预先通过 JavaScript 进行各种计算把最终的 DOM 操作计算出来并优化的技术最后在计算完毕才真正将 DOM 操作提交。 3.双向数据绑定,简化 Dom 操作 通过 MVVM 思想实现数据的双向绑定让开发者不用再操作 dom 对象, 把更多的精力投入到业务逻辑上. MVVM 是 Model-View-ViewModel 的简写。MVVM 就是将其中的 View 的 状态和行为抽象化让我们将视图 UI 和业务逻辑分开。 如图
view就是网页标签
viewmodel是vue框架
model是js中的数据对象 4 生态丰富、学习成本低 市场上拥有大量成熟、稳定的基于 vue.js 的 ui 框架、常用组件来即用实现 快速开发对初学者友好、入门容易、学习资料多. vue.js是一个js框架不是代替js的是对js进行了封装 element.UI框架将前端常用的一些组件表单表格消息提示进行封装对html和css进行了封装
Vue 安装 方式 1:直接用 script 引入 下载 Vue.js 并导入 js 文件 script srcjs/vue.js/script 方式 2:命令行工具 (CLI) *不推荐新手使用 安装教程给出了更多安装 Vue 的方式。请注意我们不推荐新手直接使 用 vue-cli尤其是在你还不熟悉基于 Node.js 的构建工具时。 Vue 指令 指令带有前缀 v- 开头以表示它们是 Vue 提供的特殊属性。 v-text 作用是设置标签的文本内容 默认写法会替换全部内容使用差值表达式可以替换指定内容 内部支持写表达式 p v-textmessage/p p{{message}}/p v-html 作用是设置元素的 innerHTML 内容中有 html 结构会被解析为标签 内部支持写表达式 p v-htmlmessage/p !DOCTYPE html
htmlheadmeta charsetutf-8title/titlescript srcfile:///C:/code/web/vuepro/js/v2.6.10/vue.js/scriptscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscript srchttps://cdn.jsdelivr.net/npm/vue2/script/headbody!-- 创建一个标签{{message}}插入一个值不影响标签中的其他内容v-htmlmessage,v-textmessage会覆盖标签中的其他内容{{message}},v-textmessage 不能解析标签中的html标签{{message}},v-htmlmessage 可以解析标签中的html标签--div idapp{{ message }}p v-textmessageaaa/pp v-htmlmessage1/p/divscript// 创建了一个vue对象var app new Vue({el: #app,/* 绑定挂载点 */data: {message: Hello Vue!,}})/script/body
/html v-on 作用是为元素绑定事件 事件名不需要写 on 指令可以简写为 绑定的方法定义在 methods 属性中,可以传入自定义参数 input typebutton value按钮 v-on:clicktest(1,2) / input typebutton value按钮 clicktest / methods:{ test(a,b){ alert(a); } } !DOCTYPE html
htmlheadmeta charsetutf-8title/titlescript srcfile:///C:/code/web/vuepro/js/v2.6.10/vue.js/scriptscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscript srchttps://cdn.jsdelivr.net/npm/vue2/script/headbody!-- 创建一个标签{{message}}插入一个值不影响标签中的其他内容v-htmlmessage,v-textmessage会覆盖标签中的其他内容{{message}},v-textmessage 不能解析标签中的html标签{{message}},v-htmlmessage 可以解析标签中的html标签--div idapp!-- {{ message }}p v-textmessageaaa/pp v-htmlmessage1/p --input typebutton value按钮1 v-on:clicktest1()/input typebutton value按钮2 clicktest2()/divscript// 创建了一个vue对象var app new Vue({el: #app,/* 绑定挂载点 */data: {message: bHello Vue!/b,},methods:{test1(){alert(this.message aaaaaa);},test2(){alert(this.message);}}})/script/body
/html v-model 作用是便捷的设置和获取表单元素的值 绑定的数据会和表单元素值相关联 绑定的数据----表单元素的值 双向数据绑定 input typetext v-modelmessage/ p{{message}}/p data:{ message: } !DOCTYPE html
htmlheadmeta charsetutf-8title/titlescript srcfile:///C:/code/web/vuepro/js/v2.6.10/vue.js/scriptscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscript srchttps://cdn.jsdelivr.net/npm/vue2/script/headbody!-- 创建一个标签{{message}}插入一个值不影响标签中的其他内容v-htmlmessage,v-textmessage会覆盖标签中的其他内容{{message}},v-textmessage 不能解析标签中的html标签{{message}},v-htmlmessage 可以解析标签中的html标签--div idapp!-- {{ message }}p v-textmessageaaa/pp v-htmlmessage1/p --input typebutton value按钮1 v-on:clicktest1()/input typebutton value按钮2 clicktest2()input v-modelname /p{{ message }}/pp{{ name }}/p/divscript// 创建了一个vue对象var app new Vue({el: #app,/* 绑定挂载点 */data: {message: bHello Vue!/b,name:},methods:{test1(){alert(this.message.split().reverse().join());//翻转},test2(){this.name tom;}}})/script/body
/html
