一、vue基础入门
作者:互联网
一、vue基础入门
一、声明式渲染
Vue.js的核心是一个允许采用简洁的模板语法来声明数据渲染进DOM系统,如下:
1 <div id="app"> 2 <!-- 渲染 --> 3 {{ message }} 4 </div> 5 6 <script type='text/javascript'> 7 var app = new Vue({ 8 el: '#app', 9 data: { 10 // 声明变量 11 message: 'Hello Vue!' 12 } 13 }) 14 </script>
二、组件化
组件系统是vue的一个重要概念,因为它是一种抽象的允许我们使用小型、独立和通常可复用的“小积木”构建大型应用。几乎任何类型的应用界面都可以抽象为一个组件树。
三、开发模式
开发模式:一个项目开发的方式或者标准,开发模式≠设计模式
1、MVC
MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写
一种软件设计典范,用一种业务逻辑(C)、数据(M)、界面显示(V)分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑。
1、用户可以向 View 发送指令(DOM 事件),再由 View 直接要求 Model 改变状态。
2、用户也可以直接向 Controller 发送指令(改变 URL 触发 hashChange 事件),再由 Controller 发送给 View。
3、Controller 非常薄,只起到路由的作用,而 View 非常厚,业务逻辑都部署在 View。
优点:耦合性低,重用性高,部署快,可维护性高,有利于软件工程化管理
缺点:由于模型model和视图view要严格的分离,给前端程序带来了很大的困难,每次操作需要彻底的测试
2、MVP
MVP是Model-View-Presenter简称,MVP是从经典的模式MVC演变而来
它们的基本思想有相通的地方Controller/Presenter负责逻辑的处理,Model提供数据,View负责显示:
1、各部分之间的通信,都是双向的。
2、View 与 Model 不发生联系,都通过 Presenter 传递。可以将一个Presenter用于多个视图,而不需要改变Presenter的逻辑。这个特性非常的有用,因为视图的变化总是比模型的变化频繁。
3、View 非常薄,不部署任何业务逻辑,称为"被动视图"(Passive View),即没有任何主动性,而 Presenter非常厚,所有逻辑都部署在那里。
缺点:由于对视图的渲染放在了Presenter中,所以视图和Presenter的交互会过于频繁。一旦视图需要变更,那么Presenter也需要变更了。
3、MVVM
M:model,普通的javascript数据对象
V:view,前端展示页面
VM:ViewModel,用于双向绑定数据与页面,就是vue的实例
MVVM 模式将 Presenter 改名为 ViewModel,基本上与 MVP 模式完全一致。唯一的区别是,它采用双向绑定(data-binding):View的变动,自动反映在 ViewModel,反之亦然。这种模式下,页面输入改变数据,数据改变影响页面数据展示与渲染
优点:
1、避免直接操作DOM , 降低DOM操作的复杂性。
2、低耦合。视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
3、可重用性。你可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。
4、可测试。界面素来是比较难于测试的,而现在测试可以针对ViewModel来写。
四、Hello World
使用Vue.js实现输出“Hello World”案例:
1 <body> 2 <!-- 1. 定义用于填充数据的标签 --> 3 <div id="app">{{msg}}</div> 4 </body> 5 <!-- 2. 引入vue.js库文件 --> 6 <script src="./js/vue.js"></script> 7 <script type="text/javascript"> 8 // 3. 使用vue语法实现需求 9 var vue = new Vue({ 10 // 4. 将vue提供的数据填充到“第1步”中的标签里 11 el: "#app", 12 data: { 13 msg: "Hello World", 14 }, 15 methods:{...} 16 }); 17 </script>
vue实例分析:vue参数对象属性
1、el:元素挂载的位置,值可以是css选择器或者DOM元素
2、data:数据模型,值是一个对象
3、methods:定义方法,可以在其他地方调用,也可以在指令中使用
4、生命周期函数
5、...
插值表达式:{{msg}}将数据填充到html标签中
五、vue devtools工具
通过chrome中的谷歌插件商店安装Vue Devtools工具,此工具帮助我们进行vue数据调试所用,一定要安装。
六、模板语法
插值表达式(Mustache):是vue框架提供的一种在html模板中绑定数据的方式,使用{{变量名}}方式绑定vue实例中data中的数据变量,会绑定的数据实时的在视图中显示出来
插值表达式的写法支持使用:
1、变量名
2、部分简单JavaScript表达式:{{}}括起来的区域,就是js语法区域,在里面可以写部分的js语法,不能写var a = 10;分支语句;循环语句
3、三元运算符
4、方法调用(方法必须要先声明)
1 <body> 2 <div id="app"> 3 <!-- 直接使用变量名 --> 4 <h5>{{name}}</h5> 5 <!-- 运算 --> 6 <h5>{{name + '--好的'}}</h5> 7 <h5>{{ 1 + 1 }}</h5> 8 <!-- 使用函数 --> 9 <h5>{{title.substr(0,6)}}</h5> 10 <!-- 三目运算 --> 11 <h5>{{ age > 18 ? '成年' : '未成年'}}</h5> 12 </div> 13 </body> 14 <script src="./js/vue.js"></script> 15 <script> 16 var vm = new Vue({ 17 el: "#app", 18 data: { 19 title: "我是一个标题,你们看到没有", 20 name: "张三", 21 age: 20, 22 }, 23 }); 24 </script>
标签:vue,入门,基础,视图,Presenter,Vue,Model,View 来源: https://www.cnblogs.com/tricker65535/p/14979033.html