今日内容概要

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

前端发展介绍

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

Vue的快速使用

1.概念
Vue(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架
与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。
渐进式框架：
可以一点一点的使用它，只用一部分，也可以整个工程都使用它。

2.M-V-VM思想
MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，是一种事件驱动编程方式。

• Model：vue对象的data属性里面的数据，这里的数据要显示到页面中；
• View：vue中数据要显示的HTML页面，在vue中，也称之为“视图模板”；
• ViewModel：vue编写代码时的vm对象，它是vue.js的核心，连接View和Model数据的中转，保证视图和数据的一致性。（双向数据绑定：JS中变量变了，HTML中数据也跟着改变）
  

3.组件化开发，单页面开发

• 组件化开发
  类似于DTL中的include，每一个组件的内容都可以被替换和利用。
  
  有自己独立的html，css，js
• 单页面开发
  只需要一个页面，结合组件化开发来替换页面中的内容；
  页面的切换只是组件的替换。

4.Vue引入方式

• CDN的方式引入

• 下载后导入
  其实就是直接在浏览器中打开https://cdn.jsdelivr.net/npm/vue/dist/vue.js，然后复制下来，创建一个js文件再粘贴进去

5.简单使用

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

插值语法

1.语法

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

指令系统之文本指令

1.概念
写在[任意]标签上，以v-xx开头的，都是vue的指令。
2.文本指令

指令	释义
v-html	让HTML渲染成页面
v-text	标签内容显示js变量对应的值,如果之前有数据覆盖掉
v-show	放一个布尔值：为真标签就显示；为假标签就不显示
v-if	放一个布尔值：为真标签就显示；为假标签就不显示

vi-show与v-if的区别：
v-show：标签还在，只是不显示了（display:none）
v-if：直接操作DOM，删除/插入标签

3.代码展示

文本指令 v-text
cqg
文本指令 v-html
文本指令 v-show
src="https://www.keaitupian.cn/cjpic/frombd/1/253/967204653/61677996.jpg" alt="" width="300px" height="300px">
文本指令 v-if
点我拿头像

指令系统之事件指令

1.事件指令

指令	释义
v-on	放在标签上：v-on:事件名=‘函数’
@	v-on:事件名=‘函数’ 简写成 @事件名=‘函数’

事件名可以写：click，dbclick
input标签：change，blur，input

2.补充------es6对象写法：

var name = 'lqz'
var age = 19
var obj = {name,age,handleClick() {} }

3.代码展示

事件指令
点我显示消失
事件指令函数带参数
函数需要参数，但是没有传，默认会把event事件传入
函数需要参数传值，但是传值了
函数需要3个参数，但是只传了1个
函数需要2个参数，一个传了事件，一个传字符串

指令系统之属性指令

1.事件指令

指令	释义
v-bind	v-bind:属性名=‘变量’
:	v-bind:属性名=‘变量’ 简写成 :属性名=“变量”

写在标签上的 name，class,href,src,id…属性

=2.代码展示

属性指令
点我看心仪头像
点我换头像
点我自动选头像