m.lom599.com_手机版乐白家网址_乐百家手机首页登录

实例代码,个人网站留言页面

作者: 手机版乐白家网址  发布:2019-07-10

今天和大家分享一下用 animate 实现滑动切换效果的小例子

首先,上个人网站的留言页面,大家可以看看效果:留言板

一、v-bind 缩写

大家都知道jQuery 提供的有一下几种方法能够实现滑动效果:

图片 1

<!-- 完整语法 -->
<a v-bind:href="url"></a>

<!-- 缩写 -->
<a :href="url"></a>

<!-- 完整语法 -->
<button v-bind:disabled="someDynamicCondition">Button</button>

<!-- 缩写 -->
<button :disabled="someDynamicCondition">Button</button>

1.slideDown()
2.slideUp()
3.slideToggle()

前端为了省事,使用jQuery编写,后台使用php简单读写MySQL数据库。

二、v-on 缩写

但是以上的滑动不太方便控制其滑动的方向,所以我们还是自己动手写一个吧。。。

数据库设计和实现思路

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>

<!-- 缩写 -->
<a @click="doSomething"></a>

其代码如下:

数据库创建了一个表:comments,结构如下图:

三、过滤器

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <style type="text/css">
      body{
        width: 100%;
        height: auto;
      }
      .content{
        width: 150px;
        height: 50px;
        position: absolute;
        top: 20px;
        left: 20px;
        overflow: hidden;
        background-color: red;
      }
      .slide-box{
        width: 300px;
        position: relative;
      }
      .slide1{
        width: 150px;
        height: 50px;
        float: left;
        display: inline-block;
        line-height: 50px;
        text-align: center;
        background-color: #BDD8CF;
      }
      .slide2{
        width: 150px;
        height: 50px;
        float: right;
        display: inline-block;
        line-height: 50px;
        text-align: center;
        background-color: #C1C4C4;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="slide-box clearfix">
      左边的元素
      右边的元素
    </div>
    </div>


  <script src="js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $(function(){
      $(".content").hover(function(){
        $(".slide-box").stop(true).animate({right:"150px"},'slow');
      },function(){
        $(".slide-box").stop(true).animate({right:"0"},'slow');
      });
    })
  </script>
  </body>
</html>

图片 2

{{ message | capitalize }}

以上代码即可以实现一个完整的滑动效果。但是有一点需要注意,

全部评论(包括文章评论回复,留言板)都写在同一张表中,不同的评论区用字段belong区分

四、条件渲染

图片 3

同一个评论区里,parent为0表示为评论,parent为某值时表示为哪个评论的回复,思路不复杂。

v-if
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>


<div v-if="Math.random() > 0.5">
 Sorry
</div>
<div v-else>
 Not sorry
</div>
template-v-if
<template v-if="ok">
 <h1>Title</h1>
 <p>Paragraph 1</p>
 <p>Paragraph 2</p>
</template>
v-show
<h1 v-show="ok">Hello!</h1>

如上图所示,需要加上 stop() 事件 ,防止鼠标快速移动时产生的多个事件,形成一个栈队,造成鼠标移除后依旧滑动甚至闪动的效果。

注意,这里并不讲CSS,大家根据自己的需要定制,现在开始封装:

五、列表渲染 for

以上这篇animate 实现滑动切换效果【实例代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

定下功能

v-for
<ul id="example-1">
 <li v-for="item in items">
 {{ item.message }}
 </li>
</ul>
var example1 = new Vue({
 el: '#example-1',
 data: {
 items: [
  { message: 'Foo' },
  { message: 'Bar' }
 ]
 }
});

<ul id="example-2">
 <li v-for="item in items">
 {{ parentMessage }} - {{ $index }} - {{ item.message }}
 </li>
</ul>
var example2 = new Vue({
 el: '#example-2',
 data: {
 parentMessage: 'Parent',
 items: [
  { message: 'Foo' },
  { message: 'Bar' }
 ]
 }
});

我们根据自己的需要定下功能,首先我的网站并没有实现消息提醒,即时通讯的功能,所以评论回复并不会提示站长或者用户,只会对留言区产生效果,所以我们只要简单实现以下功能:

数组变动检测
Vue.js 包装了被观察数组的变异方法,故它们能触发视图更新。被包装的方法有:push(), pop(), shift(), unshift(), splice(), sort(), reverse()

1、显示评论列表

example1.items.push({ message: 'Baz' });
example1.items = example1.items.filter(function (item) {
 return item.message.match(/Foo/);
}); 
template-v-for
<ul>
 <template v-for="item in items">
 <li>{{ item.msg }}</li>
 <li class="divider"></li>
 </template>
</ul> 

2、能够提交评论

对象 v-for

3、进行回复

<ul id="repeat-object" class="demo">
 <li v-for="value in object">
 {{ $key }} : {{ value }}
 </li>
