VUE总结

双花括号{{}}

01.index.hmlt

main.js

内存的数据可以更改

v-model 双休数据绑定

代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> -->
<script src="bli/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<input type="text" v-model="name">
<span v-show="name">你的名字是:{{name}}</span>
</div>
<div>
<input type="text" v-model="age">
<span v-show="age">你的年龄是:{{age}}</span>
</div>
<div>
<input type="text" v-model="sex">
<span v-show="sex">你的年龄是:{{sex}}</span>
</div>
</div>
</body>
<script src="js/main.js"></script>
</html>

01.index.html

var app = new Vue({
el:"#app",
data:{
name:null,
age:null,
sex:null
}
});

main.js

v-show:显示或者隐藏

main.js

index.html

语法

v-for:循环

main.js

index.html

运行结果

main.js 数据结构一般是嵌套的

index.html

每个对象的属性可以点出来

双花括号里的东西是可以进行运算的。

如计算打折后的价格。其中葱不打折

出现了NaN怎么解决呢???

三元运算符

判断是否有打折,有则显示打折后的价格,没有则显示原价格。

数据可以动态加

代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for</title>
<script src="bli/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="food in foodList">{{food.name}}: ¥{{food.discount ? food.price * food.discount : food.price}}</li>
</ul>
</div>
</body>
<script src="js/02.main.js"></script>
</html>

02.v-for.html

var app = new Vue({
el:"#app",
data:{
// foodList:['姜','蒜','葱'],
foodList:[
{
name:'姜',
price:5,
discount:.8,
},
{
name:'蒜',
price:9,
discount:.5,
},
{
name:'葱',
price:2,
}
],
}
});

02.main.js

v-bind:绑定数据和元素属性  简写为':'冒号

默认跳转到百度,也可以动态修改跳转到淘宝页面。

绑定class名,方式1:

绑定class名,方式2:

代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind</title>
<script src="bli/vue.js"></script>
<style>
.active{
background:#a10;
color:#fff;
text-decoration: none;
}
</style>
</head>
<body>
<div id="app">
<!-- <a href="http://baidu.com">点我</a> -->
<!-- <a v-bind:class="klass" v-bind:href="url">点我</a> -->
<a v-bind:class="{active: isActive}" v-bind:href="url">点我</a>
</div>
</body>
<script src="js/03.main.js"></script>
</html>

03.v-bind.html

var app = new Vue({
el:"#app",
data:{
url:"http://baidu.com",
klass:'btn btn-default',
isActive:true,
}
});

03.main.js

v-on:绑定事件, 简写为'@'

给一个元素绑定1个事件:

给一个元素绑定多个事件:

注意:绑定的方法一定要有,否则会报错。

表单提交事件

点击提交事件后(post/get请求),会自动刷新页面,控制台打印的东西就看不见了(闪了一下)。

阻止默认行为

方法1:e.preventDefault();   (必须传参)

提交事件后,不会自动刷新页面了。(e.preventDefault(); 阻止了默认行为)

方法2:.prevent   (不用传参)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bli/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on="{mouseenter: onEnter, mouseleave: onOut}" v-on:click="onClick">点我</button>
<hr>
<!-- 阻止默认行为方法1:传参 -->
<!-- <form v-on:submit="onSubmit($event)">
<input type="text">
<button type="submit">提交</button>
</form> -->
<!-- 阻止默认行为方法2:不传参 -->
<form v-on:submit.prevent="onSubmit">
<input type="text">
<button type="submit">提交</button>
</form>
</div>
</body>
<script src="js/04.main.js"></script>
</html>

v-on阻止默认行为.html

var app = new Vue({
el:"#app",
methods:{
onClick: function(){
console.log('clicked');
},
onEnter: function(){
console.log('mouse enter');
},
onOut: function(){
console.log('mouse leave');
},
// 阻止默认行为方法2:不传参
onSubmit: function(){
console.log('submitted');
},
// 阻止默认行为方法1:传参
// onSubmit: function(e){
// e.preventDefault(); // 阻止默认事件
// console.log('submitted');
// },
}
});

04.main.js

停止冒泡事件 .stop

键盘抬起事件 keyup

如果用户输入的是回车,应该怎么判断呢???

键盘按钮是回车键时  .enter

