vue.js
基础知识
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
<div id="app">
{{message}}
</div>
<script>
var app = new Vue({
el: '#app', //挂载要管理的元素
data: {//定义数据 数据需要{{}}定义
message: 'Hello Vue!'
}
})
</script>
循环：
v-for=“item in movies”
<div id="app">
{{message}}
<ul>
<li v-for="item in movies">
{{item}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app', //挂载要管理的元素
data: {//定义数据 数据需要{{}}定义
message: 'Hello Vue!',
movies:["hero","gone with the wind","flippe"]
}
})
</script>
计数器
v-on：click 绑定函数
可以用@click (语法糖)
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="counter_block">
<h2>当前计数：{{counter}}</h2>
<button v-on:click="add">+</button>
<button v-on:click="subtraction">-</button>
</div>
<script>
const counter_block=new Vue({
el:"#counter_block",
data:{counter:0},
methods:{
add:function(){
console.log("add 被执行")
this.counter++
},
subtraction:function(){
console.log("subtraction 被执行")
this.counter--
}
}
})
</script>
</body>
mvvm
1.view上的事件监听与回调
2.数据绑定 将model的数据绑定到dom中
■View层:
➢视图层
➢在我们前端开发中，通常就是DOM层。
➢主要的作用是给用户展示各种信息。
■Model层:
➢数据层
➢数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
➢在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。
■VueModel层:
➢视图模型层
➢视图模型层是View和Model沟通的桥梁。
➢一方面它实现了Data Binding， 也就是数据绑定，将Model的改变实时的反应到View中
➢另一方面它实现了DOM Listener， 也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时， 可以监听到，并在需要的情况下改变对应的Data。
vue(options)
创建vue实例的时候，传入了一个对象option
el: 决定vue实例管理哪一个dom 类型：string\html element
data:vue实例对应的数据对象 类型：object\function(组件当中data必须是一个函数)
methods：定义属于vue的一些方法，可以在其他地方调用 类型：{[key:string]:Function}
vue的生命周期
beforeCreate( 创建前 )
在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。
created ( 创建后 ）
实例已经创建完成之后被调用，在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el没有。 然而，挂在阶段还没有开始, $el属性目前不可见，这是一个常用的生命周期，因为你可以调用methods中的方法，改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上，，获取computed中的计算属性等等，通常我们可以在这里对实例进行预处理，也有一些童鞋喜欢在这里发ajax请求，值得注意的是，这个周期中是没有什么方法来对实例化过程进行拦截的，因此假如有某些数据必须获取才允许进入页面的话，并不适合在这个方法发请求，建议在组件路由钩子beforeRouteEnter中完成
beforeMount
挂在开始之前被调用，相关的render函数首次被调用（虚拟DOM），实例已完成以下的配置： 编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。
mounted
挂在完成，也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。
beforeUpdate
在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程
updated（更新后）
在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用，调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用
beforeDestroy（销毁前）
在实例销毁之前调用，实例仍然完全可用，
- 这一步还可以用this来获取实例，
- 一般在这一步做一些重置的操作，比如清除掉组件中的定时器 和 监听的dom事件
destroyed（销毁后）
在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用
基础语法
mustache语法
<div id="app">
<h2>
{{firstname}} {{lastname}}
{{firstname+lastname}}
{{firstname+" "+lastname}}
</h2>
</div>
<script>
const=new VUE({
el:"#app",
data:{
firstname:"lexie"
lastname:"tan"
}
})
</script>
v-once
v-once 能够让标签的内容，也就是{{str}}中，data里面的某个数据例如str，保持在vue的data初始化之后，str的第一个值 即修改之后不改变页面的显示
<div v-once>{{str}} </div>
v-html
使显示的内容为超链接
<div v-html="url"></div>//显示为超链接
<script>
const=new VUE({
el:"#app",
data:{
url:"<a herf="www.baidu.com">baidu</a>"
}
})
</script>
v-text
渲染普通文本
v-pre
不渲染 直接显示标签后面数据 例：显示{{message}}
v-cloak
当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。
在vue解析之前 属性中有v-cloak 在vue解析之后该属性消失
故依据此，对样式进行设定：display=none 来解决闪动问题
<style>
[v-cloak]{
display:none
}
</style>
<div id="app" v-cloak>
{{message}}
</div>
动态绑定 v-bind
前面都是将值插入到模板中，但是希望属性也动态绑定，就可以采用v-bind
例如在下面的代码中 img的src属性需要动态绑定一个数据（数据可变 ）
语法糖
v-bind: :
<div id="app">
<img v-bind:src="img_url" alt="">
<!--错误写法 属性绑定不能使用mustache语法-->
<!--<img src="{{img_url}}" alt="">-->
</div>
<script>
const app=new VUE({
el:"#app",
data:{
img_url："www.baidu.com"
}
})
</script>
v-bind 在 类上的使用
用法一：直接通过一个{}绑定一个类{key:bool}
用法二：通过判断传入多个值
用法三：和普通类共存 普通类可以标定固定格式属性，判断类可以通过函数需修改
用法四：如果过于复杂，可以放在一个methods或者computed中
<!--用法一-->
<h2 class="{active:true,line:true}">hello world</h2>
<!--用法二-->
<h2 id="app" :class="{active:isActive,line:isLine}">hello world</h2>
<script>
const app=new VUE({
el:'#app'
data:{
isActive:true
isLine:true
}
})
</script>
<!--用法三-->
<h2 id="app" class="title" :class="{active:isActive,line:isLine}">hello world</h2>
<script>
const app=new VUE({
el:'#app'
data:{
isActive:true
isLine:true
}
methods:{
btnClick:function(){
this.isActive=!this.isActive
this.isLine=!this.isLine
}
}
})
</script>
<!--用法四-->
<h2 id="app" :class="getClass()">hello world</h2>
<script>
const app=new VUE({
el:'#app'
data:{
isActive:true
isLine:true
}
methods:{
getClass:function(){
return {active:isActive,line:isLine}
}
}
})
</script>
v-bind在style上的应用
:style={key(属性名):value(属性值)}
50px必须加上单引号，否则当成一个变量去解析
<h2 :style="{frontSize:'50px'}">
{{message}}
</h2>
<h2 :style="{frontSize:finalsize+'px'"> {{message}}</h2>
v-on
该函数用于事件监听
v-on:click="function()"
//语法糖
@click
@keyup
@mousemove
通过methods中定义方法，以供@click的调用时，需要注意参数问题
该方法不需要额外参数，方法后面（）可以不加。但是如果该方法中有一个参数，那么默认将原生事件event参数传递进去
如果需要从传入某个参数，同时需要event时，可以通过$event传入事件
v-on的修饰符
.stop 此修饰符能够阻止事件冒泡
<!--点击btn后 div与btn的函数都被触发（事件冒泡）-->
<div @click="clickdiv">
<button @click="clickbtn">
按钮
</button>
</div>
<script>
var app=new Vue(){
el:'#app'
methods:{
clickdiv(){
consloe.log("clivkdiv")
},
clickbtn(){
consloe.log("clivkbtn")
}
}
}
</script>
<!--增加.stop修饰符后，只触发btn函数 （事件冒泡）被阻止-->
<div @click="clickdiv">
<button @click.stop="clickbtn">
按钮
</button>
</div>
.prevent 阻止默认事件
.{keyCode|keyAlias} 监听某个键盘的按键
.once只触发一次
v-if、v-else
<h2 v-if="true">
如果为真显示内容
</h2>
<h2 v-if="flag">
为真显示此内容
</h2>
<h2 v-else>
flag为假显示此内容
</h2>
<div id="app">
<p v-if="score>=90">优秀</p>
<p v-else-if="score>=80">良好</p>
<p v-else-if="score>=60">及格</p>
<p v-else>不及格</p>
</div>
v-show
<!--v-if:当条件为false时，包含v-if指令的元素，根本就不会存在dom中-->
<h2 v-if="false" ia="aaa">
{{massage}}
</h2>
<!--v-show:当条件为false时，v-show只是给我们的元素添加了一个行内样式：display:none-->
<h2 v-show="false" ia="aaa">
{{massage}}
</h2>
v-for
v-for遍历数组
names=['tom','jerry','lucy']
<!--在遍历过程中，没有使用索引值-->
<ul>
<li v-for="item in names">{{item}}</li>
</ul>
<!--在遍历过程中，使用索引值-->
<ul>
<li v-for="(item,index) in names">{{index}}+{{item}}</li>
</ul>
v-for遍历数组
info:{name:'tom',age:18,height:188}
<!--在遍历过程中，只获取值-->
<ul>
<li v-for="item in info">{{item}}</li>
</ul>
<!--在遍历过程中，只获取键值对-->
<ul>
<li v-for="(key,value) in info">{{key}}:{{value}}</li>
</ul>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pEMe3SKn-1624939602282)(exp.assets/image-20210628110650794.png)]
数组响应式
响应式
push
pop
shift（删除数组第一个元素）
unshift（数组添加第一个元素）
splice（删除、插入、替换）
sort
reverse
非响应式
通过索引修改数组中的元素
v-model
实现表单元素和数据的双向绑定
<input type="text" v-model="message">
<!--这样你修改data中的数据或者修改页面中的数据，都能够实现对另一个的修改-->
v-model实际上是一个语法糖，本质上包含了两个指令：v-bind绑定和v-on事件完成后修改
<input type="text" v-bind:value="message" @input="message=$event.targrt.value">
v-model在单选中的应用
<div id="model">
<label for="male">
<input type="radio" id="male" value="男" v-model="sex">男
</label>
<label for="female">
<input type="radio" id="female" value="女" v-model="sex">女
</label>
<h2>您选择的性别是{{sex}}</h2>
</div>
<script>
var model=new Vue({
el:"#model",
data:{
sex:" 您未选择性别"
}
})
</script>
修饰符
lazy修饰符可以让数据在失去焦点或者回车时更新
number修饰符可以让输入框中输入的内容自动转成 数字类型
trim修饰符可以过滤掉内容左右两边的空格
计算属性
计算属性：可以理解为能够在里面写一些计算逻辑的属性。. 作用：1）减少模板中的计算逻辑. 2）数据缓存。. 当我们的数据没有变化时，不在执行计算的过程. 3）依赖固定的数据类型（响应式数据），不能是普通的传入的一个全局数据.
计算属性一般没有set方法，只有get方法，是一个只读属性，故不需要使用函数（）
计算属性与方法有较多相似之处，计算属性是具有缓存的，当我们的数据没有变化时，不在执行计算的过程 方法不管数据变没变都要执行
<h2>
总价格：{{totalprice}}
</h2>
<script>
const app=new Vue({
el:'#app'
data:{
books:[{id:100,name:"unix编程艺术",price:100},
{id:101,name:"c++编程艺术",price:110},
{id:102,name:"java编程艺术",price:115} ]
},
computed:{
totalprice:function(){
let result=0
for(book in this.books){
result+=book.price
}
return result
}
}
})
</script>
（ES6语法）
let与var
var变量只分全局作用域与函数作用域 但是没有块级作用域
ES5之前因为if和for都没有块级作用域的概念，所以在很多时候，都必须借助function的作用域来解决变量的问题
ES6中let是有if和for 的块级作用域
//两个函数都可以访问name变量（没有块级作用域）
{
var name="tom"
console.log(name)
}
console.log(name)
//在循环完成之后才进行事件监听 故只能输出第5个按钮（监听函数是异步执行）
var btns=doucument.getElementsByTagName("button");
for(var i=0;i<btns.lenngth;i++){
btns[i].addEventListener('click',function(){console.log("第"+i+"button")})
}
//使用闭包可以解决该问题
var btns=doucument.getElementsByTagName("button");
for(var i=0;i<btns.lenngth;i++){
function(i){
btns[i].addEventListener('click',function(){console.log("第"+i+"button")})
}
}
//使用let
var btns=doucument.getElementsByTagName("button");
for(let i=0;i<btns.lenngth;i++){
btns[i].addEventListener('click',function(){console.log("第"+i+"button")})
}
//let与var的区别
let相当于有块级作用域，起了一个块内保护的作用
执行完循环后，每一个i都被保护起来了
{
i=0
btns[i].addEventListener('click',function(){console.log("第"+i+"button")})
}
{
i=1
btns[i].addEventListener('click',function(){console.log("第"+i+"button")})
}
但是var函数是执行完，由于，没有快保护，都是最后一次循环的数据
{
i=4
btns[i].addEventListener('click',function(){console.log("第"+i+"button")})
}
{
i=4
btns[i].addEventListener('click',function(){console.log("第"+i+"button")})
}
const
将某个变量修改成常量，不可再次赋值
使用const时变量必须赋值
指向的对象不能修改，但是对象内的属性可以改变
const obj={age:12}
obj.age=13
增强写法
对象的增强写法
const age=12
const name="tom"
//es5写法
const obj={
age=age,
name=name
}
//es6写法
const obj={
age,
name
}
函数的增强写法
//es5
const obj={
run:function(){}
}
//es6
const obj={
run(){}
}
高级函数
三个需求 找出数组中小于100 将这些数*2 计算总和
传统写法
nums=[12,45,66,102,456,890,34]
//需要创建两个数组，进行三次遍历//结果为314
let new_nums=[]
for (let n of nums){
if(n<100){
new_nums.push(n)
}
}
let new2_nums=[]
for(let n of new_nums){
new2_nums.push(n*2)
}
let total=0
for(let n of new2_nums){
total+=n
}
高级函数写法
//过滤器函数，得到新的数组
let new_nums=nums.filter(function(n){return n<100})
//映射函数，得到*2之后的数组
let new2_nums=new_nums.map(function(n){return n*2})
//reduce函数实现累加
let total=new2_nums.reduce(function(preValue,n){return preValue+n},0)
// pre n
//第一次 0 24
//第二次 24 90
//第三次 114 132
//第四次 246 68
//total 314
简略写法
let total=nums.filter(function(n){return n<100}).map(function(n){return n*2}).reduce(function(preValue,n){return preValue+n},0)
更简略的写法
let total=nums.filter(n=>n<100).map(n=>n*2).reduce((pre,n)=>pre+n)
293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
