Vue学习笔记
数据展示（单个数据，数组，对象）
我们把定义的数据放在Vue的data属性当中，用的时候需要把data用{ {}}，并且需要放在id匹配的位置才可以展示数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
{
{
message }}
<div id="app">
{
{
message }}
<span>{
{
message}}</span>
<h2>{
{
shcool.tel}}</h2>
<h2>{
{
shcool.name}}</h2>
<h2>{
{
campus[0]}}</h2>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
shcool:{
name:"sd",
tel:"123"
},
campus:["1","2","3"]
}
});
</script>
</body>
</html>
v-text和字符串拼接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h1 v-text="message"></h1>
<h1 v-text="info"></h1>
<h1 v-text="info+'888'"></h1>
<h1 >{
{
message}}878</h1>
<h1 >{
{
message+"878"}}</h1>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
info:"666"
}
});
</script>
</body>
</html>
V-once
v-one根据字面意思也就是一次，也就是说，当我改变name的值的时候，name也不会发生任何变化。因为我的值只改变一次。
v-html
如果数据中有html结构就会被解析成标签形式，
而v-text只会解析为文本，如果v-html设置的内容为本文，则跟v-text一样
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h1 v-text="message"></h1>
<h1 v-html="message2"></h1>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
message2:"<a href='www.baidu.com'>百度</a>"
}
});
</script>
</body>
</html>
v-on：绑定事件
两种方法：
@click（常用）
v-on:click
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h1 v-text="message"></h1>
<input type="button" value="v-on" v-on:click="doit" />
<input type="button" value="v-on简写" @click="doit"/>
<input type="button" value="双击事件" @dblclick="doit"/>
<input type="button" value="改变数据的值" @click="change"/>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods:{
doit:function(){
alert("just so so!")
},
change:function(){
this.message+="6"
}
}
});
</script>
</body>
</html>
调用方法的函数需要写在 methods里面。
v-on带参
情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。
但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去
情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。
v-on修饰符
在某些情况下，我们拿到event的目的可能是进行一些事件处理。
Vue提供了修饰符来帮助我们方便的处理一些事件：
- .stop - 调用 event.stopPropagation()。
- .prevent - 调用 event.preventDefault()。
- .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
- .native - 监听组件根元素的原生事件。
- .once - 只触发一次回调。
案例
计数器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="button" value="-" v-on:click="jian" />
<span>{
{
message}}</span>
<input type="button" value="+" @click="add"/>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message:1
},
methods:{
add:function(){
if(this.message<10){
this.message++;}
else{
alert("别点啦！太大了")
}
},
jian:function(){
if(this.message>0){
this.message--;}
else{
alert("别点啦！太小了")
}
}
}
});
</script>
</body>
</html>
切换账号登录模式
这里，如果我们不再input里面加key（可以解决重复利用数据的问题），在上面的案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了
<div id="app">
<span v-if="test ==='username'">
<label>用户名：</label>
<input type="text" placeholder="用户名" key="text"/>
</span>
<span v-else>
<label>邮箱地址：</label>
<input type="email" placeholder="请输入邮箱" key="email"/>
</span>
<button @click="change">切换</button>
</div>
<script src="js/vue.js">
</script>
<script>
let app=new Vue({
el:"#app",
data:{
test:'username',
},
methods:{
change(){
this.test = this.test ==='email' ?'username':'email'
}
}
})
</script>
v-pre
显原型，什么意思呢，就是我们前面学到我们用{ {}}就可以把数据展示出来，但当我们用v–pre的时候，就不会显示数据了而会显示{ {里面的值}}，说白了就是不会将{ {}}进行编译识别，根据下面的例子也可以看出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-pre>{
{
name}}</h1>
<h1 >{
{
name}}</h1>
</div>
</body>
<script type="text/javascript">
var app=new Vue({
el: '#app',
data:{
name:"我爱Java"
},
methods:{
time(){
return this.first+this.last;
}
},
computed:{
fullname:function(){
return this.first+this.last;
},
re:function(){
return this.word.split("").reverse().join("");
}
}
});
</script>
</html>
v-cloak
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue.js"></script>
<style type="text/css">
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
{
{
msg}}
</div>
</body>
<script type="text/javascript"></script>
<script >
setTimeout(() => {
new Vue({
el: '#app',
data: {
msg: 'hello'
}
})
},2000)
})
</script>
</html>
不加v-cloak的效果，
加v-cloak的效果
v-show
根据表达式真假，切换元素的显示和隐藏
原理：改变display的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="button" value="改变显示状态" v-on:click="jian" />
<img v-show="flag" src="img/2_meitu_1.jpg" />
<input type="button" value="年龄+" v-on:click="add" />
<img v-show="age>18" src="img/2_meitu_1.jpg" />
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
flag:false,
age:17
},
methods:{
jian:function(){
this.flag= !this.flag;
},
add:function(){
this.age++;
}
}
});
</script>
</body>
</html>
v-if
根据表达式真假，切换元素的显示和隐藏（操作dom对象）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="button" value="改变显示状态" v-on:click="jian" />
<img v-if="flag" src="img/2_meitu_1.jpg" />
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
flag:false,
age:17
},
methods:{
jian:function(){
this.flag= !this.flag;
}
}
});
</script>
</body>
</html>
和v-show类似
v-bind:可以动态修改
为元素绑定属性：titile，class，src,style
两种写法：v-bind:titile 或者：titile
class跟src与上面类似
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.active{
border: 50px solid blue;
}
</style>
</head>
<body>
<div id="app">
<img v-bind:src ="imgSrc" :title ="imgTitle+'!!!'" :class="{active:isActivity}" @click="activity"/>
<img v-bind:src ="imgSrc" :title ="imgTitle+'!!!'" :class="isActivity?'active':''" @click="activity"/>
<img :src ="imgSrc" />
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
imgSrc:"img/2_meitu_1.jpg",
imgTitle:"Vue入门",
isActivity:false
},
methods:{
activity:function(){
this.isActivity=!this.isActivity;
}
}
});
</script>
</body>
</html>
轮播图实现
<style>
ul li {
list-style: none;
}
.dian {
display: flex;
position: absolute;
bottom: 10px;
}
.dian li {
width: 20px;
height: 20px;
background: #fff;
margin: 0 10px;
border-radius: 50%;
}
.dian li.active {
background: blue;
}
.main {
width: 500px;
height: 300px;
position: relative;
display: flex;
justify-content: center;
}
.main img {
height: 300px;
width: 500px;
}
</style>
</head>
<body>
<div id="app">
<div class="main">
<img :src="item" v-for="(item, i) in list" v-show="i===activeIndex">
<ul class="dian">
<li @mouseenter="hover(i)" :class="{active:i===activeIndex}" v-for="(item, i) in list"></li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let zyy = new Vue({
el: "#app",
data() {
return {
activeIndex: 0,
timer: null,
list: [
"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1035415831,1465727770&fm=26&gp=0.jpg",
"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2242212773,2792770847&fm=26&gp=0.jpg",
"http://img0.imgtn.bdimg.com/it/u=3973422992,68543740&fm=26&gp=0.jpg"
],
}
},
mounted() {
this.run()
},
methods: {
run() {
this.timer = setInterval(() => {
//设置一个定时器
this.activeIndex++ //让下标每秒加一实现切换效果
//如果走到最后一张，让下标回到0
if (this.activeIndex === this.list.length) this.activeIndex = 0
}, 1000);
},
hover(i) {
clearInterval(this.timer)//鼠标放上去时先移除定时器
this.activeIndex = i //让当前的标签active激活
this.run() //随后再走定时器
}
},
})
</script>
</body>
v-for实现循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in list">
{
{
item}}
</li>
</ul>
<ul>
<li v-for="(item,index) in list">
索引{
{
index}} 数值为 {
{
item}}
</li>
</ul>
<h1 v-for="(item,i) in objectList">
索引为{
{
i }}，id为{
{
item.id }}，name为{
{
item.name }}
</h1>
<p v-for="(value,key,index) in user">
value为 ：{
{
value }}，key为： {
{
key }},索引为： {
{
index }}
</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '我喜欢Vue',
list: [1,5,4,7,8,9],
objectList: [
{
id:1,name:'haha1' },
{
id:2,name:'haha2' },
{
id:3,name:'haha3' },
{
id:4,name:'haha4' }
],
user: {
id: 1,
name :'hhahahha',
age: 19
}
}
});
</script>
</html>
v-model
获取和设置表单元素的值（双向数据绑定）
绑定的数据和表单元素的值是双向的，具体看示例。
也就是说当你改变表单的值的时候，data里面的数据也会跟着改变，废话不多说上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" @click="change" value="改变" />
<input type="text" v-model="msg" @keyup.enter="alter"/>
<h1>{
{
msg}}</h1>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '我喜欢Vue'
},
methods:{
change:function(){
this.msg="我爱Vue"
},
alter:function(){
alert(this.msg)
}
}
});
</script>
</html>
记事本案例：
主要涉及到数组的增加，删除，和清空操作
设计的有@click，@keyup,enter, v-for,v-show，带参函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="msg" @keyup.enter="add"/>
<ul >
<li v-for="(item,index) in arr">
<span>{
{
index+1}}</span>
<label>{
{
item}}</label>
<button @click="del(index)">删除</button>
</li>
</ul>
<button @click="clear">清空</button></br>
<span id="test" v-show="arr.length!=0">
<span>共有：</span>
<span>{
{
arr.length}}</span>
<span>条数据</span>
</span>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
arr:[
"a","b"
],
msg:"c"
},
methods:{
add:function(){
this.arr.push(this.msg);
},
del:function(index){
this.arr.splice(index,1);
},
clear:function(){
this.arr=[];
}
}
});
</script>
</html>
点击回车之后
点击清空
点击删除
Vue.js 自定义指令
我们在前面讲到了v-on,v-bind,v-show等一些指令，那我们也可以自己定义指令来实现某种效果。这里用到关键词directive,单词意思为指令。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>页面载入时，input 元素自动获取焦点：</p>
<input v-focus>
</div>
<script>
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
// 创建根实例
new Vue({
el: '#app'
})
</script>
</body>
</html>