零基础VUE.js学习笔记 基础篇

笔记整理来源 B站up主黑马程序员
B站黑马程序员 快速入门vue前端

适合初学者入门vue.js，
该文是基础篇
基础篇包括课程中的Vue基础和本地应用环节
后续会更新进阶篇，包括网络应用和综合应用

VUE.JS

使用vue.js首先需要导入vue库

<script src="http://cdn.jsdelivr.net/npm/vue">   </script>

或者导入本地vue文件
文中<script src=""></script>代表导入vue库

基本使用语法

<div id="app">
    {{message}}
</div>  
<script src=""></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"123456"
        }
    })
</script>

元素解释

标签

只支持双标签 eg：div h1 h2 （body不可以）

<h1 id="**"> </h1>

标签里面插入{{}}

{{}}：差值表达式 。

el

挂载点，可根据id，class，css，标签选择器进行挂载。

<div id="app">  	 --el:"#app"
<div class="app">    --el:".app"
<div >   			 --el:"div"

data

对挂载点的插值表达式进行替换。

eg：message：你好

可支持对象

eg: 
<div id="app">
	<h2>
		{{school.name}}
        {{school.mobli}}
	</h2>
    
    <ul>
    	<li>{{campus[0]}}</li>
    	<li>{{campus[1]}}</li>
    	<li>{{campus[2]}}</li>
    </ul>
</div> 


<script src=""></script>
<script>
var app=new Vue({
el:"#app",
data:{
	school:{
		name:"小黑"，
		mobil:"123456"
	},
	campus:["111","222","333"]
}
})
</script>

Vue中用到的数据定义可以写到data中

data中可以写复杂类型的数据

渲染复杂类型数据，遵守js语法即可

vue本地应用

即Vue指令，通过vue实现常见的网页效果

vue指令是指以v-开头的一组特殊语法

内容绑定，事件绑定

v-test

设置标签的文本值-textcontent

<div id="app">
     <h2 v-txt="message+'!'"></h2>
     <h2> 你好 {{message +"!"}}</h2>       
</div>

<script src=""></script>
<script>
var app=new Vue({
	el:"#app",
	data:{
		message:"小黑"
}
})
</script>

1.会替换掉原先存在的内容–里面的内容会被清除

2.可以进行字符串拼接，也可以用差值表达式进行完成

3.默认写法会替换全部内容，差值表达式可以替换指定内容

4.v-text设置标签内容

5.内部支持写表达式

v-html

设置标签的innerHTML

<div id="app">
     <h2 v-html="content"></h2>
          
</div>


<script src=""></script>
<script>
var app=new Vue({
	el:"#app",
	data:{
		content:"<a href='#'>小黑</a>"
}
})
</script>

*普通内容没什么区别，htm语言有区别

*text只能输入原本值，html会转换

*html结构会被解析

v-on

为元素绑定事件

<div id="app">
     <input type="button" value="点击事件" v-on:click="doit">
     <input type="button" value="鼠标移入" v-on:monseenter="doit">
     <input type="button" value="双击事件" v-on:dblclick="doit">
     <input type="button" value="简写双击" @click="doit">
      <h2 @click="eatfood">{{food}}</h2>
         
</div>
<script src=""></script>
<script>
var app=new Vue({
	el:"#app",
	data:{
	food:"西红柿"
	},
	methods:{
		doit:function(){
		alert("doit");
		},
		eatfood:function(){
		//alert("this.food")
		this.food+="好好吃";
		}
	}
}
})
</script>

*methods:{方法名：function（）{逻辑}}

*v-on=@ 可以替换

*为元素绑定事件

*方法内部可以通过this访问定义在data中的数据

案例–计数器

<div id="app">
     <button @click="add">+</button>
     <span>{{num}}</span>
     <button @click="sub">-</button>
         
</div>
<script src=""></script>
<script>
var app=new Vue({
	el:"#app",
	data:{
	num:1
	},
	methods:{
		add:function(){
		if(this.num<10){this.num++;}
		else alert("最大了");
		},
		sub:function(){
		if(this.num>0){this.num--;}
		else alert("最小了");
		}
	}
}
})
</script>

*this可以获取data中的数据

*v-text设置文本值 简写{{}}

*v-html 设置innerHTML

*v-on 简写@

*el 挂载点 data 数据 methods 方法

显示切换，属性绑定

V-show

根据表达式的真假，切换元素的隐藏和显示。

<div id="app">
     <img src="" v-show="true">
     <img src="" v-show="isShow">
     <img src="" v-show="age>>18">
     <input type="button" value="切换" @click="changeIsShow">
         