代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-on</title>
<script src="bli/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on="{mouseenter: onEnter, mouseleave: onOut}" v-on:click="onClick">点我</button>
<hr>
<!-- 阻止默认行为方法1:传参 -->
<!-- <form v-on:submit="onSubmit($event)">
<input type="text">
<button type="submit">提交</button>
</form> -->
<!-- 阻止默认行为方法2:不传参 -->
<!-- <form v-on:submit.prevent="onSubmit">
<input type="text">
<button type="submit">提交</button>
</form> --> <!-- 停止冒泡 -->
<!-- <form v-on:submit.stop="onSubmit">
<input type="text">
<button type="submit">提交</button>
</form> --> <!-- 键盘抬起事件 -->
<!-- <form v-on:keyup="onKeyup" v-on:submit.stop="onSubmit">
<input type="text">
<button type="submit">提交</button>
</form> --> <!-- 当键盘按的是回车键 -->
<form v-on:keyup.enter="onEnter" v-on:submit.prevent="onSubmit">
<input type="text">
<button type="submit">提交</button>
</form> </div>
</body>
<script src="js/04.main.js"></script>
</html>

04.v-on.html

var app = new Vue({
el:"#app",
methods:{
onClick: function(){
console.log('clicked');
},
onEnter: function(){
console.log('mouse enter');
},
onOut: function(){
console.log('mouse leave');
},
// 阻止默认行为方法2:不传参
onSubmit: function(){
console.log('submitted');
},
// 阻止默认行为方法1:传参
// onSubmit: function(e){
// e.preventDefault(); // 阻止默认事件
// console.log('submitted');
// }, // 键盘抬起事件
// onKeyup:function(){
// console.log('Key up');
// }, // 按下的是回车键
onEnter:function(){
console.log('entered');
},
}
});

04.main.js

v-model 双向数据绑定

3个修饰符

.lazy 当失去焦点时,才会触发更新内容。

.trim 将前后空格都去掉。

普通的v-model,多个空格无效,最多只有1个空格。

如果想让它显示所有的空格怎么办呢???

用户输入的内容,前面有空格应该去掉。

聚焦时:前面的空格不显示。

失去焦点时:自动去掉前面的空格。

.number 输入的内容是数字类型。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model</title>
<script src="bli/vue.js"></script>
</head>
<body>
<div id="app">
<!-- <input type="text" v-model="name">
<br>
<pre>{{name}}</pre> --> <!-- 失去焦点,更新内容。 .lazy-->
<!-- <input type="text" v-model.lazy="name">
<br>
{{name}} --> <!-- .trim 将前后空格都去掉 -->
<!-- <input type="text" v-model.trim="name">
<br>
<pre>{{name}}</pre> --> <!-- .number 输入的内容是数字类型。 -->
<input type="text" v-model.number="price">
<br>
<pre>{{price}}</pre> </div>
</body>
<script src="js/05.main.js"></script>
</html>

05.v-model指令及修饰符.html

var app = new Vue({
el:'#app',
data:{
name:"宝宝",
price:10,
}
});

05.main.js

v-model在其他元素及类型上的用法

单选框:

注意:name必须一样,才会单选。

单选框设置默认值:

注意:name属性可以不写。用v-model来代替。

多选框:

多选框设置默认值:

多行输入框:设置默认值

和input(text类型)是一样的效果。

下拉框:

默认显示第一个选项

下拉框:设置默认值为空

下拉框:设置默认值为指定value值(单选)

下拉框:设置默认值为指定value值(多选multiple)

注意:按住Ctrl键可以选中多个值。Shift可以连选选中多个值。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bli/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 单选框 -->
<!-- <label>

<input name="sex" value="male" type="radio">
</label>
<label>

<input name="sex" value="female" type="radio">
</label> --> <!-- 单选框设置默认值 -->
<!-- <label>

<input v-model="sex" value="male" type="radio">
</label>
<label>

<input v-model="sex" value="female" type="radio">
</label>
<br>
{{sex}} --> <!-- 多选框 -->
<!-- <label>

<input v-model="sex" value="male" type="checkbox">
</label>
<label>

<input v-model="sex" value="female" type="checkbox">
</label>
<br>
{{sex}} --> <!-- 多行输入框 -->
<!-- <textarea v-model="texcon"></textarea>
<br>
{{texcon}} --> <!-- 下拉框 单选 -->
<div>你来自哪里?</div>
<select v-model="from">
<option value="1">星球</option>
<option value="2">火球</option>
</select>
<br>
{{from}} <hr> <!-- 下拉框 多选-->
<div>你要去哪里?</div>
<select v-model="dest" multiple>
<option value="1">星球</option>
<option value="2">火球</option>
</select>
<br>
{{dest}} </div>
</body>
<script src="js/06.main.js"></script>
</html>

