Vue框架——基本知识点+示例（2）
01 总结
使用vue
1.引入框架；
2.实例化对象；
3.配置参数;**
vue指令
v-cloak
v-if 和 v-show
v-html 和 v-text
v-pre 和 v-once
v-model
v-bind
v-on
v-for
02 发微博
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<textarea name="" id="" cols="30" rows="10" v-model="val">textarea>
<button v-on:click="send()">发布微博button>
<ul>
<li v-for="(item,index) in list">
<p>{{item.con}} {{item.date}}p>
<span v-on:click="del(index)">Xspan>
li>
ul>
div>
<script src="js/vue.js">script>
<script>
new Vue({
el:'#app',
data:{
val:'',
list:[
{
con:'昨日天气',
date:'20200706'
},
{
con:'昨日天气',
date:'20200706'
},
{
con:'昨日天气',
date:'20200706'
}
]
},
methods:{
send(){
if (this.val==''){
alert('请输入内容');
}else {
var date = new Date();
date = date.getFullYear()+'0'+(date.getMonth()+1)+'0'+date.getDate();
this.list.unshift({
con: this.val,
date: date
});
this.val=''
}
},
del(a){
this.list.splice(a,1);
}
}
})
script>
body>
html>
03 Tab栏
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
overflow: hidden;
}
ul li{
float: left;
padding: 4px 10px;
}
.current{
background-color: #FF6600;
}
style>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in listTop" v-on:click="change(index)" v-bind:class="{current:index==msg}">
{{item}}
li>
ul>
<section>
<div v-for="(item,index) in listCon" v-show="msg==index">{{item}}div>
section>
div>
<script src="js/vue.js">script>
<script>
new Vue({
el:'#app',
data:{
msg:0,
listTop:[
'公告',
'规则',
'论坛',
'安全',
'公益'
],
listCon:[
'公告内容',
'规则内容',
'论坛内容',
'安全内容',
'公益内容'
]
},
methods:{
change(a){
this.msg=a;
}
}
})
script>
body>
html>
04 v-if
1.if(){ }else if(){ }else{ }；
2.类似于之前的if else语句，else if语句可以有多个情况：
v-if
v-else
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<ul id="app">
<li v-if="num==1">1li>
<li v-else>2li>
ul>
body>
<script src="js/vue.js">script>
<script>
var vm = new Vue({
el:'#app',
data:{
num:1
}
})
script>
html>
05 watch监听数据
watch监听数据，有变化的时候执行
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<button v-on:click="add()">按钮button>
{{num}}
<br>
{{msg}}
div>
<script src="js/vue.js">script>
<script>
new Vue({
el:'#app',
data:{
num:0,
msg:'hello'
},
//watch监听数据,有变化的时候执行
watch:{
// 数据名(){} 要监听谁就写谁的名字
num(){
console.log('num发生变化了');
},
msg(){
console.log('msg发生变化了');
}
},
methods:{
add(){
this.num++;
this.msg=this.msg+'1'
}
}
})
script>
body>
html>
06 computed
1.计算属性，效率比较高，数据存储在缓存里面。如果数据不变化去缓存读数据；
2.写在了computed里面，数据不会发生变化，除非里面的变量值发生改变
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<button v-on:click="add()">加法button>
<br><br>
{{t}}
<br><br>
{{msg+num+Math.random()}}
<br><br>
{{n}}
div>
<script src="js/vue.js">script>
<script>
new Vue({
el:'#app',
data:{
num:1,
msg:2,
t:3
},
//计算属性，效率比较高，数据存储在缓存里面。如果数据不变化去缓存读数据
computed:{
n(){
return this.msg+this.num+Math.random();
}
},
methods:{
add(){
this.t++;
// this.num++;
}
}
})
script>
body>
html>
07 自定义全局指令
1.自定义全局指令：Vue.directive(‘指令名字’,{钩子函数})；
2.使用指令：
①v-指令名字:参数 ；
②v-指令名字=参数(变量处理) ；
③无参数 v-指令名字
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="../../../../../../17外包1班/FileRecv/library.js">script>
head>
<body>
<div id="app">
<input type="text" id="txt">
<button v-on:click="change()">切换button>
<button v-color:red v-if="show">{{msg}}button>
<p v-color:blue>dfghjgp>
<div v-color="yellow">waerdfgbdiv>
<div v-color>asdfgasfddiv>
div>
<div id="box">
<p v-color:orange>waesrgbnp>
div>
<script src="js/vue.js">script>
<script>
//
Vue.directive('color',{
//钩子函数（框架提供的对外接口，可以进行操作） bind inserted unbind update 可选
bind(el,obj){
console.log(el,obj);
console.log('绑定到元素身上了');
},
inserted(el,obj){
console.log(el,obj)
// el当前标签,obj指令相关的参数
// obj.arg用户传递参数(通过 v-指令名字：参数 传递)
// obj.value(通过 v-指令名字=参数(变量处理) 传递)
// 在inserted里面实现指令的功能
// if (obj.arg){
// //这串代码的意思是：如果 【v-指令名字：参数】 传递的 arg 存在，则执行el.style.color=obj.arg，
//否则传递的是 【v-指令名字=参数(变量处理)】 对象的 value ，执行el.style.color=obj.value;
// el.style.color=obj.arg;
// }else {
// el.style.color=obj.value;
// }
//v-color
el.style.background='red';
console.log('标签插入到文档中了');
},
unbind(el,obj){
console.log('解除绑定')
},
update(el,obj){
console.log('数据有更新')
}
})
new Vue({
el:'#app',
data:{
//v-指令名字=参数(变量处理)，此时的yellow被当作变量处理，需要被定义
yellow:'green',
//v-if控制标签是否存在，可以用来检测unbind方法，标签变化可以引起标签解绑和数据更新
show:true,
msg:0
},
methods:{
change(){
this.show=!this.show;
//检测update()方法
this.msg++
}
}
})
new Vue({
el:'#box'
})
script>
body>
html>
08 自定义局部指令
自定义局部指令 directives:{
指令名字:{
钩子函数 bind inserted update unbind
内部结构和全局指令一样
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<input type="text" v-focus v-color>
div>
<script src="js/vue.js">script>
<script>
new Vue({
el:'#app',
// 自定义局部指令 directives:{
// 指令名字:{
// 钩子函数 bind inserted update unbind
// 内部结构和全局指令一样
// }
// }
directives:{
color:{
inserted(el){
el.style.background='red';
}
},
focus:{
inserted(el){
//自动聚焦
el.focus();
}
}
}
})
script>
body>
html>
09 自定义全局过滤器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
{{1 | mul(98)}}
<br>
{{1 | mul}}
<br>
{{'aaa' | Cap}}
div>
//
<script src="js/vue.js">script>
<script>
// Vue.filter('mul',(n)=>{
// if (n<10){
// return '0'+n+'元';
// }else {
// return n+'元'
// }
// })
//Vue.filter('过滤器的名字',(n,b,a)=>{}) 第一个参数代表的是要处理的数据 其余参数是可选参数
//使用过滤器 {{所要处理的数据 | 过滤器名字}} 如果没有多余参数，直接数据即可，否则要加括号(12)
Vue.filter('mul',(n,a,b)=>{
if (a){
console.log(a);
return n+a;
}else {
console.log(b)
return b+':没有传递参数';
}
})
Vue.filter('Cap',(n)=>{
return n.slice(0,1).toUpperCase()+n.slice(1,n.length);
})
new Vue({
el:'#app'
// data:{
//
// }
})
script>
body>
html>
10 自定义局部过滤器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
{{'asdfg'|Cap}}
<br>
{{a | mul}}
<br>
{{1 | mul(123)}}
div>
<script src="js/vue.js">script>
<script>
new Vue({
el:'#app',
filters:{
Cap(n){
return n.slice(0,1).toUpperCase()+n.slice(1,n.length);
},
mul(n,a){
// if (n<10){
// return '0'+n+'元';
// }else {
// return n+'元'
// }
if(a){
return n+a;
}else {
return '没有传递参数'
}
}
}
})
script>
body>
html>
11 生命周期
生命周期指的是一个对象从创建到销毁的过程
<html lang="en">
<head>
<meta charset="UTF-8">
<title>生命周期title>
head>
<body>
<div id="app">
<p id="txt">{{msg}}p>
div>
<script src="js/vue.js">script>
<script>
//
var vm = new Vue({
el:'#app',
data:{
msg:'hello world'
},
beforeCreate() {
console.log('beforeCreate....');
console.log(txt.innerHTML); //{{msg}}
//打印$el 代表的是绑定的标签
console.log(this.$el); //undefined
console.log(this.msg); //undefined
},
created(){
console.log('created....');
console.log(txt.innerHTML); //{{msg}}
console.log(this.$el); //undefined
console.log(this.msg); //hello world
},
//挂载之前
beforeMount(){
console.log('beforeMount....');
console.log(txt.innerHTML); //{{msg}}
console.log(this.$el); //...
console.log(this.msg); //hello world
},
//挂载成功
mounted(){
console.log('mounted....');
console.log(txt.innerHTML); //hello world
console.log(this.$el); //...
console.log(this.msg); //hello world
},
// 销毁实例对象 vm.$destroy()
beforeDestroy() {
console.log('beforeDestroy....')
},
destroyed(){
console.log('destroyed....');
},
beforeUpdate() {
console.log('数据更新了');
},
updated(){
console.log('数据更新完毕');
}
})
script>
body>
html>
12 动画
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<style>
div>p{
width: 100px;
height: 100px;
background-color: lime;
transition: all 1s;
opacity: 1;
position: relative;
left: 100px;
}
.c{
opacity: 0;
width: 0px;
transform: rotate(360deg);
left: 0px;
}
style>
<body>
<div id="app">
<button v-on:click="change()" id="btn">淡入淡出button>
<p v-bind:class="{c:show}">p>
<h3>这是标题h3>
div>
<script src="js/vue.js">script>
<script>
setTimeout(()=>{
// 选择标签.click() 自动触发click方法
btn.click();
},10)
new Vue({
el:'#app',
data:{
show:true
},
methods:{
change(){
console.log(111);
this.show=!this.show;
}
}
})
script>
body>
html>
13 transition
Vue中transition方法：
1.实现显示与隐藏；
2.用transition包裹实现动画的标签；
3.书写各个状态的类
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<style>
p{
width: 100px;
height: 100px;
background-color: lime;
}
/**/
.fade-leave{
/*opacity: 1;*/
/*width: 100px;*/
transform:rotate(0deg) scale(1);
}
/*离开的结束一瞬间*/
.fade-leave-to{
transform:rotate(360deg) scale(0);
}
/*离开的过程*/
.fade-leave-active{
transition: all 2s;
}
/*进入的开始一瞬间*/
.fade-enter{
transform: rotate(360deg) scale(0);
}
/*进入的结束一瞬间*/
.fade-enter-to{
transform: rotate(0deg) scale(1);
}
/*进入的过程*/
.fade-enter-active{
transition: all 1s;
}
style>
<body>
<div id="app">
<button v-on:click="change()">动画效果button>
<transition name="fade">
<p v-show="show">p>
transition>
div>
<script src="js/vue.js">script>
<script>
new Vue({
el:'#app',
data:{
show:true
},
methods:{
change(){
this.show=!this.show;
}
}
})
script>
body>
html>
watch 与computed区别？
1.区别
watch中的函数是不需要调用的
computed内部的函数调用的时候不需要加()
watch：属性监听 监听属性的变化
computed：计算属性通过属性计算而得来的属性
watch：需要在数据变化时执行异步或开销较大的操作时使用
对于任何复杂逻辑或一个数据属性在它所依赖的属性发生变化时，也要发生变化，这种情况下，我们最好使用计算属性computed。
computed 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
computed中的函数必须用return返回最终的结果
当computed中的函数所依赖的属性如果没有发生改变的时候，那么调用当前函数的时候结果会从缓存中读取
watch：一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；
2.使用场景
computed
当一个属性受多个属性影响的时候就需要用到computed
最典型的例子： 购物车商品结算的时候
watch
当一条数据影响多条数据的时候就需要用watch
搜索数据