</ul>
new Vue({
 el: '#repeat-object',
 data: {
 object: {
  FirstName: 'John',
  LastName: 'Doe',
  Age: 30
 }
 }
}); 

评论类

值域 v-for

我们将评论的功能封装成一个类,通过实例化就能创建不同的评论区,所以不难想到,

<div>
 {{ n }} 
</div>

实例化的时候我们需要传入的参数可能有:评论区的id、获取评论的php地址,提交评论的php地址。

六、方法与事件处理器 方法处理器

所以我们可以猜想实例化评论区的代码可能为:

<div id="example">
 <button v-on:click="greet">Greet</button>
</div>

var vm = new Vue({
 el: '#example',
 data: {
 name: 'Vue.js'
 },
 // 在 `methods` 对象中定义方法
 methods: {
 greet: function (event) {
  // 方法内 `this` 指向 vm
  alert('Hello '   this.name   '!')
  // `event` 是原生 DOM 事件
  alert(event.target.tagName)
 }
 }
})

// 也可以在 JavaScript 代码中调用方法
vm.greet(); // -> 'Hello Vue.js!'
var oCmt = new Comment({
 parent: $('#box'),      //你想要将这个评论放到页面哪个元素中
 id: 0,
 getCmtUrl: './php/getcomment.php',
 setCmtUrl: './php/comment.php'
})

内联语句处理器

当然,我是在Comment类上定义一个静态方法

<div id="example-2">
 <button v-on:click="say('hi')">Say Hi</button>
 <button v-on:click="say('what')">Say What</button>
</div>
new Vue({
 el: '#example-2',
 methods: {
 say: function (msg) {
  alert(msg)
 }
 }
});
Comment.allocate({
 parent: $('#box'),
 id: 0,
 getCmtUrl: './php/getcomment.php',
 setCmtUrl: './php/comment.php'
})

有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法

大同小异,只是初始化的地方不同而已

<button v-on:click="say('hello!', $event)">Submit</button>
 methods: {
 say: function (msg, event) {
 // 现在我们可以访问原生事件对象
 event.preventDefault()
 }
};

构造函数

## 事件修饰符

function Comment(options){
 this.belong = options.id;
 this.getCmtUrl = options.getCmtUrl;
 this.setCmtUrl = options.setCmtUrl;
 this.lists = [];
 this.keys = {};
 this.offset = 5;
}

var fn = Comment.prototype;

Comment.allocate = function(options){
 var oCmt = new Comment(options);
 if (oCmt.belong == undefined || !oCmt.getCmtUrl || !oCmt.setCmtUrl) {
  return null;
 };
 oCmt.init(options);
 return oCmt;
};
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat">

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

里面的变量和方法我们慢慢解释,如果你不定义一个allocate方法,那么可以写成:

## 按键修饰符

function Comment(options){
 this.belong = options.id;
 this.getCmtUrl = options.getCmtUrl;
 this.setCmtUrl = options.setCmtUrl;
 this.lists = [];
 this.keys = {};
 this.offset = 5;
 if (this.belong == undefined || !this.getCmtUrl || !this.setCmtUrl) {
  return null;
 };
 this.init(options)
}

var fn = Comment.prototype;
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

变量先不说,像我都是先写功能函数,然后需要添加属性变量再回头来添加,我们只需要看到构造函数最后执行了:

全部的按键别名:enter,tab,delete,esc,space,up,down,left,right

this.init(options)

## 其他实例

从名字可以看出是初始化函数。

new Vue({
 el: '#demo',
 data: {
 newLabel: '',
 stats: stats
 },
 methods: {
 add: function (e) {
  e.preventDefault()
  if (!this.newLabel) {
  return;
  }
  this.stats.push({
  label: this.newLabel,
  value: 100
  });
  this.newLabel = '';
 },
 remove: function (stat) {
  if (this.stats.length > 3) {
  this.stats.$remove(stat); // 注意这里的$remove
  } else {
  alert('Can't delete more!')
  }
 }
 }
});

init函数

七、过渡 CSS 过渡

fn.init = function (options) {
 //初始化node
 this.initNode(options);
 //将内容放进容器
 this.parent.html(this.body);
 //初始化事件
 this.initEvent();
 //获取列表
 this.getList();
};
<div v-if="show" transition="expand">hello</div>
然后为 .expand-transition, .expand-enter 和 .expand-leave 添加 CSS 规则:

/* 必需 */
.expand-transition {
 transition: all .3s ease;
 height: 30px;
 padding: 10px;
 background-color: #eee;
 overflow: hidden;
}

/* .expand-enter 定义进入的开始状态 */
/* .expand-leave 定义离开的结束状态 */
.expand-enter, .expand-leave {
 height: 0;
 padding: 0 10px;
 opacity: 0;
}

本文由m.lom599.com发布于手机版乐白家网址,转载请注明出处:实例代码,个人网站留言页面

关键词: m.lom599.com

上一篇:小白谈谈对JS原型链的理解,实现代码
下一篇:没有了