</div>
<script src=""></script>
<script>
var app=new Vue({
	el:"#app",
	data:{
	age:16,
	isShow:false
	}
	methods:{
	changeIsShow:function(){
	this.isShow=!this.isShow;
	}
	}
})
</script>

*原理：修改元素的display来实现显示隐藏

*画面的内容解析为布尔值

*数据改变时，后面会同步更新

V-if

根据表达式的真假，切换元素的显示和隐藏（操纵dom）

<div id="app">
     <p v-if="true">你好啊</p>
     <p v-if="isShow">你好啊</p>
     <p v-if="表达式">你好啊</p>
     <input type="button" value="切换" @click="changeIsShow">
         
</div>
<script src=""></script>
<script>
var app=new Vue({
	el:"#app",
	data:{
	age:16,
	isShow:false
	}
	methods:{
	changeIsShow:function(){
	this.isShow=!this.isShow;
	}
	}
})
</script>

*本质操作dom树，直接从dom树中删除该节点，对性能要求高

*v-show 本质是display=none

*频繁切换用v-show，否则用v-if

V-bind

*设置元素的属性，eg：src class

v-bind：属性名=表达式

<style>
.active{
border: 1px solid red;
}
</style>
<div id="app">
     <img src="" v-bind:src="imgSrc">
     <img src="" v-bind:title="imgTitle+'!'">
     <img src="" v-bind:class="isActive?'active':"">
     <img src="" v-bind:class="{active：isActive}">
     <img src="" :class="{active：isActive}" :title="imgTitle" @click="changeActive">
         
</div>
<script src=""></script>
<script>
var app=new Vue({
	el:"#app",
	data:{
	isActive:false,
	imgSrc="",
	imgTitle="",
	isActive:false
	}
	methods:{
	changeActive:function(){
	this.isActive=!this.isActive;
	}
	}
})
</script>

*v-bin可以省略 相当于在属性前面添加：

*为元素绑定属性

图片切换

<div id="app">
     <img :src="imgArr[index]" >
     <a href="#" @click="prew" v-show="index!=0">上一张</a>  //可以内嵌img箭头替换上一张
     <a href="#" @click="next" v-show="index<imgArr.length-1">下一张</a>
   
         
</div>
<script src=""></script>
<script>
var app=new Vue({
	el:"#app",
	data:{
	imgArr:["","","","","",""],
	index:0
	}
	methods:{
	prew:function(){this.index--},
	next:function(){this.index++}
	}
})
</script>

定义图片数组–>添加图片索引 -->绑定src属性–> 图片切换逻辑 -->显示状态切换

*列表数据 用数组保存 并建立索引

*频繁切换需要用v-show 少占内存

*v-bin 来设置图片的src

列表循环，表单元素绑定

v-for

根据数据生成（响应式）列表结构

v-for=“item in arr”

item是每一项 arr 是数组

<div id="app">
   <ul>
   <li v-for="item in arr" :title="item">  {{item}} </li>   //无序号
   <li v-for="(item,index) in arr" :title="item">  {{index+1}}{{item}} </li>//有序号
   <li v-for="(item,index)in objArr">{{item.name}}</li>
   <input type="button" value="添加数据 " @click="add">
   <input type="button" value="移除数据 " @click="remove">
   </ul>
</div>  
<script src=""></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
         arr:["1","2","3","4","5"],
         objArr:[
         {name:lihua},
         {name:xiaoming}
         ]
        }
        methods:{
        add:function(){this.arr.push("6");},
        remove:function(){this.arr.shift();}
        }
    })
</script>

*作用：根据数据生成列表结构

*语法：（item，index）in 数据

*数组经常结合v-for使用

*数组长度是响应式的 直接更新到页面上

*item和index可以结合其他指令一起使用

v-on补充

传递自定义参数，事件修饰符-----函数可以传递自定义变量

<div id="app">
 
   <input type="button" value="点击含参数 " @click="doIt(666,'你好')">
   <input type="text" value="键盘事件 " @keyup.enter="sayHi">

</div>  
<script src=""></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
        
        }
        methods:{
        doit:function(p1,p2){
        console.log("doit");
    	console.log(p1);
        console.log(p2);
    },
        sayHi:function(){
            alert("你按下了enter哦");
        }
        }
    })
</script>

*定义方法要定义形参来接收传来的实参

*事件后可通过.修饰符对事件进行限制 .enter可以出发为回车的按键 事件修饰符有多种