06.v-model在其他元素及类型上的用法.html

var app = new Vue({
el:'#app',
data:{
// sex:'female', // 单选框默认值
sex:['male','female'], // 多选框默认值
texcon:'多行输入框默认值', // 多行输入框默认值
// from:null, //下拉框设置默认值 null:空
from:2, //下拉框设置默认值(单选) value为2的选项
dest:[], //下拉框设置默认值(多选)
}
});

06.main.js

v-if 控制流指令

v-if / v-else

v-if / v-else-if / v-else

判断条件也可以的多个条件组成

代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if控制流指令</title>
<script src="bli/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="role == 'admin' || role == 'vip'">
管理员你好
</div>
<div v-else-if="role == 'hr'">
hr你好
</div>
<div v-else>
你没有权限访问次页面
</div>
</div>
</body>
<script src="js/07.main.js"></script>
</html>

控制流指令.html

var app = new Vue({
el:'#app',
data:{
// role:'admin', //管理员
// role:'hr',
role:'vip',
}
});

07.main.js

计算属性

1.将分数渲染出来

2.将分数放input中,可以改变值。

3.计算出总分

4.计算出平均分

5.将平均分四舍五入一下

以上的计算过程可以存到计算属性中,运行效果一样。

当删除一个值的时,会拼接字符串,而不是计算值,该怎么办呢???

方式1:将input宽加上数字类型即可计算。(推荐使用)

代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性</title>
<script src="bli/vue.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<thead>
<th>学科</th>
<th>分数</th>
</thead>
<tbody>
<tr>
<td>数学</td>
<td><input type="text" v-model.number="math"></td>
</tr>
<tr>
<td>物理</td>
<td><input type="text" v-model.number="physics"></td>
</tr>
<tr>
<td>英语</td>
<td><input type="text" v-model.number="english"></td>
</tr>
<tr>
<td>总分</td>
<!-- <td>{{math + physics + english}}</td> -->
<td>{{sum}}</td>
</tr>
<tr>
<td>平均分</td>
<!-- <td>{{Math.round((math + physics + english) / 3)}}</td> -->
<td>{{average}}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="js/08.main.js"></script>
</html>

计算属性.html

var app = new Vue({
el:'#app',
data:{
math:90,
physics:80,
english:30,
},
computed:{
sum:function(){
return this.math + this.physics + this.english;
},
average:function(){
return Math.round(this.sum / 3)
}
}
});

08.main.js

方式2:parseFloat 强制转换为数字类型。

组件-全局及局部组件(作用域)

将一段常用的代码封装为一个组件。再调用这个组件。用的时候只需要写一对标签即可。可维护、可重复性高。

