一个构建数据驱动的web界面的渐进式其框架,Vue.js的目标提供尽可能简单的API就可以满足我们的日常开发,官网:https://cn.vuejs.org/。学习此框架需要有HTML、CSS和JavaScript的一些基础。
1.2 MVVM模式
MVVM是Modle-View-ViewModel的简写,是MVC的改进版。MVVM就是将其中View的状态和行为抽象化,让我们将视图(html和dom元素)和业务逻辑分开,分开后我们直接曹组模型数据就等同于html的dom元素。
MVVM模式和MVC模式一样,主要目的是分离视图(View)和模型(Model)。
Vue.js是一个提供了MVVM风格的双向数据绑定的JavaScript库,专注于View层。它的核心是MVVM中的VM,也就是ViewModle。ViewModel负责连接View和Model,保证视图和数据的一致性,这种轻量级的架构让前端开发更加高效、便捷。
1.3 VueJS快速入门
首先需要在官网上下载一个vuejs的文件,这个自己操作一下,接着创建一个html文件
{{message}} new Vue({ el:'#app', //表示当前vue对象接管了div区域 data:{ message:'hello vue' //注意不要写分号结尾 } });
在浏览器中打开
1.4插值表达式
数据绑定最常见的形式就是使用"Mustache"语法(双大括号)的文本插值,Mustache标签会被替代为对应数据对象上的属性的值。当绑定对象上属性发生变化是,插值处的内容都会更新。
Vue.js都提供了完全的对JavaScript表达式的支持。
{{ number + 1}}
{{ true ? 'YES' : 'NO'}}
这些表达式会在所属Vue实例的数据作用域下作为JavaScript被解析。有个限制是每个绑定都只能包含单个表达式,所以下面的例子都不会生效。
1
2 {{ var a = 1}}
3
4 {{ if (ok) { return message } }}
示例:
{{message}}
{{ true ? "OK" : "No" }}
{{number*3.14}}
// 创建Vue对象 new Vue({ el: "#app",// 由vue接管id为app区域 data: { message: "Hello Vue!",//注意:此处不要加分号 number: 100 } });
动力节点推出的Vue js视频教程全套免费下载,这是一套超级详细的Vue js项目视频教程,本套Vue js实战视频适合Vue js零基础学员学习,这套视频教程通俗易懂,是你学习Vue js的好帮手。
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.