第三阶段-day5-7_Vue
1 Vue
1.1 Vue的定义
Vue.js------ 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合(非常容易导入第三方轮子)。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持开发复杂单页应用。
- 渐进式:从核心到完备的全家桶(需要什么引用什么)
Vue本身语法内容并不多, 生态是很庞大的
https://cn.vuejs.org/index.html
可以到这里来学
- 增量:从少到多,从一页到多页,从简单到复杂
- 单文件组件: 一个文件描述一个组件
- 单页应用: 经过打包生成一个单页的html文件和一些js文件
为什么要讲vue? 项目前端都是Vue, 国内前端框架市场基本上70%以上都是使用vue这个框架
或者, 不是用框架写的前端 ( 旧的项目jsp 模板技术 )
框架: 工程化的角度
所谓框架, 就是在工程化实现一个东西的时候, 构建的大的轮廓, 和提供一些基础性的设施
后来者,或者使用者, 可以在这个框架的基础上, 迅速的把要实现的目标实体快速构建出来
- vue基本语法(简单)
- 简洁,轻量,快速,数据驱动,模块友好,组件化
现在的前端是组件化的天下
1.2 Vue课程
分为两部分
1, 先讲vue基本语法
2, 怎么创建项目--> 在vue中开发页面--->打包项目---> 怎么部署
我们平时写的简单的java语句，是从main函数启动的，但你想，淘宝也是从main启动的么？一定不是，main函数启动运行结束之后，程序运行结束。程序挂掉了，还有对象吗？
没了。对象里面有方法，有数据，对象对我们来说是有意义的，所以必须要求对象是存活的。
如何保证对象存活？
把代码整理，打包后，实际上就是对java代码、class文件进行汇总，类似于一个压缩包一样，把这个打包后的文件放到某个地方，让某个东西帮你来运行出对象，让对象保证存活。别人就可以去访问，根据存活的对象去处理一些逻辑。这个过程叫部署。
Java需要这样做，前端其实也需要这样，以保证外部对其能正确的访问。
为了便于理解，我们首先会在html页面把vue基本语法讲清楚, 先借助html页面来实现vue
但这样是有问题的，毕竟html并不是一个专门用来写Vue的东西
Vue的标准写法是在.vue文件中来实现
1.3 一个Vue页面用html
安装vue
方法二引入的是一个资源文件，在cdn.jsdelivr.net这个服务器上，假如没有网，这个服务器不能打开。所以我们不这样。直接把它下载。
用浏览器访问这个网址 https://cdn.jsdelivr.net/npm/vue@2.6.11
这样的话，还是要走网络请求，但走的是本机。断网了还是能访问到。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./vue.js">script>
head>
<body>
<div id="root">
{{msg}}
{{msg + aaa}}
div>
<script>
// new了一个vue对象
// 这个vue对象通过,对象的el属性, 与el属性所指向的id所对应的html代码关联起来
// 把对象和对应html域关联起来
// data标识vue对象的数据存储属性(除了vue对象固有的属性, 别的属性一般存在data里)
new Vue({
el: '#root',//el:后面是字母L，不是数字1
data: {
msg: 123,
aaa: 2000
}
})
script>
body>
html>
Dom解析：从上到下解析。
解析到div时，里面的{{msg}}、{{msg + aaa}}不变，还不知道是什么东西，就在页面上显示{{msg}}、{{msg + aaa}}，就像普通字符一样。
一直向下解析，解析到script时，创建了一个vue对象，
把这个对象创建出来了之后，它开始找这个对象所指向的el,一个id= root的东西
就又回去看div,发现确实有id= root的东西，
接着它就发现里面有{{msg}}、{{msg + aaa}}表达式的东西，是vue语法
接着，它在vue对象的data中找，看有没有msg,有就替换掉，有没有aaa,有就替换掉。
就显示出了结果。
写vue，第一步，就是把vue语法导进来，很多同学经常忘
1.4 V指令
- V-bind
- V-model
- V-text
- V-html
- V-show
- V-if
- V-else
- V-else-if
- V-for
- V-on
- V-pre
- V-cloak
- v-once
1.5 .1 V-bind: 单向绑定
v-bind: 用来绑定数据和属性以及表达式，缩写为’：’
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="vue.js">script>
head>
<body>
<div id="root">
{{msg}}
{{inputStr}}
<div v-bind:title='aaa'>
我是一个div
div>
<div :title='aaa'>
我是一个div
div>
<input v-bind:value="inputStr">
div>
<script>
new Vue({
el: "#root",
data: {
msg: 1234,
aaa: '我是一个vue对象中的值',
inputStr: 'inputStr...'
}
})
script>
body>
html>
1.5.2 V-model: 双向绑定
v-model：实现双向数据绑定
v-model: 双向绑定, 改变或者绑定,是个双向的
- 和v-bind作用相同, 去对应的vue对象里的data取值, 把取到的值赋值给所绑定的对象
- v-model绑定的参数, 当这个参数(在html中)发生改变的时候, 他会同时去修改对应vue对象中data里面所对应的值
- 注意: 双向绑定v-model: 一般用于表单元素的value属性，所以有时候可以省略的写 v-model="***"
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="vue.js">script>
head>
<body>
<div id="root">
{{msg}}
<input v-bind:value="msg">
<input v-model:value="msg">
<input v-model="msg">
<select v-model="msg">
<option value="123">123option>
<option value="321">321option>
select>
div>
<script>
new Vue({
el: '#root',
data: {
msg: 123
}
})
script>
body>
html>
1.5.3 V-text v-html
类似于dom操作中的 innerText innerHTML
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="vue.js">script>
head>
<body>
<div id="root">
<div v-text="aaa">div>
<div v-html="bbb">div>
div>
<script>
new Vue({
el:'#root',
data: {
aaa: 'aaaa',
bbb: 'bbbb'
}
})
script>
body>
html>
1.5.4 V-on: 事件监听
v-on: 绑定事件监听器。可简写@
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="vue.js">script>
head>
<body>
<div id="root">
{{msg}}
<input v-model="aaa">
<button v-on:click="f1">点击button>
<button @click="f1">点击button>
div>
<script>
// function f1() {
// alert(123)
// }
new Vue({
el: '#root',
data: {
msg:123,
aaa: ''
},
methods:{
f1: function () {
this.msg = this.aaa
}
}
})
// 耦合:
// 解耦: 写程序, 贯穿我们整个程序生涯是始终
// 把强关联性的东西变成弱关联
script>
body>
html>
耦合就是相互交织在一起。一个东西嵌套另一个东西，嵌套得特别紧密。
两个方法很紧密，为什么不写成一个方法，要写成两个方法？东西多了，可能出现问题，不好改。写成多个，好修改。
分布式——为了避免一个服务挂掉，整个服务挂掉。
1.5.5 V-show
v-show:标签控制隐藏, (display设置none)
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="vue.js">script>
head>
<body>
<div id="root">
<div v-show="bool">
我是一个div
div>
<div v-show="msg=='1234'">
我是一个div
div>
<div v-show="'123'">
我是一个div123
div>
<button @click="change1">隐藏和显示button>
div>
<script>
new Vue({
el:'#root',
data: {
bool: false,
msg: '123'
},
methods: {
change1: function () {
this.bool = !this.bool
}
}
})
script>
body>
html>
1.5.6 V-if
v-else-if v-else
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="vue.js">script>
head>
<body>
<div id="root">
<div v-if="bool1">
div1
div>
<div v-else-if="bool2">
div2
div>
<div v-else>
div3
div>
div>
<script>
new Vue({
el: '#root',
data: {
bool1: true,
bool2: false
}
})
script>
body>
html>
v-if和v-show的区别:
v-if逻辑中,如果不满足加载条件, 那么该元素不会挂载到dom树上去. 但是v-show 无论显示与否, 都会挂载到dom树上,是不过会显示和不显示
1.5.7 V-for
在vu中对应的html代码中创建一个循环结构
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="vue.js">script>
head>
<body>
<div id="root">
<div v-for="(aaa, index) of list" :key="index">
{{aaa}}--{{index}}
div>
<div v-for="item in list2" :key="item.id">
<img :src="item.src">
div>
<button @click="f1">点击button>
div>
<script>
new Vue({
el:'#root',
data:{
list: ['1', '22', '333', '4444'],
list2: [{
id: 1,
src: '1111.png'
},
{
id: 2,
src: '2222.png'
}
]
},
methods: {
f1: function () {
this.list2[0].src = '1234.png'
}
}
})
script>
body>
html>
案例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="vue.js">script>
head>
<body>
<div id="root">
<div v-for="(item, index) in list" :key="index" @click="delete1(index)">
{{item}}
div>
<input v-model="inputstr"><button @click="add">添加button>
div>
<script>
new Vue({
el: '#root',
data: {
list: ['123', '456', '789'],
inputstr: ''
},
methods: {
add: function () {
this.list.push(this.inputstr)
this.inputstr = ''
},
delete1: function (parm) {
this.list.splice(parm, 1)
}
}
})
script>
body>
html>
1.5.8 V-pre
v-pre可以用来阻止预编译，有v-pre指令的标签内部的内容不会被编译，会原样输出。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="vue.js">script>
head>
<body>
<div id="root">
<div v-pre>
{{msg}}
div>
div>
<script>
new Vue({
el: '#root',
data: {
msg: 123
}
})
script>
body>
html>
1.5.9 v-cloak
- 延迟显示。
- 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 标签直到实例准备完毕
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="vue.js">script>
<style>
[v-cloak]{
/*display: none;*/
font-size: 100px;
background: red;
}
style>
head>
<body>
<div id="root">
<div v-cloak>
{{msg}}
div>
div>
<script>
// setTimeout 在多少毫秒秒之后,执行什么什么东西
setTimeout('f()', 3000)
function f() {
new Vue({
el:'#root',
data:{
msg: 4444
}
})
}
script>
body>
html>
如果vue对象没创建，div中v-cloak是一个自定义属性，在style标签中对这个属性做了监控：如果有这个属性，就让他隐藏掉display: none
当vue对象加载出来了，它看到里面的v-cloak，就立马把div中的v-cloak干掉，style中的属性选择器就没有对应的属性了，div中的内容就会显示出来了。
1.5.10 V-once
只加载一次(只编译一次)
- 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="vue.js">script>
head>
<body>
<div id="root">
<div v-once>
{{msg}}
div>
{{msg}}
<input v-model="msg">
div>
<script>
new Vue({
el: '#root',
data: {
msg: 123
}
})
script>
body>
html>
重点
V指令, 好好练一下
day5作业
1, 注册页面, ----dom操作---> vue操作(dom操作不要)
2, 汇率换算------dom操作---> vue操作(dom操作不要)
把dom操作换成绑定, 数据移到vue对象的data
demo1
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="vue.js">script>
head>
<body>
<div id="root">
<table cellspacing="10" >
<tr>
<td>注册邮箱:td>
<td><input>td>
tr>
<tr>
<td>td>
<td>你还可以使用手机注册td>
tr>
<tr>
<td>创建密码:td>
<td><input>td>
tr>
<tr>
<td>真实姓名:td>
<td><input>td>
tr>
<tr>
<td align="right">性别:td>
<td>
<input type="radio" value="1" name="aaa">男
<input type="radio" value="2" name="aaa">女
td>
tr>
<tr>
<td align="right">生日:td>
<td>
<select>
<option>2000option>
<option>2000option>
<option>2000option>
<option>2000option>
select>年
<select>
<option>00option>
<option>00option>
<option>00option>
<option>00option>
select>月
<select>
<option>00option>
<option>00option>
<option>00option>
<option>00option>
select>日
td>
tr>
<tr>
<td align="right">我正在:td>
<td>
<select>
<option>学习option>
<option>睡觉option>
<option>机器学习option>
<option>00option>
select>
td>
tr>
<tr>
<td>td>
<td>
<img id="img1" :src="url"><span @click="changeImg" >看不清.换一张?span>
td>
tr>
<tr>
<td align="right">验证码:td>
<td><input id="inputStr" v-model="inputStr">td>
tr>
<tr>
<td>td>
<td>
<img @click="click1" src="btn_reg.gif">
td>
tr>
table>
div>
<script>
new Vue({
el:'#root',
data:{
listurl:["1111.png","1234.png","2222.png","3333.png","4567.png"],
listNum:['1111','1234','2222','3333','4567'],
midTag:-1, //记录前一次的验证码索引
url: "verycode.gif",
inputStr:''
},
methods:{
changeImg:function() {
var bool = true
//新验证码索引与前一次验证码索引值相同，则一直循环，直到值不同为止
while(bool){
var tag = Math.floor(Math.random()*this.listurl.length)
if(tag == this.midTag){
//新验证码索引与前一次验证码索引值相同
}else{
//索引值不同
bool = false
this.midTag = tag
}
}
this.url = this.listurl[this.midTag]
},
click1:function () {
if(this.midTag == -1){
if(this.inputStr == "bnksu"){
alert("验证码正确")
}else{
alert("验证码错误")
}
return
}
var str = this.listNum[this.midTag]
if(this.inputStr == str){
alert("验证码正确")
}else{
alert("验证码错误")
}
}
}
})
script>
body>
html>
demo2
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
select, button{
height: 30px;
}
input{
height: 20px;
}
.div2{
margin-bottom: 5px ;
}
td{
width: 200px;
height: 30px;
text-align: center;
}
[colspan] {
background: red;
}
.div1{
width: 610px;
margin: 0 auto;
}
style>
<script src="vue.js">script>
head>
<body>
<div class="div1" id="root">
<div class="div2">
<select id="select1" v-model="select1Value">
<option value="1">美元option>
<option value="2">人民币option>
<option value="3">欧元option>
<option value="4">日元option>
<option value="5">韩元option>
<option value="6">港元option>
select>
<button @click="change1">互换button>
<select id="select2" v-model="select2Value">
<option value="1">美元option>
<option value="2">人民币option>
<option value="3">欧元option>
<option value="4">日元option>
<option value="5">韩元option>
<option value="6">港元option>
select>
数额:
<input id="inputStr" v-model="inputStr">
<button @click="change2"> 按汇率换算button>
div>
<table border="1px">
<tr>
<td colspan="3">按当前汇率换算结果td>
tr>
<tr>
<td id="td11">{{td11}}td>
<td>汇率td>
<td id="td13">{{td13}}td>
tr>
<tr>
<td id="td21">{{td21}}td>
<td id="td22">{{td22}}td>
<td id="td23">{{td23}}td>
tr>
table>
div>
<script>
new Vue({
el:'#root',
data:{
listRate :[1, 7, 0.9 , 100, 1000, 7],
listM :['美元', '人民币', '欧元', '日元', '韩元', '港元'],
select1Value:1,
select2Value:1,
inputStr:'',
td11:'美元',
td13:'人民币',
td21:'100',
td22:'7',
td23:'700'
},
methods:{
change1:function() {
var mid = this.select1Value
this.select1Value = this.select2Value
this.select2Value = mid
},
change2:function() {
//select2.value - 1 是因为select2的value的下标是从1开始的。
var rate = this.listRate[this.select2Value -1] / this.listRate[this.select1Value -1]
var money = this.inputStr*rate
this.td11=this.listM[this.select1Value-1]
this.td13=this.listM[this.select2Value-1]
this.td21= this.inputStr
this.td22= rate
this.td23= money
}
}
})
script>
body>
html>
day6
1.5.10 回顾
v-bind: 单向绑定, 可以去vue对象的data里面取参数, 绑定到对应的属性上
v-model: 双向绑定 , 可以取值从Vue对象, 并且改变的话也会影响到vue对象中的值
相互关联, 相互影响
v-text: 向标签内部插入一个字符串
v-html: 向标签内部插入一个可以是字符串,也可以是携带html标签的代码段
v-on: 事件监听, 可以缩写成 @ , 监听一个方法触发到vue对象的methods里面
v-show: 隐藏和显示, 一定会挂载到dom树上
v-if 也可以做隐藏和显示(分支结构) 不一定, 满足挂载, 不满足不挂载
v-for: 循环渲染, 循环显示, 数组, for循环出来的是其所在标签
一定要有个 :key=’唯一值’
In/of
v-pre: 阻止预编译
v-cloak: 延迟加载
v-once: 只加载一次
1.6 计算属性
computed: 一个属性是通过别的属性计算而来, 是个属性(虽然看起来, 看起来像个方法, 但是外在表现是个属性)
计算属性所计算的时机: 当它依赖的属性发生变化的时候, 那么它就会重新计算
不是存在于data里的一个参数, 存在computed
computed: {
sum: function () {
return this.num1 + this.num2
}
},
用function来做
用computed来做
1.7 侦听器
watch: 监听器, 侦听一个vue对象中属性的变化, 然后触发一些操作
Watch: 是vue对象的一个固有属性, 里面写侦听器
注意: 我们如果想侦听那个参数发生改变, 侦听器的方法名就是该参数
watch: {
msg: function () {
this.changetimes ++
}
}
1.8 模板
Template: 模板是vue对象(此时此刻写法) 是一个以标签包裹的html代码块
模板会替换挂载的元素
- 一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略(除非模板的内容有分发插槽 v-solt)。
new Vue({ el:'#root', template: '<div>567div>', data: { msg: 123 } })
1.9 组件
把一个整体的东西拆分成不同的东西,
表现在我们前端里, 就是把一个页面拆分成不同的分块来实现
表现在我们vue里, 把一个页面, 拆分成多个vue对象来实现
在vue中更深层次的表现, 就是,把一个页面关联成一个vue对象(入口对象), 这个对象有一系列子对象(子对象通过某种途径和入口对象建立引用关系), 构建出一种类似于dom树结构, 组件树(对象树)
组件: 在vue中就是vue对象
如上图，左边是一个网页，一整个页面，首先是一个对象，一个绿色的小方块就是一个对象，通过某种途径，下面关联三个——浅灰色的vue对象，这三个vue对象分别处理这三块内容，第二个浅灰色，它下面又分了两个vue对象来处理；第三个浅灰色，它里面又分了三个深灰色vue对象来处理。
和dom树没有任何区别，只不过里面的dom节点，现在变成了vue对象，就是组件。
1.10 在html中有两种组件的写法
1.10.1 全局组件
1.10.2 局部组件
安装一下Node
默认安装
判断安装是否成功？
1.10.3 前后端分离
前端和后端分离: 工程上的分离, (分为前端项目, 分为后端项目)
对于前后端不分离的来说, 数据和前端代码的结合----服务器
前后端不分离的项目(前端和后端属于一个项目)
前后端分离的写法: 数据结合-----浏览器
1.10.4 组件间传值: 向下(父组件传给子组件)传值
Props
- props 用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。
v-bind : 单向绑定
传值:
至少要分两步,
第一步:递(父组件, 传递通过v-bind)
第二步: 接收(子组件接收, 通过 props)
1.10.5 组件间传值: 向上(子组件传递给父组件)
也要有两个动作:
1: 子组件通知父组件: emit
2: 父组件监听子组件: 自定义方法
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="vue.js">script>
head>
<body>
<div id="root">
<aaa v-for="(item, index) in list"
:key="index"
v-bind:bbb="item"
@ccc="delete1(arguments)"
>aaa>
div>
<script>
Vue.component('aaa', {
props: ['bbb'], // 不能修改
template: '{{bbb}}',
methods: {
click1: function () {
// this.$emit('ccc', 1) // 传递一个参数
this.$emit('ccc', 1, 2)
}
}
})
new Vue({
el:'#root',
data: {
list: [ '1' , '2', '3', '4']
},
methods: {
delete1: function (arguments) {
console.log('父')
console.log(arguments)
}
}
})
script>
body>
html>
点击删除
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="vue.js">script>
head>
<body>
<div id="root">
<aaa v-for="(item, index) in list"
:key="index"
v-bind:bbb="item"
v-bind:index="index"
@ccc="delete1"
>aaa>
div>
<script>
Vue.component('aaa', {
props: ['bbb', 'index'], // 不能修改
template: '{{bbb}}--{{index}}',
methods: {
click1: function () {
this.$emit('ccc', this.index) // 传递一个参数
}
}
})
new Vue({
el:'#root',
data: {
list: [ '1' , '2', '3', '4']
},
methods: {
delete1: function (parm) {
this.list.splice(parm, 1)
console.log(parm)
}
}
})
script>
body>
html>
Vue生命周期
从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
生命周期函数
- beforeCreate
- Created
- beforeMount
- Mounted
- beforeUpdtae
- Updated
- beforeDestroy
- destoryed
Vue的生命周期方法，是vue对象固有的
创建------挂载------改变-----销毁
beforeCreate:function () {
console.log("控制台打印:beforeCreate")
},
created:function () {
console.log("控制台打印:created")
},
beforeMount:function () {
//页面还未被渲染
console.log(this.$el),
console.log("控制台打印:beforeMount")
},
mounted:function () {
//页面渲染完成
console.log(this.$el),
console.log("控制台打印：mounted")
},
beforeDestroy:function () {
console.log("控制台打印：beforeDestory")
},
destroyed:function () {
console.log("控制台打印：destroyed")
},
beforeUpdate:function () {
console.log("控制台打印：beforeUpdate")
},
updated:function () {
console.log("控制台打印：updated")
}。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="vue.js">script>
head>
<body>
<div id="root">
{{msg}}
<input v-model="msg">
div>
<script>
var root = new Vue({
el:"#root",
data: {
msg: 123
},
beforeCreate:function () {
console.log("控制台打印:beforeCreate")
},
created:function () {
console.log("控制台打印:created")
},
beforeMount:function () {
//页面还未被渲染
console.log(this.$el),
console.log("控制台打印:beforeMount")
},
mounted:function () {
//页面渲染完成
console.log(this.$el),
console.log("控制台打印：mounted")
},
beforeUpdate:function () {
console.log("控制台打印：beforeUpdate")
},
updated:function () {
console.log("控制台打印：updated")
},
beforeDestroy:function () {
console.log("控制台打印：beforeDestory")
},
destroyed:function () {
console.log("控制台打印：destroyed")
}
})
script>
body>
html>
Destory方法，要借助浏览器展示，（是浏览器的方法）。
删除了root对象后，再update root,就不更新了。因为root对象已经被删除了。
还有三个没讲（不常用到）
2前端
2.1各种端的概念
前端,
移动web, webapp:
pc端 ,
小程序:
一个人: 前端的壁垒在哪
另一个人: 你谈什么壁垒, 你都被小程序打到家门口
Pwa: 让前端替代所有端
要替代一切可以显示的东西, 网页, app, 浏览器
暂时没有成功,
假如成功?
Wxml wxss js
H5 ,
大前端: (WEB统一): 前端统一所有端
游戏: 游戏引擎
app开发: 原生开发(贴近于底层语言开发, 安卓:java. 苹果: object-c ),
非原生开发: vue
2.3当下前端的核心
三个基础( html css js), 三个框架
3三大框架
3.1什么是框架 ?
一些基础性,准备性的东西
3.2什么是前端框架?
框架是一个半成品，
已经对基础的代码进行了封装并提供相应的API，
开发者在使用框架时直接调用封装好的api可以省去很多代码编写，从而提高工作效率和开发速度..
比如前端框架封装的一些功能: html文档操作，漂亮的各种控件（按钮，表单等等），可以帮助快速的构建网站.
3.3三个框架
前端现在基本上围绕着三大前端框架
3.3.1Vue
前端框架
尤雨溪 写的，上海人。在美国上大学，google工作，他写的Vue.
3.3.2React
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
3.3.3Angular
AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中
Angualr 基于 TypeScript 和 react、vue 相比, Angular 更适合中大型企业级项目。
3.4三个框架的对比
如果是JavaScript爱好者，使用React，因为它完全与JavaScript有关。
如果更喜欢灵活性，使用React。
如果喜欢在TypeScript中编码，选择Angular。
如果喜欢面向对象的编程，使用Angular。
如果喜欢干净的代码，使用Vue。
Vue提供最简单的学习曲线，是初学者的理想选择。(学习曲线比较平稳)
如果要在应用程序中分离关注点，使用Vue。
Vue非常适合小型团队和小型项目。如果应用程序很大并且具有重要的未来扩展计划，选择React或Angular。(不是很赞同)
Vue最容易: 学习曲线最平滑
React: 次之
Angular: 最难
Vue vue.js
4其它
4.1学习vue和开发vue前端项目我们要用到的
4.1.1 node 和npm
类比:( js->node , java->虚拟机 )
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型。
Npm: 包管理工具
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题
允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。
4.1.2 webpack
作用: 打包前端项目
webpack可以看做是模块打包机：
它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（TypeScript等），并将其转换和打包为合适的格式供浏览器使用.
简单的说就是打包，压缩各种静态资源的工具
目的à(性能优化,减少浏览器向服务器的请求次数,节约服务器的带宽资源)
4.1.3 ESLint
ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具
一些正规的公司，强制性用eslint，规范前端（每个语言都会经历 刚开始非常乱---慢慢规范起来的过程。前端现在处于非常乱的时期）
4.2前端里程碑和其它重要技术
jQuery: JavaScript框架(对js进行很多封装的东西)
提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计
TypeScript: 类似JavaScript
Js的超集
Microsoft 开发和维护的一种面向对象的编程语言。它是JavaScript的超集
Flutter:谷歌的移动UI框架
可以快速在iOS和Android上构建高质量的(不是纯原生)原生用户界面。
React Native:移动应用开发框架
Facebook的跨平台移动应用开发框架,框架 React 在原生移动应用平台的衍生产物
WEEX:移动应用开发框架
阿里项目,目前 Vue.js 和 Rax(阿里内部一个项目) 这两个前端框架被广泛应用于 Weex 页面开发
原生开发
Iosà Objective-C
Android->java
UI框架(组件)和UI
Ui: 工作职位, (艺术)
UI框架: 实际上是前端程序员,根据经验整理的一些具用共性的样式,图标 (java----第三方bao)
学前端路线
先把html、css、js三个基础的搞熟，多写点，再学框架。
有时间再学vue, 再看es6、webpack，再搞搞flutter（移动开发），如果不想搞移动开发，可以搞搞小程序。