房产网站制作流程,市场seo是什么意思,建设网上银行个人网上银行登,怎么自己做一个网站平台01. 什么是 VueVue (读音 /vjuː/#xff0c;类似于 view) 是一套用于构建用户界面的渐进式框架#xff0c;是当下很火的一个 JavaScript MVVM 库#xff0c;是以 数据驱动和组件化 的思想构建的。MVVM 模式简述下图不仅概括了 MVVM 模式 (Model-View-ViewModel)#xff0c… 01. 什么是 VueVue (读音 /vjuː/类似于 view) 是一套用于构建用户界面的渐进式框架是当下很火的一个 JavaScript MVVM 库是以 数据驱动和组件化 的思想构建的。MVVM 模式简述下图不仅概括了 MVVM 模式 (Model-View-ViewModel)还描述了在 Vue.js 中 ViewModel 是如何和 View 以及 Model 进行交互的。ViewModel 是 Vue.js 的核心它是一个 Vue 实例。Vue 实例是作用于某一个 HTML 元素上的这个元素可以是 HTML 的 body 元素也可以是指定了 id 的某个元素。当创建了 ViewModel 后双向绑定是如何达成的呢首先我们将上图中的 DOM Listeners 和 Data Bindings 看作两个工具它们是实现双向绑定的关键。从 View 侧看ViewModel 中的 DOM Listeners 工具会帮我们监测页面上DOM元素的变化如果有变化则更改Model中的数据从 Model 侧看当我们更新 Model 中的数据时Data Bindings 工具会帮我们更新页面中的 DOM 元素。库和框架的区别在这里我们需要稍微注意一下前端 库(Library) 和 框架(Framework) 的区别它们的本质都是某人编写的用于解决常见问题的 可复用代码 的集合。比如你有一个处理字符串的程序你为了保持代码的 DRY (Dont Repeat Yourself)你编写了如下可复用的功能代码function getWords(str) {const words str.split( );return words;}function createSentence(words) {const sentence words.join( );return sentence;}恭喜你你创建了一个 JavaScript 库如果我们用 「构建房子」 来类比 「构建应用」 的话那么 使用库 就像是 去宜家购物 一样我已经有了一个家现在我需要挑选自己喜欢的一些家具以达到我自己满意的状态这一切 都在我的控制范围之内而 使用框架 就会像是已经有了一个 清装房在已经规划好的蓝图和选择之中我们的一些想法会显得十分地有限。Vue.js 本身只是一个 JavaScript 库包括 React 也一样只不过平时我们所说的 Vue 框架是指包含 Router/ Vuex 等一系列组件之后融合的 一整套解决方案。“更加详细的解释如下「库」 是一个封装好的特定的集合提供给开发者使用而且是特定于某一方面的集合(方法和函数)库没有控制权控制权完全在于使用者本身「框架」 顾名思义是一套架构会基于自身的特点向用户提供一套比较完整的解决方案如果使用者选定了一套框架那么就需要根据框架本身做出一定的适应。02. 为什么使用 Vue说实话我个人非常喜欢 Vue。在我大学刚尝试学习 HTML CSS JavaScript 和 Bootstrap 融合之后我就接触了 Vue它对我来说这样的「前端小白」来说几乎没有什么开发的门槛很平滑地就得以过渡到 Vue 的使用中去。典型的 .vue 文件可以简单成如下的样子(vue-tutorial/typical-case.html)另外我也非常喜欢尤大大本人大家可以去看一看 Honeypot 记录的关于 Vue 的 纪录片 (趁着写文的间隙我又看了一遍)当然如果英文有些吃力也可以围观一下在 B 站上的 带中文字幕的版本。B 站翻译版本截图“Vue 从一开始的定位就是尽可能的降低前端开发的门槛让更多的人能够更快地上手开发。———— 尤雨溪理由一易上手、学习曲线平滑就像上面的典型 .vue 文件的展示一样在 Vue 中一切都很自然例如我们使用 Vue 来构建我们的 Hello World 程序(vue-tutorial/hello-vue.html)html langenheadmeta charsetUTF-8titleHello Vue!titleheadbodydiv idapp {{ message }}divscript srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.jsscriptscript// 创建一个 Vue 实例或者说是 VieModel 实例var app new Vue({el: #app,data: {message: Hello Vue! } })scriptbodyhtml可以看到几乎没有多余的部分只是在创建 Vue 实例时把 id 为 app 的对象 (此处为一个 div) 绑定到了 Vue 实例中而已。理由二文档友好由于 Vue 是国人编写的所以在官网中有完整的中文文档可供开发者参考并且借由尤大大出色的文笔非常地清晰易懂相信看过的朋友会和我有一样的感受官方网站的文档“官方文档的地址可戳 这里理由三MVVM 天然的双向绑定Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 JavaScript 库这就让我们能够专注于 View 层的开发这种轻量级的框架让前端开发更加高效、便捷。例如我们使用 v-model 来简单改造一下我们的 hello-vue.html 文件让它编程一个简单的双向绑定示例(vue-tutorial/v-model-demo.html)div idappp{{ message }}pinput typetext v-modelmessage /div将 message 绑定到文本框当更改文本框的值的时候 {{ message }} 中的内容也会被更新反过来如果我们更改 message 的值的话文本框的值也会被更新我们可以在控制台中尝试一下千万不要把框架能力看得比你解决问题的能力还重要这里是借鉴了 知乎中的一个讨论不论是使用 React 还是 Vue我们最终还是要以 解决实际的问题 为出发点。引用一下尤大大在 知乎-Vue 和 React 的优点分别是什么 上的回答部分截取“说了这么多无非是希望大家能停下来想想所谓的 ”A 技术比 B 技术牛逼“ 背后到底是在争些什么我们使用这些技术的初衷又是什么。很多时候你说这方面他说那方面鸡同鸭讲即使说到一起去也往往缺乏对等的信息量或者基础共识只是各自表达主观看法最后变成两个阵营各自抱团取暖... 说到底就算你证明了 A 比 B 牛逼也不意味着你或者你的项目就牛逼了... 比起争这个不如多想想怎么让自己变得更牛逼吧。—————— 尤雨溪03. Vue 常用指令上面我们已经实际体验了一个 Vue 的指令 v-model 了在 Vue 中指令都带有 v- 前缀以表示它们是 Vue 提供的特殊的 attribute它们会在渲染 DOM 时进行特殊的响应式行为。Vue 内置了一些常用的指令接下来我们将依次来介绍v-if 和 v-else 条件渲染指令v-show 条件展示指令v-for 列表渲染指令v-bind 条件绑定指令v-on 事件处理指令“大部分照搬的官方教程写得非常具有参考性感兴趣的朋友可以直接略过下面部分去参考 官方文档。v-if 和 v-else 条件渲染指令v-if 指令v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。例如(vue-tutorial/v-if-demo)p v-ifseen现在你看到我了pvar app new Vue({el: #app,data: {seen: true }})页面会正确的显示「现在你看到我了」这几个字。v-else 指令你也可以使用 v-else 来添加一个 else 块 来表达条件不满足时应该渲染的模块p v-ifseen现在你看到我了pp v-elseOh no!pvar app new Vue({el: #app,data: {seen: false }})此时条件 seen 不满足页面就会显示「Oh no!」的字样。v-else-if 指令这是 2.1.0 版本新增的指令充当 v-if 的 else-if 块可以用来连续判断条件div v-iftype A Adivdiv v-else-iftype B Bdivdiv v-else-iftype C Cdivdiv v-else Not A/B/Cdiv类似于 v-elsev-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。v-show 条件展示指令另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样h1 v-showokHello!h1不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display (条件不满足则把元素 display 属性设置为 none)而 v-if 则在条件不满足时直接不渲染出对象。v-if 与 v-showv-if 是“真正”的条件渲染因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是 惰性 的如果在初始渲染时条件为假则什么也不做——直到条件第一次变为真时才会开始渲染条件块。相比之下v-show 就简单得多——不管初始条件是什么元素总是会被渲染并且只是简单地基于 CSS 进行切换。一般来说v-if 有更高的切换开销而 v-show 有更高的初始渲染开销。因此如果需要非常频繁地切换则使用 v-show 较好如果在运行时条件很少改变则使用 v-if 较好。v-for 列表渲染指令我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法其中 items 是源数据数组而 item 则是被迭代的数组元素的别名。ul idexample-1li v-foritem in items {{ item.message }}liulvar example1 new Vue({el: #example-1,data: {items: [ { message: Foo }, { message: Bar } ] }})结果FooBar“注意永远不要把 v-if 和 v-for 同时用在同一个元素上。因为当 Vue 处理指令时v-for 比 v-if 拥有更高的优先级所以会导致错误详细的技术细节可以 戳这里v-bind 条件绑定指令我们可以传给 v-bind:class 一个对象以动态地切换 class(也可以用缩写 : 来替代 v-bind 指令)div v-bind:class{ active: isActive }div上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness。你可以在对象中传入更多属性来动态切换多个 class。此外v-bind:class 指令也可以与普通的 class 属性共存。当有如下模板divclassstaticv-bind:class{ active: isActive, text-danger: hasError }div和如下 datadata: {isActive: true,hasError: false}结果渲染为div classstatic activediv当 isActive 或者 hasError 变化时class 列表将相应地更新。例如如果 hasError 的值为 trueclass 列表将变为 static active text-danger。v-on 事件处理指令可以用 v-on 指令监听 DOM 事件并在触发时运行一些 JavaScript 代码。(也可以用缩写 来替代 v-on 指令)示例div idexample-1button v-on:clickcounter 1Add 1buttonpThe button above has been clicked {{ counter }} times.pdivvar example1 new Vue({el: #example-1,data: {counter: 0 }})结果v-on 的事件修饰符在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点但更好的方式是方法只有纯粹的数据逻辑而不是去处理 DOM 事件细节。为了解决这个问题Vue.js 为 v-on 提供了事件修饰符。之前提过修饰符是由点开头的指令后缀来表示的。.stop.prevent.capture.self.once.passivea v-on:click.stopdoThisaform v-on:submit.preventonSubmitforma v-on:click.stop.preventdoThataform v-on:submit.preventformdiv v-on:click.capturedoThis...divdiv v-on:click.selfdoThat...div“另外事件处理还可以支持 按键码 (某一个键按下)、系统修饰符 (键盘鼠标按下)可以参看 官方教程04. Todo-List 示例上面我们了解了一些基本的指令了接下来我们实际动动手来搭建一个简单的 TodoList demo 小程序。第一步明确需求TodoList 想必大家都很熟悉使用来记录我们接下来要做的一些事情的程序最基本的功能有增加和删除很简单可以看出我们只需要一个输入框 (用来记录将要保存的数据)一个按钮 (用来添加数据)和一个集合 (用来保存数据) 就差不多可以了上手第二步创建好需要的 data先来创建好我们需要的数据 datadata: {todos: [{id: nextTodoId,text: 写代码 }, {id: nextTodoId,text: 还是写代码 } ],newTodoText: }这里多定义了 id 属性是为了方便我们的删除操作。第三步创建好对应的 HTML没有任何布局就直接定义好我们所需要的组件就好了input typetext v-modelnewTodoText /button clickaddItem添加buttonulli v-foritem in todosspan{{ item.text }}spanspanbutton clickremoveItem(item.id)delbuttonspanliul没有任何的特别只是里面包含了两个我们 未定义 的方法addItem 和 removeItem 而已。第三步定义并实现方法Vue 中的方法需要定义在 Vue 实例的 methods 关键字下面methods: { addItem(key) {this.todos.push({id: nextTodoId,text: this.newTodoText })this.newTodoText }, removeItem(id) {this.todos this.todos.filter(todo {return todo.id ! id }) }}这里数组的更新需要用到 push另外删除时我们使用了一个 lambda 表达式来完成删除时传入了一个要删除元素的 id然后从数组中挑选出所有 不等于 这个 id 的元素重新赋值给原数组这样就相当于是删除了元素了。“本文涉及的所有代码都上传到了【More Than Java】项目中。(地址下方)更好的参考上面的代码仅仅是简单实现更好的参考可以查看 Vue 官方实现的一个更加具有参考性的例子https://codesandbox.io/s/o29j95wx9相关阅读React入门懂一点Python系列——快速入门妈妈再也不担心我面试被Redis问得脸都绿了参考资料Vue【官方文档】 - https://cn.vuejs.org/v2/guide/【译】框架与库的差异 - https://juejin.im/post/5c5fe3e751882561dd7b4e9bVue.js——60分钟快速入门 - https://www.cnblogs.com/keepfool/p/5619070.html“本文已收录至我的 Github 程序员成长系列 【More Than Java】学习不止 Code欢迎 starhttps://github.com/wmyskxz/MoreThanJava个人公众号 wmyskxz个人独立域名博客wmyskxz.com坚持原创输出下方扫码关注2020与您共同成长非常感谢各位人才能 看到这里如果觉得本篇文章写得不错觉得 「我没有三颗心脏」有点东西 的话求点赞求关注求分享求留言创作不易各位的支持和认可就是我创作的最大动力我们下篇文章见点击留言
