1 Vue
JQuery
在当下时代:
前端 --> 三个基础:html,css,js
三个框架: vue, react, Angular
所有的页面: 都可以直接用html css js 直接实现
所有的前端基础/框架 都是基于html css js
Vue开发者: 尤雨溪
量级: Angular > react > Vue
原生开发: 贴近于底层语言的开发,如果app要更新功能,用户就必须更新app
成本高
稳定/运行高速
前端:
混合开发: 原生技术 + 前端,大部分的app都是这个技术,比如淘宝
跨端开发: 慢
http://flutter.axuer.com/
https://reactnative.dev/
weex:
uni-app: 垃圾 bug多
1.1 Vue特点
1 Vue.js------ 渐进式框架。
与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。
Vue的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合(前端).
另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持开发复杂单页应用。 vue的源代码是js
2 渐进式:从核心到完备的全家桶 增量:从少到多,从一页到多页,从简单到复杂 单文件组件: 一个文件描述一个组件 单页应用: 经过打包生成一个单页的html文件和一些js文件
3 增量:从少到多,从一页到多页,从简单到复杂
写前端基本上就是一套网站,可能是由多个页面组成。Vue就可以让我们写一页也能供用户浏览,写多页也能供用户浏览,也就是可以不停的往已有的项目中添加东西。
Vue-router
Vuex
Axios
生态: 衍生内容/框架/产品
1.2 Vue
注意:Vue的底层是js
1, vue基础语法: 现在html讲基础语法, html问题(因为不是专门写vue)
2, Vue项目实现, 从无到有–> 用户使用
1.3 在HTML写一个Vue相关页面
1 首先要导入vue,有两种方式
a, 直接使用网址获得vue.js
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
b, 将此地址中的内容复制到vue.js文件当中,然后引用,这样更快
<script src="vue.js"></script>
2,创建Vue对象, 关联对应的html结点 (通过id属性 和 el属性 )
3, 当Vue对象和对应的html结点都解析之后, 建立绑定关系
4, 重新按照Vue语法解析对应vue作用域
1.4 V指令
1.4.1 V-bind: 单向绑定
v-bind: 把html的属性通过v-bind绑定一个Vue对象中的自定参数
把Vue对象中的自定参数, 绑定到对应的html作用域中的标签属性上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="root">
<!-- v-bind: 把html的属性通过v-bind绑定一个Vue对象中的自定参数-->
<!-- 把Vue对象中的自定参数, 绑定到对应的html作用域中的标签属性上-->
<!-- 这里竟然多加了空格就会出错 -->
<a v-bind:href="url1">百度</a>
<div v-bind:title="msg">
div
</div>
</div>
<script>
new Vue({
el: "#root",
data: {
url1: "https://www.baidu.com",
url2: "https://www.taobao.com",
url3: "https://www.jd.com",
msg: "123",
imgUrl: './1111.png'
}
})
</script>
</body>
</html>
1.4.2 V-model: 双向绑定
v-model: 双向绑定, (只能用于表单元素的value值)
建立一个双向绑定关系, 相互引用, 相互影响
1.4.3 V-on: 监听事件
V-on: 监听一个事件, 触发到Vue对象中去
进一步简写成 @
<body>
<div id="root">
<!-- <button v-on:click="f">click</button> -->
<button @click="f">click</button>
</div>
<script>
new Vue({
el: "#root",
data: {
msg: "chaos is the ladder"
},
methods: {
f: function () {
alert(this.msg)
}
}
})
</script>
</body>
1.4.4 Inner
V-text
V-html
<body>
<div id="root">
<span v-text="msg"></span>
<div v-text="msg1"></div>
<div v-text="msg2"></div>
<div v-html="msg2"></div>
<div v-html="msg3"></div>
<div v-text="msg3"></div>
</div>
<script>
new Vue({
el: "#root",
data: {
msg: "chaos is the ladder",
msg1: "suk",
msg2: "flower",
msg3: "<b>flower</b>"
}
})
</script>
1.4.5 V-show: 隐藏和显示
v-show: 可以根据真和假 做到隐藏或者显示
<body>
<!--v-show: 可以根据真和假 做到隐藏或者显示-->
<div id="root">
<div v-show="1==1">
表达式
</div>
<div v-show="bool">
v-show
</div>
<button v-on:click="chagebool">点击</button>
</div>
<script>
new Vue({
el: "#root",
data: {
bool: false
},
methods: {
chagebool: function () {
this.bool = !this.bool
}
}
})
</script>
</body>
1.4.6 V-if: 分支语句
V-if
V-else
V-else-if
<body>
<div id="root">
<div v-if="1==1">
v-if
</div>
<div v-if="bool1">
v-if
</div>
<div v-else-if="bool2">
v-else-if
</div>
<div v-else>
v-else
</div>
</div>
<script>
new Vue({
el: "#root",
data: {
bool1: false,
bool2: true
}
})
</script>
</body>
注意:
v-show如果不显示,依旧在dom树上存在, 只是通过css把对应标签显示隐藏起来
v-if分支中, 如果不满足条件, 不显示的话, 是不会加载到dom树上去的
1.4.7 V-for: 循环
V-for
增加li和删除li:
<body>
<div id="root">
<ul>
<li v-for="(item, index) in list" v-bind:key="index" @click="deleteli(index)">
{{item}}--{{index}}
</li>
</ul>
<input v-model:value="inpustr"><button @click="addli">添加</button>
</div>
<script>
new Vue({
el: "#root",
data: {
list: ["zs", "ls", "wu", "zl", "zs"],
inpustr: ''
},
methods: {
addli: function () {
this.list.push(this.inpustr)
this.inpustr= ""
},
deleteli: function (index) {
// alert(index)
this.list.splice(index, 1)
}
}
})
</script>
</body>
注意1: 如果v-for循环遍历一个内容, 那么会渲染出多个v-for语法所在的标签
比如如下: 把v-for写在li标签上, 那么如果list数组有x个元素, 那么就会渲染出x个li标签
注意2:
- 对于v-for循环遍历, 每一个遍历出来渲染的标签, 都必须有唯一的key
这个key不是给我们用的(指程序员) - key的作用:标记谁需要重新加载, 比如一个内容很多的页面,你对一个内容点了不感兴趣,页面就将其删除,只重新渲染这一部分就好,用key来标识哪一部分需要重新渲
- key一般也不会用下标,而是后端给的id,id一般是数据库的标识
注意3:
1.4.8 V-pre: 阻止预编译
<body>
<div id="root">
{{msg}}
<div v-pre>
{{msg}} ----{{aaa}}
</div>
</div>
<script>
new Vue({
el: "#root",
data: {
msg: "zs"
}
})
</script>
</body>
1.4.9 V-once: 只编译一次
1.4.10 V-cloak
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../vue.js"></script>
<style>
[v-cloak]{
/*
js没有加载出来,不希望用户看到插值表达式,像Googlefont的bug那样,所以隐藏起来
*/
display: none;
}
.div1{
font-size: 100px;
background: #ffc7bb;
}
</style>
</head>
<body>
<!-- V-cloak: 延迟加载-->
<div id="root">
<div v-cloak class="div1">
{{msg}}
</div>
</div>
<script>
setTimeout("f()", 5000)
function f() {
new Vue({
el: "#root",
data: {
msg: "zs"
}
})
}
</script>
</body>
</html>
Java -> class --> jar war
Vue项目 --> 一个html页面, 多个css 多个js文件
Nuxt -->服务端渲染
1.5 计算属性:
不常用: 一般用到一些, 依赖于别的数据, 又自己本身几乎不会修改的场景
计算属性: (注意是个属性), 计算属性是通过别的属性计算而来, 依赖于别的属性而存在
computed: 指的是一个属性通过其他属性计算而来。
1.6 侦听器/监听器
watch: 监听一个属性的改变, 当属性改变的时候触发事件
1.7 模板和组件
思想
1.7.1 模板
template: 一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略.
把一切东西都转到Vue对象中管控起来( 参数, 方法, html)
1.7.2 组件
component: 在Vue中, 一个Vue对象就是一个组件
1.8 生命周期
什么是生命周期: 在这个地方一个Vue对象从创建到消亡的过程
创建 挂载 修改 销毁
都是异步.
beforeCreate
Created :这个时候去后台取数据
beforeMount
Mounted :挂载,html代码、js代码、对象,加载到DOM树上,这叫挂载。
beforeUpdtae
Updated
beforeDestroy
destoryed
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="root">
{{msg}}
<input v-model:value="msg">
</div>
<script>
var root = new Vue({
el: "#root",
data: {
msg: "zs"
},
beforeCreate:function () {
console.log("控制台打印:beforeCreate")
},
created:function () {
console.log("控制台打印:created")
},
//挂载,就本例子来说,Vue对象和div代码块建立联系就叫挂载
//挂载之前是{{msg}}
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")
}
})
//常用的只有:created和mounted,一般用于初始化数据的时候
//浏览器请求页面的时候,html页面是一个空的页面(没数据),数据得去后端取,
//Vue对象控制去后端取数据,调用浏览器发请求。
//什么时候取,created创建的时候和挂载的时候。
//取出来放在data里面去显示它
</script>
</body>
</html>