10.24内容整理和概述
今日内容概要
内容目录
- 前端发展介绍
- Vue初识
- Vue初次使用解析
- 插值语法
- 指令系统
- ES6补充
前端发展介绍
发展历史：
1.前后端混合开发，前端数据由后端模板语法生成 # HTML(5)、CSS(3)、JavaScript(ES5、ES6)
2.Ajax的出现：后台发送异步请求，Render+Ajax混合
3.单用Ajax项目：前后端分离的雏形
4.Angular框架(JS框架)的出现：出现了“前端工程化”的概念
5.更见完善和便利的前端框架出现：React框架(外国人，大厂喜欢用)，Vue框架(国人喜欢用)
当下主流前端框架：
1.vue
2.react
3.uni-app
Vue初识
Vue框架：是一套用于构建用户界面的渐进式框架 # 渐进式框架：支持项目部分使用，也支持全工程使用
Vue相关开发工具：
1.vscode：微软免费的轻量级编辑器
2.vim：需要装插件 # 不推荐
3.webstorm：Jetbrains系列产品，好东西；需要付费
4.AndroidStadio：Jetbrains出厂，被谷歌买了版权，暂时免费
5.Pycharm：也需要装插件
架构解析：
1.MTV：django的架构 # MVC的演变
2.MVC：后端框架基础架构
3.MVVM：前端框架使用 # vue使用MVVM架构
4.MVP：移动端使用
vue框架特点：
1.采用MVVM架构，通过vm层监听m层，数据发生变化v层便立刻变化，不需要手动操作DOM
2.组件化开发：有自己独立的html，css，js
3.单页面开发：全项目只有一个html页面
Vue初次使用解析
代码例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script> # 引入vue
</head>
<body>
<div id="app">
<h1>vue快速使用</h1>
<p>名字：{{name}}</p> # {{}}是插值语法，会把{{}}内的变量在js的vue里做映射
<p>年龄：{{age}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: "#app", # 通过id找到对应标签，对该标签Vue实施管理
data: { # vue内部的数据，数据内的键值对在底层会显示在外层(和data同一层)，方便数据拿取
name: 'lqz',
age: 19
},
})
</script>
</html>
插值语法
插值符号：{{}} # 可以改，需要修改Vue的源码
使用条件：被vue托管的标签内使用
插值类型：
1.变量 # vue渲染完成后，前端显示都是字符串
1.字符串 # 例子：{{name}}
2.数组 # 例子：{{hobby[0]}}
3.对象 # 例子：{{wife}}，{{wife['name']}}
2.js简单的表达式 # 例子：{{10 > 9 ? '大于' : '小于'}}，{{age+1}}
3.函数
指令系统
定义：写在任意标签上，以v-xx开头的，都是vue的指令
pycharm安装指令提示插件：在Plugins中安装vue.js插件，然后重启
文本指令：
1.v-text：把变量渲染到标签中，如果之前有数据将其覆盖 # 例子：<p v-text="name">彭于晏</p>
2.v-html：如果是标签字符串，会把标签渲染出来
# 例子：<span v-html="a"></span> a:'<a href="http://www.baidu.com">点我</a>'
3.v-show：控制标签的显示与隐藏，底层是通过style的display控制的
# 例子： <img v-show='b' src="https://tva1.sinaimg.cn/large/0.jpg"> b:true
4.v-if：控制标签的显示与隐藏，底层是通过dom的增加和删除
# 例子：<div v-if="c"></div> c:true
事件指令：
使用结构：v-on:事件名='函数' # 放在标签上
事件名：
1.click
2.dbclick
'-input标签事件名-'
3.change
4.blur
5.input
...
例子：
无参函数：
'-body代码-'
<button v-on:click="handleShow">点我显示消失</button>
# v-on的简写
<button @click="handleShow">点我显示消失</button>
'-script代码-'
methods: {
handleShow: function () {
this.show = !this.show
},
# ES6函数定义的简便写法
handleShow() {
this.show = !this.show
},
}
有参函数：
'-body代码-'
<button @click="handleClick1('lqz')">有参函数</button>
<button @click="handleClick2($event,'lqz')">有参函数</button>
'-script代码-'
methods: {
handleClick1(name) {
console.log(name)
},
handleClick3(event,name){
console.log(event)
console.log(name)
}
}
有参函数总结：
1.没有向有函数传参，默认会把event事件传入
2.函数需要多个参数，传入参数数量不满足，则不满足的其他参数为undefined
3.$event内部提供的，作为将本事件传入函数
属性指令：
定义：控制标签属性的指令
应用背景：vue控制下的标签属性不能直接调用data和method内的变量，需要借助v-bind
使用模板：
1.v-bind:属性名='变量'
2.简写：" :属性名="变量" "
例子：
<img v-bind:src="url" alt="" width="300px" height="300px">
<div :id="id_div"></div>
ES6补充
var name = 'lqz'
var age = 19
ES5：var obj={name:name,age:age}
ES6：var obj = {name,age}
浙公网安备 33010602011771号