两个作用域(#seg1、#seg2)虽然都写了按钮,但是只绑定一个作用域(#seg1)。所以只显示1个按钮。

全局组件 component

两个作用域都要绑定,按钮才会存活。

局部组件 components

当把全局钩子注释掉以后,会报错。因为#seg2里的组件找不到。局部组件是不能共用的!!!

将#seg2里的组件去掉,就不会报错了。

也可以把局部组件的相同代码都封装到一个变量中。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全局及局部组件</title>
<script src="bli/vue.js"></script>
</head>
<body>
<div id="seg1">
<alert></alert>
</div>
<div id="seg2">
<!-- <alert></alert> -->
</div>
</body>
<script src="js/09.main.js"></script>
</html>

全局及局部组件.html

// var app = new Vue({
// el:"#app",
// }); // # 全局组件
/*Vue.component('alert',{
template:'<button @click="on_click">弹弹弹</button>',
methods:{
on_click: function(){
alert('Yo.');
}
}
});*/ var alert_component = {
template:'<button @click="on_click">弹弹弹</button>',
methods:{
on_click: function(){
alert('我是局部组件');
}
}
}; new Vue({
el:"#seg1",
// 局部组件
components:{
alert:alert_component
// alert:{
// template:'<button @click="on_click">弹弹弹</button>',
// methods:{
// on_click: function(){
// alert('我是局部组件');
// }
// }
// }
}
}); new Vue({
el:"#seg2"
});

09.main.js

组件-配置组件

template: 组件内容

点赞数应该是动态的。专门放到一个变量中。

data是一个函数

methods:定义事件

哈哈!点赞不求人!

在点赞之前应该判断该用户是否点赞过了。

多次点击只能加一次!!!

如果用户点赞过了,那么再次点击就是取消点赞。

选中的时候绑定一个样式。

优化:

方案1:如果template代码太长了,也可以用ES6 的反引号。

方案2:也可以将代码放到html页面中。(因为template的代码就是标签。

只要传选择器就好了。

功能上没有任何区别。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>配置组件</title>
<script src="bli/vue.js"></script>
<style>
.active{background:deeppink;}
</style>
</head>
<body>
<div id="app">
<like></like>
</div> <template id="like-component-tpl">
<button :class="{active:liked}" @click="toggle_like">
赞{{like_count}}
</button>
</template> </body>
<script src="js/10.main.js"></script>
</html>

配置组件

// 全局组件
Vue.component('like',{
// template:'<button :class="{active:liked}" @click="toggle_like">赞{{like_count}}</button>', // template:`
// <button :class="{active:liked}" @click="toggle_like">
// 赞{{like_count}}
// </button>`, template:'#like-component-tpl',
data:function(){
return {
like_count:10,
liked:false,
}
},
methods:{
toggle_like:function(){
if(!this.liked) // 当前没有点赞就加加。
this.like_count++;
else // 取消点赞
this.like_count--; this.liked = !this.liked;
}
}
}); new Vue({
el:"#app",
});

10.main.js

组件-组件通信之父子通信(从外部往组件内部传值)

之前在全局组件的时候,讲过一个例子,一个按钮弹出框。

那么问题来了,弹出的内容都是一样的,如何动态的弹出不同的值呢???

props 列表中变量才是有用的。

我们在标签中定义3个变量msg、a、b。但是我们只要msg的值。

props 列表中的变量才是有用的。(msg的值可以拿到,a、b的值都拿不到。)

props 列表中的没有的变量,是取不到值的,为undefined。

a标签的href链接是动态生成的。

如果有很多这样的a标签,就需要当该代表封装到组件中。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件-父子通信</title>
<script src="bli/vue.js"></script>
</head>
<body>
<div id="app">
<!-- <alert msg="娃哈哈" a='1' b='2'></alert> -->
<!-- <a href="/user/wahaha">wahaha</a> -->
<user username="wahaha"></user>
</div>
</body>
<script src="js/11.main.js"></script>
</html>

组件-父子通信

// 全局组件
// Vue.component('alert',{
// template:'<button @click="on_click">弹弹弹</button>',
// props:['msg'],
// methods:{
// on_click:function(){
// alert(this.a);
// }
// }
// }); // 全局组件
Vue.component('user',{
template:`<a :href="'/user/'+ username">{{username}}</a>`,
props:['username'],
methods:{}
}); new Vue({
el:"#app",
});

11.main.js

组件-组件通信之子父通信(通过事件的方式)

显示余额的父子组件

$emit是一个快捷方式,用于触发一个事件。在子元素(show标签)上去监听。

按钮是子组件,外头是父组件。子组件触发一个事件;父组件接收事件,同时修改父组件的值,然后div判断是否显示余额。

点击按钮显示余额。

也可以打印传过来的值。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件-子父通信</title>
<script src="bli/vue.js"></script>
</head>
<body>
<div id="app">
<balance></balance>
</div>
</body>
<script src="js/12.main.js"></script>
</html>

组件-子父通信

// 父组件
Vue.component('balance',{
template:`
<div>
<show @show-balance="show_div"></show>
<div v-if="xsye">你的余额:¥98元</div>
</div>
`,
data:function(){
return {
xsye:false, // 默认不显示余额
}
},
methods:{
show_div:function(data){
this.xsye = true; // 显示余额
console.log(data);
}
},
}); // 子组件
Vue.component('show',{
template:'<button @click="on_click">显示余额</button>',
methods:{
on_click(){
this.$emit('show-balance',{a:1,b:2});
}
}
}); new Vue({el:"#app",});

12.main.js

组件-组件通信之任意及平行组件间通信(调度器)

宝宝专门说,贝贝专门听。

注意:模板里面必须有个最外层的根元素。

默认显示:

输入值时:

如何将第一个组件输入的内容,显示在第二个组件中???(i_said ---> baobao_said)

调度器:任意组件间的通信。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件-任意及平行组件间通信</title>
<script src="bli/vue.js"></script>
</head>
<body>
<div id="app">
<baobao></baobao>
<beibei></beibei>
</div>
</body>
<script src="js/13.main.js"></script>
</html>

13.组件-任意及平行组件间通信.html

// Event 调度器
var Event = new Vue(); Vue.component('baobao',{
template:`
<div>
我说: <input @keyup="on_change" v-model='i_said'/> {{i_said}}
</div>`,
data:function(){
return {
i_said:'',
}
},
methods:{
on_change:function(){
Event.$emit('baobao-said-something', this.i_said);
}
},
}); Vue.component('beibei',{
template:`<div>宝宝说:{{baobao_said}}</div>`,
data:function(){
return {
baobao_said:'',
};
},
// mounted:挂载完毕。
mounted:function(){
// 在触发器调用之前,将this缓存成一个变量。
var me = this;
Event.$on('baobao-said-something', function(data){
console.log(data);
me.baobao_said = data;
});
}
}); new Vue({
el:'#app',
});

13.main.js

过滤器(格式化)

1.价格后面加上符号‘元’。

2.价格后面的单位也要动态的传值。(如:元、¥、$)

代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤器</title>
<script src="bli/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="price">
<!-- {{ price | currency }} -->
{{ price | currency('美元') }}
</div>
</body>
<script src="js/14.main.js"></script>
</html>

14.过滤器.html

// 过滤器
Vue.filter('currency',function(data,unit){
data = data || 0; // data有值就等于data,没值就为0.
unit = unit || '元'; // unit有值就等于unit,没值就为'元'.
return data + unit;
// return data + '元';
}); new Vue({
el:'#app',
data:{
price:10,
},
});

14.main.js

3.毫米与米的转换。

4.毫米与米的转换,保留两位小数。

自定义指令-基础配置

1.自定义指令

2.给只为true的元素定位(固定定位)

3.加一个按钮,切换是否定位。

默认都是没有定住的。点击之后定住,再点击之后就是取消定住。

默认、取消定住

定住

4.可以给很多按钮就加上。

默认、取消定位

定位

代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>15.自定义指令-基础配置</title>
<script src="bli/vue.js"></script>
<style>
.card{
width:200px;
background:#ccc;
padding:10px;
margin:5px;
}
</style>
</head>
<body>
<div id="app">
<div v-pin="card1.pinned" class="card">
<button @click="card1.pinned = !card1.pinned">定住/取消</button>
我就是我,不一样的烟火。
</div>
<div v-pin="card2.pinned" class="card">
<a @click="card2.pinned = !card2.pinned" href="#">pin it</a>
好好学习,天天向上。
</div>
<h1>头部</h1>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<h1>中部</h1>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<h1>底部</h1>
</div>
</body>
<script src="js/15.main.js"></script>
</html>

15.自定义指令-基础配置.html

// 自定义指令
Vue.directive('pin',function(el,binding){
// var $el = $(el); // 绑定的元素
var data = binding.value
// console.log(data); // true/false
if(data){ // 定住
el.style.position = 'fixed';
el.style.top = '10px';
el.style.left = '10px';
}else{ // 取消定住
el.style.position = 'static';
}
}); new Vue({
el:'#app',
data:{
card1:{
pinned:false,
},
card2:{
pinned:false,
}
},
});

15.main.js

自定义指令-配置传参及修饰符

以上例子只能定位到左上角,不够灵活。位置应该动态传参。

1.定位到右下角:

打印 var position = binding.modifiers;

console.log('position',position)  // position {bottom: true, right: true}

运行结果:已定位到右下角

2.定位到左下角,只要改一个值即可。

3.让一些卡片样式有所不同,突出。

获取该值(:true),设置样式。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>16.自定义指令-配置传参及修饰符</title>
<script src="bli/vue.js"></script>
<style>
.card{
width:200px;
background:#ccc;
padding:10px;
margin:5px;
}
</style>
</head>
<body>
<div id="app">
<div v-pin:true.bottom.left="card1.pinned" class="card">
<button @click="card1.pinned = !card1.pinned">定住/取消</button>
我就是我,不一样的烟火。
</div>
<div v-pin="card2.pinned" class="card">
<a @click="card2.pinned = !card2.pinned" href="#">pin it</a>
好好学习,天天向上。
</div>
<h1>头部</h1>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<h1>中部</h1>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<h1>底部</h1>
</div>
</body>
<script src="js/16.main.js"></script>
</html>

16.自定义指令-配置传参及修饰符.html

// 自定义指令
Vue.directive('pin',function(el,binding){
// var $el = $(el); // 绑定的元素
var data = binding.value
// console.log(data); // true/false var position = binding.modifiers;
// console.log('position',position) // position {bottom: true, right: true} var warning = binding.arg;
// console.log('warning',warning) // warning true warning undefined if(data){ // 定住
el.style.position = 'fixed'; for (var i in position){
if (position[i]){
el.style[i] = '10px';
}
}; if (warning === 'true'){
el.style.background = 'yellow';
} // el.style.top = '10px';
// el.style.left = '10px';
}else{ // 取消定住
el.style.position = 'static';
}
}); new Vue({
el:'#app',
data:{
card1:{
pinned:false,
},
card2:{
pinned:false,
}
},
});

16.main.js

混合 mixins

1.点击切换显示隐藏。

默认不显示div.

点击后显示div,再次点击有隐藏div.

代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>17.混合 mixins</title>
<script src="bli/vue.js"></script>
</head>
<body>
<div id="app">
<popup></popup>
</div>
</body>
<script src="js/17.main.js"></script>
</html>

index.html

// 弹出层组件
Vue.component('popup',{
template:`
<div>
<button @click="toggle">Popup显示</button>
<div v-if="visible">
<h4>title</h4>
好好学习,天天向上!
</div>
</div>
`,
data:function(){
return {
visible:false, // div默认不可见。
}
},
methods:{
toggle:function(){
this.visible = !this.visible;
}
},
}); new Vue({
el:"#app",
data:{},
});

17.main.js

2.鼠标移入、移出切换显示隐藏。

默认、移出

移入:

代码:

// 提示框组件  (鼠标移入移出显示、隐藏)
Vue.component('tooltip',{
template:`
<div>
<span @mouseenter="show" @mouseleave="hide">bys</span>
<div v-if="visible">月亮代表我的心。</div>
</div>
`,
data:function(){
return {
visible:false,
}
},
methods:{
show:function(){
this.visible = true;
},
hide:function(){
this.visible = false;
},
},
}); // 弹出层组件 (点击切换显示、隐藏)
Vue.component('popup',{
template:`
<div>
<button @click="toggle">Popup显示</button>
<div v-if="visible">
<span @click="hide">X</span>
<h4>title</h4>
好好学习,天天向上!
</div>
</div>
`,
data:function(){
return {
visible:false, // div默认不可见。
}
},
methods:{
toggle:function(){
this.visible = !this.visible;
},
hide:function(){
this.visible = false;
},
},
}); new Vue({
el:"#app",
data:{},
});

17.main.js

3.点击显示的div应该有个可以关闭的按钮。

注意:这两个组件有好多重复的代码!

点击后隐藏div

混合 mixins(相同的代表放在一起)

功能是一样的。注意:自己写的会覆盖mixins的。

代码:

// 混合 mixins (将相同的代码放一起)
var base = {
data:function(){
return {
visible:false,
}
},
methods:{
show:function(){
this.visible = true;
},
hide:function(){
this.visible = false;
},
toggle:function(){
this.visible = !this.visible;
},
},
} // 提示框组件 (鼠标移入移出显示、隐藏)
Vue.component('tooltip',{
template:`
<div>
<span @mouseenter="show" @mouseleave="hide">bys</span>
<div v-if="visible">月亮代表我的心。</div>
</div>
`,
mixins:[base],
}); // 弹出层组件 (点击切换显示、隐藏)
Vue.component('popup',{
template:`
<div>
<button @click="toggle">Popup显示</button>
<div v-if="visible">
<span @click="hide">X</span>
<h4>title</h4>
好好学习,天天向上!
</div>
</div>
`,
mixins:[base],
data:function(){
return {
visible:true, // 自己写的会覆盖mixins的。
}
},
}); new Vue({
el:"#app",
data:{},
});

17.main.js

插槽 slots

1.定义一个样式

2.内容都是相同的。动态传参(插槽)

3.如果头部、底部都要动态传参呢???定义name!!!

4.指定默认值。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插槽 slots</title>
<script src="bli/vue.js"></script>
<style>
.panel{
max-width:300px;
border:1px solid #999;
margin-bottom:15px;
}
.panel > *{
padding:15px;
}
.panel .title{
border-bottom:1px solid #999;
}
.panel .footer{
border-top:1px solid #999;
}
</style>
</head>
<body>
<div id="app">
<panel>
<div slot="title">aaa</div>
<div slot="content">bbb</div>
<!-- <div slot="footer">ccc</div> -->
</panel>
</div>
<template id="panel-tpl">
<div class="panel">
<div class="title">
<slot name="title"></slot>
</div>
<div class="content">
<slot name="content"></slot>
</div>
<div class="footer">
<slot name="footer">更多信息</slot>
</div>
</div>
</template>
</body> <script src="js/18.main.js"></script>
</html>

18.插槽 slots.html

Vue.component('panel',{
template:"#panel-tpl",
}); new Vue({
el:'#app',
data:{}
});

18.main.js

 
 

vue 总结的更多相关文章

  1. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  2. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  3. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  4. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  5. Vue + Webpack + Vue-loader 系列教程(2)相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

  6. Vue + Webpack + Vue-loader 系列教程(1)功能介绍篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...

  7. 关于Vue.js 2.0 的 Vuex 2.0,你需要更新的知识库

    应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...

  8. Vue.js 2.0 和 React、Augular等其他框架的全方位对比

    引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...

  9. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  10. 初探Vue

    Vue.js(读音/vju:/,类似于view),是近来比较火的前端框架,但一直没有怎么具体了解.实现过,就知道个啥的MVVM啦,数据驱动啦,等这些关于Vue的虚概念. 由于最近,小生在公司中,负责开 ...

随机推荐

  1. 通过 JDK 自带的 javap 命令查看 SynchronizedDemo 类的相关字节码信息

    首先切换到类的对应目录执行 javac SynchronizedDemo.java 命令生成编译后的 .class 文件 然后执行 javap -c -s -v -l SynchronizedDemo ...

  2. MVC Ajax.BeginForm 提交上传图片

    吃水不忘挖井人,如果对你有帮助,请说声谢谢.如果你要转载,请注明出处.谢谢! 异步提交时,出现图片不能上传. 起初我定格在  System.Web.Mvc  中.查询源码时,也是没有问题的.那问题出现 ...

  3. JS 60秒后重发送验证码

    //settime($("#getPhoneCode"),60); function settime($obj, time) { if (time == 0) { $obj.att ...

  4. ubuntu命令行打开网页

    在Ubuntu下,当需要打开其他格式文件时,比如pdf.jpg.mp3等格式文件,通常做法是进入到文件所在的目录,双击打开,很影响效率.事实上,可以通过命令xdg-open打开这些格式文件,甚至是网页 ...

  5. python:id与小数据池与编码

    一.id与小数据池 id:查的是内存地址 a = 100 b = 100 print(a == b)#比较的数值 print(a is b)#比较的是id print(id(a),id(b))#id相 ...

  6. Java异常学习总结一

    Java中的异常 定义 异常(Exception)就是在程序的运行过程中所发生的不正常的事件,它会中断正在运行的程序. 常见类型举例 所需文件找不到(ClassNotFoundException) 网 ...

  7. MySQL安全机制 DDL DCL

    一.MySQL用户管理 1. 修改用户密码 ===root修改自己密码=== 方法一: # mysqladmin -uroot -p'123' password 'new_password' //12 ...

  8. 利用Kettle 从Excel中抽取数据写入SQLite

    SQLite作为一种数据库可以配置为Kettle的数据输入和输出,这个例子是从Excel中抽取数据然后写入到SQLite中 配置测试并成功后如下 下面是配置步骤: Excel输入配置 sqlite配置 ...

  9. Spring的生命周期

    转:https://blog.csdn.net/liuxilil/article/details/4676088 Spring的生命周期. 容器启动,实例化所有实现了BeanFactoyPostPro ...

  10. JVM 符号引用与直接引用

       Java类从加载到虚拟机内存中开始,到卸载出内存为止,它的整个生命周期包括,加载 ,验证 , 准备 , 解析 , 初始化 ,卸载 ,总共七个阶段.其中验证 ,准备 , 解析 统称为连接.     ...