vue.js做简易留言板教程 html留言板模板

Vue.js 入门

BootCDN（国内）

unpkg

cdnjs

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。

进入项目，安装并运行：

打开localhost：8080

vue实例：

选项API：

组件化应用构建

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

指令邦定

指令

指令 (Directives) 是带有 v- 前缀的特殊属性

v-bind：

v-on：

v-if

v-for：

v-model：

数据，方法，计算属性，侦听器

生命周期

组件

全局注册

局部注册

组件组合

组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信：父组件可能要给子组件下发数据，子组件则可能要将它内部发生的事情告知父组件。

prop 向下传递，事件向上传递

子组件要显式地用 props 选项 声明它预期的数据：

动态邦定prop

单项数据流

Prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。

注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。

自定义事件

每个 Vue 实例都实现了 事件接口 ，即：

父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

这里有一个如何使用载荷 (payload) 数据的示例：

官方支持的 vue-router 库

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。

相关问答

Q1: 使用Vue父子组件通信实现todolist的功能示例代码

先上代码

body

div

id="root"

div

input

v-model="inputValue"

/

button

@click="handleClick"submit/button

/div

ul

todolist

v-for="(item,index)

of

list"

:key="index"

:content="item"

:index="index"

@delete="handle"

/todolist

/ul

/div

script

Vue.component("todolist",{

props:

['content','index'],

template:

'li

@click="handleDelete"{{content}}/li',

methods:

{

handleDelete:function(){

this.$emit('delete',this.index)

}

}

})

new

Vue({

el:"#root",

data:

{

inputValue:'',

list:[]

},

methods:

{

handleClick:function(){

this.list.push(this.inputValue)

this.inputValue=''

},

handle:function(index){

this.list.splice(index,1)

}

}

})

/script

/body

创建todolist的基本结构

div

id="root"

div

input

v-model="inputValue"

/

button

@click="handleClick"submit/button

/div

ul

todolist

v-for="(item,index)

of

list"

:key="index"

:content="item"

:index="index"

@delete="handle"

/todolist

/ul

/div

在这里我们创建了一个todolist标签作为父组件，让它在里面循环遍历list作为我们的输出，同时定义了一个delete的监听事件。

接下来在script标签里定义子组件

Vue.component("todolist",{

props:

['content','index'],

template:

'li

@click="handleDelete"{{content}}/li',

methods:

{

handleDelete:function(){

this.$emit('delete',this.index)

}

}

})

定义了一个全局类型的子组件，子组件的props选项能够接收来自父组件数据，props只能单向传递，即只能通过父组件向子组件传递，这里将上面父组件的content和index传递下来。

将li标签作为子组件的模板，添加监听事件handleDelete用与点击li标签进行删除。

在下面定义子组件的handleDelete方法，用this.$emit向父组件实现通信，这里传入了一个delete的event，参数是index，父组件通过@delete监听并接收参数

接下来是Vue实例

new

Vue({

el:"#root",

data:

{

inputValue:'',

list:[]

},

methods:

{

handleClick:function(){

this.list.push(this.inputValue)

this.inputValue=''

},

handle:function(index){

this.list.splice(index,1)

}

}

})

handleClick方法实现每次点击submit按钮时向list里添加值，在每次添加之后将输入框清空。

而handle方法则是点击删除li标签，这里通过接受传入的index参数来判断点击的是哪一个li

这是删除前：

这是删除后：

总结：

通过点击子组件的li实现向外触发一个delete事件，而父组件监听了子组件的delete事件，执行父组件的handle方法，从而删除掉对应index的列表项，todolist中的list对应项也会被删除掉。

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。

您可能感兴趣的文章:Vue中父子组件通讯之todolist组件功能开发Vue从TodoList中学父子组件通信详解Vue的computed(计算属性)使用实例之TodoListvue实现ToDoList简单实例利用vue写todolist单页应用vue组件编写之todolist组件实例详解vue2的todolist入门小项目的详细解析使用Vue完成一个简单的todolist的方法Vue.js实现简单ToDoList

前期准备（一）vue实现留言板todolist功能

Q2: Vue.js 极简教程

来，直接开始：

创建一个 .html 文件，然后通过如下方式引入 Vue：

Vue.js 文档：

Vue 以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。

如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。

当然了，在使用Vue.js时，你也可以结合其他库一起使用，比如jQuery。

Q3: 我刚做了个静态网页,怎么做个留言板.ASP我知道 但是要有服务器支持.现在还在设计中，没法上传到网上.

可以实现的，我的一个静态网站留言板就是这样做的！

【一】表单提交页面为静态页面Massage.html，表单接收页面用handle.asp；

【二】ASP页面接收到表单提交的数据后，然后做一个验证，例如你不允许用户名为空，可以写个验证，如：

%

User=request("User")

'。。。其它接收数据省略，根据你的表单提交内容来写！

If User=" " Then

Response.Write("Script language=JavaScriptalert('您的用户名没有填写，请您返回填写完整！');location.href='Massage.html';/Script") '弹出提示，确定后返回当前提交页面

Response.End '不再处理后面的程序！

End if

'插入到数据库

SQL="insert into qh_book(User) values('"User"')" 'conn.execute(SQL)

