网站的种类,虹口区网站建设,最好的扁平化网站,seo优化厂商一、vue框架介绍
1、什么是Vue#xff1f;
Vue (读音 /vjuː/#xff0c;类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是#xff0c;Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层#xff0c;不仅易于上手#xff0c;还便于与…一、vue框架介绍
1、什么是Vue
Vue (读音 /vjuː/类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层不仅易于上手还便于与第三方库或既有项目整合。另一方面当与现代化的工具链以及各种支持类库结合使用时Vue 也完全能够为复杂的单页应用提供驱动。
2、Vue框架的构造
Vue采用了M-V-VMModel-View-ViewModel的思想它是一种基于前端开发的架构模式也是一种事件驱动的编程方式。除了M-V-VM还有其他一些常见的架构模式 例如 MTVModel-Template-ViewMVCModel-View-ControllerMVPModel-View-Presenter。 然而 在前端开发中MVVM和组件化开发、单页面开发SPA结合使用的情况比较普遍。 目前Vue的最新版本是Vue4但并没有公司在使用 主流的公司项目基本上会采用Vue3而老项目仍然继续使用Vue2。
3、MVC和MVVM的区别
1MVC
MVC 是 Model View Controller 的缩写 Model模型层是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。 View视图层用户界面渲染逻辑通常视图是依据模型数据创建的。 Controller控制器数据模型和视图之间通信的桥梁通常控制器负责从事图读取数据控制用户输入并向模型发送数据。 **MVC的思想**Controller负责将Model的数据用View显示出来换句话说就是在Controller里面把Model的数据赋值给View。
**MVC的特点**实现关注点分离即应用程序中的数据模型与业务和展示逻辑解耦。就是将模型和视图之间实现代码分离松散耦合使之成为一个更容易开发、维护和测试的客户端应用程序。
MVC的优点 耦合度低视图层和业务层分离 重用度高 生命周期成本低 可维护性高 部署快
MVC的缺点 不适合小型项目的开发 视图与控制器间的过于紧密的连接视图与控制器是相互分离但却是联系紧密的部件妨碍了他们的独立重用 降低了视图对模型数据的访问依据模型操作接口的不同视图可能需要多次调用才能获得足够的显示数据。对未变化数据的不必要的频繁访问也将损害操作性能。
**MVC的应用**主要用于中大型项目的分层开发。
MVC的例子 举一个例子页面有一个 id 为 container 的 span点击按钮会让其内容加 1
view
divspan idcontainer0/spanbutton idbtn/button
/divcontroller
const button document.getElementById(btn);
// 响应视图指令
button.addEventListener(click, () {const container document.getElementById(container);// 调用模型add(container);
}, false);model
function add (node) {// 业务逻辑处理const currentValue parseInt(node.innerText);const newValue currentValue 1;// 更新视图node.innerText current 1;
}这样就把数据更新分的比较明确了。
2MVVM
MVVM是Model-View-ViewModel的简写即模型-视图-视图模型。 Modal模型指的是后端传递的数据。 View视图指的是所看到的页面。 ViewModal视图模型mvvm模式的核心它是连接view和model的桥梁。主要用来处理业务逻辑 它有两个方向 一是将模型转化成视图即将后端传递的数据转化成所看到的页面。实现的方式是数据绑定。 二是将视图转化成模型即将所看到的页面转化成后端的数据。实现的方式是DOM 事件监听。
这两个方向都实现的就是数据的双向绑定。
MVVM的特点 在MVVM的框架下视图和模型是不能直接通信的它们通过ViewModal来通信ViewModel通常要实现一个observer观察者当数据发生变化ViewModel能够监听到数据的这种变化然后通知到对应的视图做自动更新而当用户操作视图ViewModel也能监听到视图的变化然后通知数据做改动这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。
MVVM的优点
MVVM模式的主要目的是分离视图View和模型Model有几大优点 低耦合视图View可以独立于Model变化和修改一个ViewModel可以绑定到不同的View上当View变化的时候Model可以不变当Model变化的时候View也可以不变。 可重用性可以把一些视图逻辑放在一个ViewModel里面让很多view重用这段视图逻辑。 独立开发开发人员可以专注于业务逻辑和数据的开发ViewModel设计人员可以专注于页面设计使用Expression Blend可以很容易设计界面并生成xml代码。 可测试界面向来是比较难于测试的而现在测试可以针对ViewModel来写 双向数据绑定它实现了View和Model的自动同步当Model的属性改变时不需要手动操作Dom元素来改变View的显示而是改变属性后该属性对应View层显示会自动改变
MVVM适用场景 适合数据驱动的场景数据操作比较多的场景
二、vue简单使用
1、第一个Hello World
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
!-- 本地引入--
!-- script src./vue/vue.js/script--
!-- CDN引入--script srchttps://cdn.bootcdn.net/ajax/libs/vue/2.7.0/vue.min.js/script
/head
body
div idd1h1{{s}}/h1
/div
/body
script typetext/javascriptvar vm new Vue({el: #d1,data: {s: Hello World}})
/script
/html2、Vue的响应式原理
响应式原理数据变了—页面会变数据也会变
1理解代理对象
// 定义源对象obj1
let obj1 {name:张三,age:20
}
//定义代理对象obj2代理源对象obj1
let obj2 obj1
console.log(obj2:,obj2);
// 代理对象修改了源对象的数据
obj2.name 李四
obj2.age 30
console.log(obj1); // {name: 李四, age: 30}2Vue的data和_data
// 定义源对象
let myData {name: 张三,age: 20
}
let mx new Vue({// 将源对象传递给Vue的data背后做了两件事// 1、设置Vue实例的_data属性作为当前源对象的代理对象。响应式的核心// 2、将_data里面代理的所有数据再添加到当前Vue实例身上也就是vm身上。方便直接调用数据
})
// 通过改变vue实例的属性可以改变源对象的属性值
mx.name 王五
mx.age 40
console.log(myData); // {name: 王五, age: 40}3给对象添加属性的多种方式
第一种方式使用点 .第二种方式使用中括号 [ ]第三种方式使用Object.defineProperty方法
// 方式一
let obj3 {}
obj3.name 张三
// 方式二
obj3[age] 20
//方式三
// 这种方式给对象添加成员尽管繁琐但是可以配置更多的功能。
// 默认添加的属性是不允许删除的如果要允许删除就需要添加configurable配置。
// 默认添加的属性是不允许枚举的所谓枚举指的就是遍历。
Object.defineProperty(obj3,sex,{// 属性值value:男,// 允许被枚举默认不允许enumerable:true,// 允许被删除默认不允许configurable:true
})
// 枚举出对象的所有属性其实就遍历出对象的所有属性名
// 如果sex属性没有设置允许被枚举就不能被枚举
for(let key in obj3){console.log(key);
}
// 通过delete关键可以删除对象身上的指定属性
delete obj3.name
delete obj3.sex // 如果sex属性没有设置允许被删除就不能被删除三、模版语法
1、介绍
模版语法也可以叫做插值表达式插值表达式用户把vue中所定义的数据,显示在页面上.。插值表达式允许用户输入JS代码片段。
2、语法
插值语法使用 {{}}–必须是定义再data中的数据例如{{ 变量名/对象.属性名 }}{{}}中可以放字符串数字对象数组函数执行修改变量值三目运算符。{{}}中不可以放 不能定义变量不能渲染标签
3、案例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src./vue/vue.js/script/head
body
div idapph1字符串{{name}}/h1h1数字{{age}}/h1h1对象:{{userinfo}}--取对象的值{{userinfo.name}}/h1h1数组{{hobby}}---数组取值{{hobby[0]}}/h1h1运算{{1111}}----》变量运算{{ageuserinfo.height}}/h1h1三目运算符{{1110?真:假}}---变量形式{{b?为真:为假}}/h1h1标签{{a}}/h1h1可以放函数执行/h1h1var a 100---不行/h1h1修改变量值{{age99}}/h1h1修改变量值{{age}}--》age和age的区别是前一个先计算再赋值后一个先赋值再计算/h1
/div
/body
scriptvar vm new Vue({el: #app,data: {name: xiao,age: 19,userinfo: {name: 刘大板, height: 168},hobby: [篮球, 足球, 乒乓球],b: true,a: a hrefhttp://www.baidu.com点击有惊喜/a}})
/script
/html
