内容概览

• 前端发展介绍
• MVVM与组件化开发
• Vue的快速使用
• 插值语法
• 指令系统之文本指令
• 指令系统之事件指令
• 指令系统之属性指令

前端发展介绍

1. HTML(5)、CSS(3)、JavaScript(ES5、ES6、ES13)：编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 -> 在浏览器中查看# ECMA标准# JavaScript=ECMA+bom+dom
2. Ajax的出现 -> 后台发送异步请求，Render+Ajax混合
3. 单用Ajax（加载数据，DOM渲染页面）：前后端分离的雏形
4. Angular框架的出现（1个JS框架）：出现了“前端工程化”的概念（前端也是1个工程、1个项目）
5. React、Vue框架：当下最火的2个前端框架（Vue：国人喜欢用，React：外国人喜欢用）
6. 移动开发（Android+IOS） + Web（Web+微信小程序+支付宝小程序） + 桌面开发（Windows桌面）：前端 -> 大前端
7. 一套代码在各个平台运行（大前端）：谷歌Flutter（Dart语言：和Java很像）可以运行在IOS、Android、PC端
8. 在Vue框架的基础性上 uni-app：一套编码 编到10个平台主流：vue，react ，uni-apptypescript:包含了JavaScript并对扩展了对变量类型的规定less:包含了css并做了扩展

MVVM与组件化开发

"""
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架(可以在部分使用它,也可以整个项目都使用它)。
"""
"""开发vue的编辑器"""
1. vscode：微软 轻量级编辑器，免费
2. vim：装插件，搞得花里胡哨，开发代码
3. Jetbrains:IDEA(java)，Pycharm，Goland，phpStrom，webstorm   收费 吃内存(java开发)
4. AndroidStadio：免费，谷歌买了Jetbrains授权+ADTsun：java---》后来被甲骨文收购了--->oracle jdk   openjdk  毕昇jdkPycharm + 插件  开发vue 使用起来跟webstorm差不多把vue的源代码下载到本地或使用cdn开发环境版本，包含了有帮助的命令行警告https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js生产环境版本，优化了尺寸和速度https://cdn.jsdelivr.net/npm/vue@2"""M-V-VM思想"""
MVVM(Model-view-viewmodel):前端框架 vue 
MTV :django
MVC :后端框架一般基于这种架构
MVP：移动端"""组件化开发、单页面开发"""
组件化开发:页面中的一块区域有自己独立的html、css、js,可以直接将多个组装起来使用
单页面应用(SPA):只有一个html页面

Vue的快速使用

vue快速使用
名字:{{name}}
年龄:{{age}}

插值语法

vue快速使用
名字:{{name}}
年龄:{{age}}
爱好:{{hobby}}
第3个爱好:{{hobby[2]}}
wife:{{wife}}
wife的名字:{{wife['name']}}
wife的年龄:{{wife.age}}
标签:{{a}}
vue插值渲染简单表达式
{{10 > 9 ? '大于' : '小于'}}
{{age+1}}

指令系统之文本指令

写在任意标签上，以v-xxx开头的，都是vue的指令

• 文本指令
  • v-text：把变量渲染到标签中，如果之前有数据，会覆盖原有数据
  • v-html：如果是标签字符串，会把标签渲染到标签内
  • v-show：控制标签的显示与隐藏，通过标签的style的display控制的；style=“display:none;”
  • v-if：控制标签的显示与隐藏，通过dom操作删除或增加标签

文本指令v-text
文本指令v-html
v-show
v-if

指令系统之事件指令

放在标签上：v-on:事件名='函数'
事件名可以写：click,dbclick, input标签:change,blur,input
补充：es6 对象写法var name = 'lqz'var age = 19var obj={name:name,age:age, handleClick:function(){}}var obj = {name, age, handleClick() {}}  # 简写v-on:事件名='函数'  简写成  @事件名='函数'

事件指令
btn  
事件指令函数携带参数
函数需要参数但是没传,默认会把event事件传入第一个参数,多余的参数为undefined
函数需要参数且传入了参数,参数需要是数字,字符串,布尔值,变量
函数需要两个参数,一个事件,一个字符串

指令系统之属性指令

写在标签上的id、class、name等属性
v-bind:属性名='变量'
可以简写为  :属性名='变量'

属性指令
查看图片
切换图片