Response.Write("scriptalert('您的留言已经成功提交,感谢您的留言');location.href='Massage.asp';/script") ’这里只做实例，具体插入数据库的内容根据你提交的内容决定，这里实现的一个功能是，当处理完用户提交的内容后，弹出对话框，告诉用户留言成功提交，当点击确定后，再返回先前的提交页面！

Conn.Close() ‘最后关闭数据库，这一步很关键

%

【三】留言内容提交后，你还需要对留言进行管理，这里可以做一个后台登录页面，用于管理员登录后台进行留言的管理，当管理员登录成功后，跳转到处理页面，这里的处理页面又是一个单独的页面，用于管理员修改、查询提交到数据库的内容，具体做法就不多说了，总体思路是这样的，朋友，大胆的尝试一下吧，每件事都有第一次，或成功或失败，都是一种经验，都是一种阅历，祝你的留言板早日做成功！！

【注：你若在本机做测试的话，可以通过安装APMserv来做调试，等需要购买虚拟空间的时候，须选择支持ASP的，若你现在连的是Access数据库的话，那么你购买的空间就必须支持这一数据库了】

我自己的那个静态网站网址 你可以看一下，是做的简易留言版，不过思路都是这么回事，我现在上传上去的不是完整的，真正测试好的马上就会上传上去了，你先看看效果！

Q4: Vue.js入门教程（十五）：如何创建自己的插件

通常，我们不会去接触vue底层的东西，又或者我们突发奇想需要自己创造一套框架。可回头看看我们使用最多的，其实还是插件。

插件，你也可以理解为就是一套方法的集合，当我们需要调用它的时候，引入一下就行了。

举个例子，比如说，swiper和elementui。

一般来说，我们每个项目都会安装一大堆的插件。用于处理各种交互效果和逻辑，但是，网上能搜到了插件不一定能解决我们所有的问题。也就是说，我们剩下30%左右的逻辑部分是需要自己处理的，比如说，转化时间，处理字符串等等。

这些东西网上是没有现成插件的，需要我们自己来写。此时，如果你每一个组件里面都去定义方法就显得太low了。

我们需要自己写一个插件，事半功倍！

一般来说，我们自己的js通常会写成下面的两种形式：

第一种，声明多个方法。这个做法也叫函数声明，这样做的好处是，声明到全局，你只要引用了它，在页面任意地方都可以使用。但是同样的缺点也很明显，容易引起全局污染，浪费浏览器资源。而且当我方法多的时候，调用起来很不方便。

第二种，这是我们最长使用的声明方式，函数表达式。目的就是加载了这个js以后，当我需要使用的时候，直接调用str.xxx()，就可以返回我需要的内容了。并且，方法封装在变量内部，不会引起全局污染，也符合模块化的规则。

ok，ok。我们接下来，就要把我们自己的方法定义到vue上去使用。

我首先把js放到了项目文件夹中，然后在main.js中引入。

调用起来是完全没有问题的。

但是，又好像哪里不太对？是的，这样我们仅仅是引入了一个js，并没有把它形成一个js的插件。

我们来看看一个标准的js插件的调用形式：

为什么他这个可以直接从this上面调用？？？

个人理解他的方法应该是被定义到全局的vue对象上面了，这里的this应该指的就是vue本身！

如果你看过龙哥前面的教程，你应该知道，当我们引入的插件，是一个对象的时候，应该使用：

use方法，可以把一个符合vue标准的对象加载到vue本体上。

首先给我们的main.js下面增加一行。

然后打开我们自己的js文件，按照下面的方式书写：

最后在页面中调用的时候：

到此我们的插件已经跟vue融为一体！其实插件本身还支持更多参数和写法，请各位同学自行研究吧！

Q5: Vue.js入门教程（三）双向绑定和数据渲染

既然清楚了原理，那么，接下来进入正题——我知道了vue怎么安装，那么我怎么使用呢？

在告诉你基础用法之前，我还是要先告诉你一个情况。

可能要令你有点失望。vue主要是侧重于数据端的。他的目的就是渲染数据和在前端调整一下数据逻辑。

他不是像jquery那样让你用来做特技的。就算你要做特技。你也应该通过css3/canvas而不是dom。

所谓的双向绑定，你可以理解就是把view。（你还不清楚mvc的话，请看第一章）

和model绑定到一起。说白了，就是你js中的绑定值变了。你dom中的内容就跟着一块变了。

vue是通过解析{{文字..}}来生成内容的。后面绑定方法，输出内容的时候都会讲到。

列表输出使用 v-for，这些v开头加横杠的叫做命令

这些命令是可以自定义的。但是那都属于高级操作，我们不用它也完全足够支撑做一个大型项目了。

其实你回发现，这里无论是v-for或者是v-什么其他玩意

它都深刻的遵循了es6的语法。这里不就是一个典型的for in 循环吗。不过我们现在都用for of了。

你记住这个用法，它就长这样。

前后端分离开发的关键在于：后台只提供接口。

我们获得的数据多数情况下，仅仅是一个json，而mvvm的关键就再于解析数据在前端完成了。如果你了解jsp或者php你会了解，数据的解析在mvc中，

是由后端完成的，而html只负责显示。

所以，当你了解了数据绑定和渲染以后，你可以第一时间先把数据输出到页面了。

我们前端最厉害的地方不就是处理能看得见的东西吗？

vue.js做简易留言板教程的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于html留言板模板、vue.js做简易留言板教程的信息别忘了在本站进行查找喔。