一.下载vue.js
链接: https://pan.baidu.com/s/1qnD_MM49wht69qWiilZMPw 提取码: 3pph
二.Vue基本使用“helloworld”
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div class="first">{{a}}
<!-- 插值表达式 -->
</div>
</body>
<script>
var vu = new Vue({
el: '.first', // 元素挂载位置
data: { //模型数据
a: 'helloword'
}
})
</script>
</html>
结果：
三.Vue模板语法
1.v-cloak（解决插值表达式存在的‘闪动’问题）
原理：先隐藏，替换好值之后再显示最终的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<style>
[v-cloak] {
display: none;
}
</style>
<body>
<div class="first" v-cloak>{{a}}
<!-- 插值表达式 -->
</div>
</body>
<script>
var vu = new Vue({
el: '.first', // 元素挂载位置
data: { //模型数据
a: 'helloword'
}
})
</script>
</html>
2.v-text（无‘闪动’问题）
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<style>
[v-cloak] {
display: none;
}
</style>
<body>
<div class="first" v-cloak>{{a}}
<!-- 插值表达式 -->
<div v-text='a'></div>
</div>
</body>
<script>
var vu = new Vue({
el: '.first', // 元素挂载位置
data: { //模型数据
a: 'helloword'
}
})
</script>
</html>
结果：
3.v-html（填充的是html，存在安全问题）
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<style>
[v-cloak] {
display: none;
}
</style>
<body>
<div class="first" v-cloak>{{a}}
<!-- 插值表达式 -->
<div v-text='a'></div>
<div v-html='b'></div>
</div>
</body>
<script>
var vu = new Vue({
el: '.first', // 元素挂载位置
data: { //模型数据
a: 'helloword',
b: '<h1>我是标题</h1>'
}
})
</script>
</html>
结果：
4.v-pre（填充原本的信息）
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<style>
[v-cloak] {
display: none;
}
</style>
<body>
<div class="first" v-cloak>{{a}}
<!-- 插值表达式 -->
<div v-text='a'></div>
<div v-html='b'></div>
<div v-pre>{{a}}</div>
</div>
</body>
<script>
var vu = new Vue({
el: '.first', // 元素挂载位置
data: { //模型数据
a: 'helloword',
b: '<h1>我是标题</h1>'
}
})
</script>
</html>
结果：
5.v-once（由此绑定的数据无法在console里面修改，即值编译一次）
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<style>
[v-cloak] {
display: none;
}
</style>
<body>
<div class="first" v-cloak>{{a}}
<!-- 插值表达式 -->
<div v-once v-text='a'></div>
<div v-html='b'></div>
<div v-pre>{{a}}</div>
</div>
</body>
<script>
var vu = new Vue({
el: '.first', // 元素挂载位置
data: { //模型数据
a: 'helloword',
b: '<h1>我是标题</h1>'
}
})
</script>
</html>
结果：
6.v-model（双向数据绑定）
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div class="first" v-cloak>{{a}}
<!-- 插值表达式 -->
<div>
<input type="text" v-model='a'>
</div>
</div>
</body>
<script>
var vu = new Vue({
el: '.first', // 元素挂载位置
data: { //模型数据
a: 'helloword',
}
})
</script>
</html>
结果：
7.v-on:click/@click（无参数）
methods中的变量要加this指针
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div class="first" v-cloak>{{num}}
<!-- 插值表达式 -->
<button @click='clic()'>加一</button>
</div>
</body>
<script>
var vu = new Vue({
el: '.first', // 元素挂载位置
data: { //模型数据
num: 0
},
methods: {
clic: function() {
this.num++;
}
}
})
</script>
</html>
结果：
8.v-on:click/@click（有参数，$event为事件对象放在最后）
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div class="first" v-cloak>{{num}}
<!-- 插值表达式 -->
<button @click='clic(2,$event)'>加一</button>
</div>
</body>
<script>
var vu = new Vue({
el: '.first', // 元素挂载位置
data: { //模型数据
num: 0
},
methods: {
clic: function(a, event) {
this.num += a;
console.log(event.target.tagName);
}
}
})
</script>
</html>
结果：
9.stop阻止冒泡
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div class="first" v-cloak @click='clic(2,$event)'>{{num}}
<!-- 插值表达式 -->
<button @click.stop='clic1(2,$event)'>加一</button>
</div>
</body>
<script>
var vu = new Vue({
el: '.first ', // 元素挂载位置
data: { //模型数据
num: 0
},
methods: {
clic: function(a, event) {
this.num += a;
},
clic1: function() {
}
}
})
</script>
</html>
结果：
10.prevent阻止默认行为
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div class="first">
<a href="http://www.baidu.com" @click.prevent=''>百度</a>
</div>
</body>
<script>
var vu = new Vue({
el: '.first ', // 元素挂载位置
data: { //模型数据
num: 0
},
methods: {}
})
</script>
</html>
<div @click.self=’’>当event.target是当前元素自身时才触发
<div @click.self.prevent=’’>只会阻止对元素自身的点击
<div @click.prevent.self=’’>会阻止所有的点击
结果：
11.v-on:keyup.enter/@keyup.enter
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div class="first">
<form action="">
<div>
username
<input type="text" v-model='username'>
</div>
<div>
password
<input type="text" @keyup.enter='press' v-model='password'>
</div>
<div>
<input type="button" value="submit" @click='sub'>
</div>
</form>
</div>
</body>
<script>
var vu = new Vue({
el: '.first ', // 元素挂载位置
data: { //模型数据
username: '',
password: ''
},
methods: {
press: function() {
console.log(this.username, this.password);
},
sub: function() {
console.log(this.username, this.password);
}
}
})
</script>
</html>
结果：
12.v-on:keyup.delete/@keyup.delete
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div class="first">
<form action="">
<div>
username
<input type="text" v-model='username' @keyup.delete='del'>
</div>
<div>
password
<input type="text" v-model='password'>
</div>
<div>
<input type="button" value="submit">
</div>
</form>
</div>
</body>
<script>
var vu = new Vue({
el: '.first ', // 元素挂载位置
data: { //模型数据
username: '',
password: ''
},
methods: {
del: function() {
this.username = '';
}
}
})
</script>
</html>
结果：
13.Vue.config.keyCodes（自定义按键）
定义：Vue.config.keyCodes.自定义按键名=按键ascii码
（写在js里不用写在创建的vue对象中）
调用：@keyup.自定义按键名
14.v-bind：/：（属性绑定）
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div class="first">
<a :href="url">百度</a>
</div>
</body>
<script>
var vu = new Vue({
el: '.first ', // 元素挂载位置
data: { //模型数据
url: 'http://www.baidu.com'
},
methods: {}
})
</script>
</html>
结果：
15…v-bind：class=‘{}’/：class（样式）
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<style>
.active {
border: 1px solid red;
height: 100px;
width: 100px;
}
</style>
<body>
<div class="first">
<div v-bind:class="{active:isActive}"></div>
<button @click='cli'>change</button>
</div>
</body>
<script>
var vu = new Vue({
el: '.first ', // 元素挂载位置
data: { //模型数据
isActive: true
},
methods: {
cli: function() {
this.isActive = !this.isActive;
}
}
})
</script>
</html>
结果：
16…v-bind：class=‘[]’/：class（样式）
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<style>
.active {
border: 1px solid red;
height: 100px;
width: 100px;
}
</style>
<body>
<div class="first">
<div v-bind:class="[activeClass]"></div>
<button @click='cli'>change</button>
</div>
</body>
<script>
var vu = new Vue({
el: '.first ', // 元素挂载位置
data: { //模型数据
activeClass: 'active'
},
methods: {
cli: function() {
if (!this.activeClass) {
this.activeClass = 'active';
} else {
this.activeClass = '';
}
}
}
})
</script>
</html>
结果：
16…v-bind：class=‘[{}]’/:class（样式）
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<style>
.active {
border: 1px solid red;
height: 100px;
width: 100px;
}
.a {
background-color: rosybrown;
}
</style>
<body>
<div class="first">
<div v-bind:class="[activeClass,{a:isA}]">555</div>
<button @click='cli'>change</button>
</div>
</body>
<script>
var vu = new Vue({
el: '.first ', // 元素挂载位置
data: { //模型数据
activeClass: 'active',
isA: true
},
methods: {
cli: function() {
if (!this.activeClass) {
this.activeClass = 'active';
} else {
this.activeClass = '';
}
this.isA = !this.isA;
}
}
})
</script>
</html>
结果：
17…v-bind：style=‘’/：style（样式）
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<style>
</style>
<body>
<div class="first">
<div v-bind:style="active">555</div>
<button @click='cli'>change</button>
</div>
</body>
<script>
var vu = new Vue({
el: '.first ', // 元素挂载位置
data: { //模型数据
active: {
border: '1px solid red',
height: '100px',
width: '100px'
}
},
methods: {
cli: function() {
this.active.height = '200px'
}
}
})
</script>
</html>
结果：
18.v-if/v-else-if/v-else
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<style>
</style>
<body>
<div class="first">
<div v-if='score>=90'>a</div>
<div v-else-if='score>=60'>b</div>
<div v-else>c</div>
</div>
</body>
<script>
var vu = new Vue({
el: '.first ', // 元素挂载位置
data: { //模型数据
score: 59
},
methods: {}
})
</script>
</html>
结果：
19.v-show
就是设置display来的
20.v-for
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<style>
</style>
<body>
<div class="first">
<ul>
<li v-for='(i,j) in a'>{{j + '----' + i}}</li>
</ul>
</div>
</body>
<script>
var vu = new Vue({
el: '.first ', // 元素挂载位置
data: { //模型数据
a: ['liu', 'fan', 'si', 'zhe']
},
methods: {}
})
</script>
</html>
结果：
四.vue简单案例
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<style>
* {
margin: 0;
padding: 0;
}
img {
width: 100%;
}
li {
list-style: none;
float: left;
height: 20px;
width: 48px;
border: 1px solid black;
text-align: center;
line-height: 20px;
}
.first div {
display: none;
width: 200px;
height: 100px;
}
.current {
background-color: brown;
}
.pic {
display: block!important;
}
</style>
<body>
<div class="first">
<ul>
<li @click='clic(index)' :class='now_index==index?"current":""' :key='item.id' v-for='(item,index) in a'>{{item.name}}</li>
</ul>
<div :class='now_index==index?"pic":""' :key='item.id' v-for='(item,index) in a'>
<img :src='item.url'>
</div>
</div>
</body>
<script>
var vu = new Vue({
el: '.first ', // 元素挂载位置
data: { //模型数据
now_index: 0,
a: [{
id: 1,
name: 'one',
url: './bg_1.jpg'
}, {
id: 2,
name: 'two',
url: './bg_2.jpg'
}, {
id: 3,
name: 'three',
url: './bg_3.jpg'
}, {
id: 4,
name: 'four',
url: './bg_4.jpg'
}]
},
methods: {
clic: function(index) {
this.now_index = index;
}
}
})
</script>
</html>
结果：
五.组件化开发
1.全局组件注册语法
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<button-counter></button-counter>
</div>
</body>
<script>
Vue.component('hello-word', {
data: function() {
return {
msg: 'hello'
}
},
template: `
<div>{{msg}}</div>
`
});
Vue.component('button-counter', {
data: function() { //必须是个函数
return {
count: 0
}
},
template: `
<div>
<button @click="count++">点击了{{count}}次</button>
<hello-word></hello-word>
</div>
` //必须包含根元素
})
var vu = new Vue({
el: '#app',
data: {}
})
</script>
</html>
结果：
2.局部组件注册语法
局部组件只能在注册他的父组件中使用
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<hello-a></hello-a>
<hello-b></hello-b>
<hello-c></hello-c>
</div>
</body>
<script>
var HelloA = {
data: function() {
return {
msg: 'hello1'
}
},
template: `
<div>{{msg}}</div>
`
};
var HelloB = {
data: function() {
return {
msg: 'hello2'
}
},
template: `
<div>{{msg}}</div>
`
};
var HelloC = {
data: function() {
return {
msg: 'hello3'
}
},
template: `
<div>{{msg}}</div>
`
}
var vu = new Vue({
el: '#app',
data: {},
components: {
'hello-a': HelloA,
'hello-b': HelloB,
'hello-c': HelloC
}
})
</script>
</html>
结果：
六.组件间的数据交互
组件内部通过p’rops接收传递过来的值
如果props中的数据是驼峰式的，则需在标签调用时改成‘-’式，字符串中不需要改
1.父组件向子组件传值
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<sob_f title="属性传递信息"></sob_f>
<sob_f :title='ptitle'></sob_f>
</div>
</body>
<script>
Vue.component('sob_f', {
props: ['title'],
data: function() {
return {
msg: '子组件信息'
}
},
template: `
<div>{{msg+"-------"+title}}</div>
`
})
var vu = new Vue({
el: '#app',
data: {
msg: '父组件信息',
ptitle: '父组件动态传递给子组件的信息'
}
})
</script>
</html>
结果：
2.数据类型
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<sob_f tnum='12'></sob_f>
<sob_f :tnum='12'></sob_f>
<!-- <sob_f tblo=true></sob_f> -->
<!-- <sob_f :tblo=true></sob_f> -->
</div>
</body>
<script>
Vue.component('sob_f', {
props: ['tstring', 'tnum', 'tblo'],
template: `
<div>{{typeof tnum}}</div>
// <div>{{typeof tblo}}</div>
`
})
var vu = new Vue({
el: '#app',
data: {
pstring: '父组件动态传递给子组件的信息'
}
})
</script>
</html>
结果：
3.子组件向父组件传值
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<div :style='{fontSize:fontSize+"px"}'>{{pstring}}</div>
<sob_f @a='big($event)'></sob_f>
<!-- <sob_f tblo=true></sob_f> -->
<!-- <sob_f :tblo=true></sob_f> -->
</div>
</body>
<script>
Vue.component('sob_f', {
props: [],
template: `
<button @click='$emit("a",5)'>大</button>
`
})
var vu = new Vue({
el: '#app',
data: {
pstring: '父组件动态传递给子组件的信息',
fontSize: 10
},
methods: {
big: function(val) {
this.fontSize += val;
}
}
})
</script>
</html>
结果：
4.非父子组件传值
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<div>父组件</div>
<sob-f></sob-f>
<sob-p></sob-p>
<button @click='handel'>clear</button>
</div>
</body>
<script>
var hub = new Vue(); //事件中心
Vue.component('sob-f', {
data: function() {
return {
num: 0
}
},
template: `
<div>
<div>sob-f:{{num}}</div>
<div>
<button @click='handel'>click</button>
</div>
</div>
`,
methods: {
handel: function() {
hub.$emit('p-event', 2);
}
},
mounted: function() {
hub.$on('f-event', (val) => {
this.num += val;
});
}
});
Vue.component('sob-p', {
data: function() {
return {
num: 0
}
},
template: `
<div>
<div>sob-p:{{num}}</div>
<div>
<button @click='handel'>click</button>
</div>
</div>
`,
methods: {
handel: function() {
hub.$emit('f-event', 1);
}
},
mounted: function() {
hub.$on('p-event', (val) => {
this.num += val;
});
}
});
var vu = new Vue({
el: '#app',
data: {
},
methods: {
handel: function() {
hub.$off('p-event');
hub.$off('f-event');
}
}
})
</script>
</html>
结果：
5.插槽
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<cha>1321</cha>
<cha></cha>
</div>
</body>
<script>
Vue.component('cha', {
template: `
<div>
<strong>error</strong>
<slot>default</slot>
</div>
`
})
var vu = new Vue({
el: '#app'
})
</script>
</html>
结果：
6.具名插槽
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<cha>
<p slot='top'>head</p>
<p>something</p>
<p>anthing</p>
<p slot='foot'>foot</p>
</cha>
<cha>
<template slot='top'>
<p>head1</p>
<p>head2</p>
</template>
<p>something</p>
<p>anthing</p>
<template slot='foot'>
<p>foot1</p>
<p>foot2</p>
</template>
</cha>
</div>
</body>
<script>
Vue.component('cha', {
template: `
<div>
<header>
<slot name='top'></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name='foot'></slot>
</footer>
</div>
`
})
var vu = new Vue({
el: '#app'
})
</script>
</html>
结果：
7.作用域插条
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<style>
.current {
color: orange;
}
</style>
<body>
<div id="app">
<cha :list='fruits'>
<template slot-scope='slotProps'>
<strong class="current" v-if='slotProps.info.id==2'>{{slotProps.info.name}}</strong>
<span v-else>{{slotProps.info.name}}</span>
</template >
</cha>
</div>
</body>
<script>
Vue.component('cha', {
props: ['list'],
template: `
<div>
<li :key='item.id' v-for='item in list'>
<slot :info='item'>{{item.name}}
</slot>
</li>
</div>
`
})
var vu = new Vue({
el: '#app',
data: {
fruits: [{
id: 1,
name: 'apple'
}, {
id: 2,
name: 'orange'
}, {
id: 3,
name: 'banana'
}]
}
})
</script>
</html>
结果：
363
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
