网站维护方式,网站建设全域云,禁用wordpress插件更新,做网站建设的MVVM 什么是MVVM#xff1f; MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化#xff0c;让我们将视图 UI 和业务逻辑分开。 View层#xff1a; 视图层 在我们前端开发中#xff0c;通常就是 DOM 层。 主要的作用是…MVVM 什么是MVVM MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化让我们将视图 UI 和业务逻辑分开。 View层 视图层 在我们前端开发中通常就是 DOM 层。 主要的作用是给用户展示各种信息。 Model层 数据层 数据可能是我们固定的死数据更多的是来自我们服务器从网络上请求下来的数据。 在我们计数器的案例中就是后面抽取出来的 obj 当然里面的数据可能没有这么简单。 ViewModel层 视图模型层 视图模型层是 View 和 Model 沟通的桥梁。 一方面它实现了 Data Binding 也就是数据绑定将 Model 的改变实时的反应到 View 中 另一方面它实现了 DOM Listener 也就是 DOM 监听当 DOM 发生一些事件 ( 点击、滚动、 touch 等 ) 时可以监听到并在需要的情况下改变对应的 Data 。 options
在上一章的HelloWorld中我们创建Vue实例的时候需要传入一个options对象。 这个options对象可以包含哪些属性 文档 https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE 目前我们需掌握如下属性 el: – 类型string | HTMLElement – 作用决定之后Vue实例会管理哪一个DOM。 data: – 类型Object | Function 组件当中data必须是一个函数 – 作用Vue实例对应的数据对象。 methods: – 类型{ [key: string]: Function } – 作用定义属于Vue的一些方法可以在其他地方调用也可以在指令中使用。 而随着学习的深入我们还需要掌握其它的属性这些我们将在后面的学习中提及。 文本插值 在使用数据绑定前需在 Vue 组件对象内声明所需的变量 data() { msg: Hello Vue! } 数据绑定最基础的形式是文本插值使用 “Mustache” 语法双花括号 spanMessage: {{ msg }}/span Mustache 标签会被相应数据对象的 msg属性的值替换。每当这个属性变化时它也会更新。 templatedivh2 aligncenter文本插值/h2hr显示字符串的值brmsg{{msg}}br/div
/template
scriptexport default({name: Mustache,//全局变量整个页面可以访问data(){return {msg: 这是一个字符串变量}},})
/script绑定属性 Vue.js 在数据绑定内支持全功能的 JavaScript 表达式如下
{{ number 1 }}
{{ age 18 ? 成年 : 未成年 }}
{{ message.split().reverse().join() }}表达式将在所属的 Vue 实例的作用域内计算。每个绑定只能包含单个表达式。
!-- 这是一个语句不是一个表达式 --
{{ var a 1 }}
!-- 流程控制也不可以可改用三元表达式 --
{{ if (ok) { return message } }}计算属性 在模板中绑定表达式是非常便利的但是它们实际上只用于简单的操作。 如果需要多于一个表达式的逻辑应当使用计算属性。 示例 templatedivh2 aligncenter文本插值/h2hr显示字符串的值brmsg{{msg}}bra{{a}},b{{b}}br/div
/template
scriptexport default({name: Mustache,//全局变量整个页面可以访问data(){return {msg: 这是一个字符串变量,a:1,}},/*计算属性在computed里面定义的变量不允许在data里面定义在compted里面定义的变量与在data里面定义的变量效果是一样的说明computed计算属性内部必须定义函数b()相当于一个b变量的get方法在data中定义的变量名称不能与computed中定义的函数同名但可以当做data中定义的变量一样使用*/computed:{//相当于变量b的get方法既是定义变量b同时也是定义变量b的get方法//不允许使用data中定义的变量对自己赋值b(){return this.a1;}}})
/script结果a1, b2 说明 computed 计算属性内部必须定义函 数 b() 相当于一个 b 变量的 get 方法 在 data 中定义的变量 名称 不能与 computed 中定义的函数同名但可以当做 data 中定义的变量一样使用 指令插值 v-text指令主要是防止页面首次加载时 {{}} 出现在页面上。将对象中数据变量值显示在绑定的标签内容上。 h1 v-text”msg”/h1 h1 {{ msg }} /h1 后者在页面首次加载时可能会出现 {{ msg }} v-html指令 v-html 指令类似于 v-text 指令 ; 它 与 v-text 区别在于 v-text 输出的是纯文本浏览器不会对其再进行 html 解析但 v-html 会将其当 html 标签解析后输出 。 v-html 指令应尽量避免使用否则会带来危险 (XSS 攻击 跨站脚本攻击 ), 一般只在可信任内容上使用 v-html 永不用在用户提交的内容上 ; templatedivh2 aligncenter文本插值/h2hr显示字符串的值brmsg{{msg}}brmsg1{{msg1}}brnumber{{number}}brnumber{{number1}}br你的年龄是{{this.age}}岁,你是{{age18?成年:未成年}}人。bra{{a}},b{{b}}br!--v-html 指令类似于 v-text 指令;它与v-text区别在于v-text输出的是纯文本浏览器不会对其再进行html解析但v-html会将其当html标签解析后输出。v-html 指令应尽量避免使用否则会带来危险(XSS攻击 跨站脚本攻击),一般只在可信任内容上使用 v-html永不用在用户提交的内容上;--span v-texttest()/spanspan v-htmltest2()/span/div
/template
scriptexport default({name: Mustache,//全局变量整个页面可以访问data(){return {msg: 这是一个字符串变量,msg1: 这是字符串变量2,age:16,number:1,a:1,score:90}},/*计算属性在computed里面定义的变量不允许在data里面定义在compted里面定义的变量与在data里面定义的变量效果是一样的说明computed计算属性内部必须定义函数b()相当于一个b变量的get方法在data中定义的变量名称不能与computed中定义的函数同名但可以当做data中定义的变量一样使用*/computed:{//相当于变量b的get方法既是定义变量b同时也是定义变量b的get方法//不允许使用data中定义的变量对自己赋值b(){return this.a1;}},//生命周期created(){},methods:{test(){return h2使用-v-text属性返回函数值/h2},test2(){return h2使用v-html属性的返回值/h2}}})
/script本人从事软件项目开发20多年2005年开始从事Java工程师系列课程的教学工作录制50多门精品视频课程包含java基础jspweb开发SSH,SSMSpringBootSpringCloud,人工智能在线支付等众多商业项目每门课程都包含有项目实战上课PPT及完整的源代码下载有兴趣的朋友可以看看我的在线课堂
讲师课堂链接https://edu.csdn.net/lecturer/893