*事件绑定的方法写成函数调用的形式可以传入自定义参数

v-model

获取和设置表单元素的值

双向数据绑定

1.表单中可接受到message 的值

2.表单中message改变，data中数据也会改变

<div id="app">
 
   <input type=button value="修改message值" @click="setMessage">
   <input type="text" v-model="message" @keyup.enter="getMessage" >
	<h1>{{message}}</h1>
</div>  
<script src=""></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
        message:"你好 小黑"
        },
        methods:{
        getMessage:function(){
        alert("this.message");
        },
        setMessage:function(){
        this.message="再见，小黑";
        }
        }
        }
    })
</script>

*v-model 是便捷设置和获取表单元素的值

*绑定的数据 <——>表单元素的值 双向绑定！

实例设计–小黑记事本

五大功能

1.新增

思路 ：

生成列表结构–>v-for数组

获取用户输入–>v-model

回车，新增数据–>v-on enter添加数据

主代码

<div id="app">
<input v-model="inputvalue" @keyup.enter="add" placeholder="请输入任务">
<selection>
    <ul>
        <li v-for="(item,index) in list">
            <div>
                <span>{{index+1}}</span>
                <lable>{{item}}</lable>
            </div>
        </li>
    </ul>
</selection>
</div>
    
<script src=""></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
        list:["吃饭"，"睡觉","打游戏"],
        inputvalue=""
        },
        methods:{
       add:function(){
           this.list.push(this.inputvalue);
       }
        }
    })
</script>

*通过审查元素，快速定位！

2.删除

思路：点击删除指定内容（v-on splice）

<div id="app">
<input v-model="inputvalue" @keyup.enter="add" placeholder="请输入任务">
<selection>
    <ul>
        <li v-for="(item,index) in list">
            <div>
                <span>{{index+1}}</span>
                <lable>{{item}}</lable>
                <button @click="delete(index)"> </button>
            </div>
        </li>
    </ul>
</selection>
</div>
    
<script src=""></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
        list:["吃饭"，"睡觉","打游戏"],
        inputvalue=""
        },
        methods:{
       add:function(){
           this.list.push(this.inputvalue);
       },
       delete:function(){
       this.list.splice(index,1);
       }
        }
    })
</script>

*数据改变和数据绑定的元素同步改变

*需要用到事件的自定义参数

*splice方法的使用

3.统计

统计信息个数–>（v-text length）

<strong>{{list.length}}</strong>

4.清空

点击清除所有信息–>v-on 清空数组

<div id="app">
<input v-model="inputvalue" @keyup.enter="add" placeholder="请输入任务">
<selection>
   
       <button @click="clear"> 清空数据  </button>
      
</selection>
</div>
    
<script src=""></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
        list:["吃饭"，"睡觉","打游戏"],
       
        },
      	methosds:{
      	clear:function(){
      	this.list=[];
      	}
        }
    })
</script>

绑定方法—this.list清空

5.隐藏

没有数据时候，隐藏元素–>v-if v-show 判断数组是否空

v-if=“list.length!=0” 隐藏主体元素

可以隐藏父元素也可以隐藏子元素。

记事本小结

列表结构可以通过v-for指令结合数据生成

v-on结合事件修饰符可以对事件进行限制

v-on在绑定事件时候可以传递自定义参数

通过v-model可以快速设置和获取表单元素的值

<input v-model="inputvalue" @keyup.enter="add" placeholder="请输入任务">
<selection>
   
       <button @click="clear"> 清空数据  </button>
      
</selection>
</div>
    
<script src=""></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
        list:["吃饭"，"睡觉","打游戏"],
       
        },
      	methosds:{
      	clear:function(){
      	this.list=[];
      	}
        }
    })
</script>

绑定方法—this.list清空

5.隐藏

没有数据时候，隐藏元素–>v-if v-show 判断数组是否空

v-if=“list.length!=0” 隐藏主体元素

可以隐藏父元素也可以隐藏子元素。

记事本小结

列表结构可以通过v-for指令结合数据生成

v-on结合事件修饰符可以对事件进行限制

v-on在绑定事件时候可以传递自定义参数

通过v-model可以快速设置和获取表单元素的值

基于数据的开发方式

课程地址及课程中源码下载

课程地址：https://www.bilibili.com/video/BV12J411m7MG?p=1

如果有感兴趣的小伙伴可以去观看，附上课程源代码
链接：https://pan.baidu.com/s/166XJY5E4XQWhaeN1q5B5Gw?pwd=kkcr
提取码：kkcr