前言

Vue是一个非常流行的前端MVVM框架，它是用数据驱动和基于组件的思想构建的，与angular和react一起被称为前端三框架。与angular和react相比，vue更轻、更高效、更易于使用。也可以逛逛vue官网，看看它的介绍和核心功能。一个简单粗暴的理解是，用vue开发的时候，就是操纵数据，然后vue会处理，用数据驱动改变DOM。有了vue，我们可以专注于如何处理数据，当数据发生变化时，页面显示也会发生变化。与jquery相比，操作DOM元素的开发方法可以有效提高开发效率，个人认为高出近两三倍。

一、安装

我们可以通过npm或者直接引入脚本标签来安装vue。第二种方式，为了方便解释，我们只需要在html页面中引入标签。个人测试开发可以使用bootcdn资源。

剧本src=' http:https://cdn.bootcss.com/vue/2.6.10/vue.min.js'/script二世。核心思想

“数据绑定”是vue的核心思想。在这里，作者举了一个hello world的例子来说明这个想法。

Html代码

Div id=' app' p {{message}}/p输入v-model=' message '/div JavaScript代码

新Vue({ el: '#app '，data : { message : ' Hello Vue！'}})页面效果

我们在html代码中设置一个id为“app”的div，然后在javascript中实例化一个属性为El“# app”的vue对象，表示这个vue对象用来处理这个div的显示。

然后，在vue对象的数据属性中设置一个消息字段，该字段在两个方向上绑定到页面的p元素和输入元素。

这样，只要消息字段发生变化，p元素的内容就会发生变化。只要输入的输入内容发生变化，消息字段就会发生变化，从而导致p元素的内容发生变化。所以我们改变了页面中输入框的值，p元素中的内容也随之改变。

三.vue示例的基本组成

新Vue({ el: '#app '，data : { message : ' Hello Vue！'、url: 'www.salasolo.com' }、methods : { showmsg : function(){ alert(this . message)}、jump URL : function(){ location . href=this . URL } }、})可以看出，vue实例有三个基本属性，el属性用于指定绑定的页面容器，data属性存储页面显示的数据，methods放置页面调用的一些方法。

第四，数据绑定

使用以下语法将页面元素的内容绑定到vue实例的data属性中的字段。

1.文本

Span消息： {{ message }}/span2。原始html

Span v-html='htmlCode'/span3。目录

Span v-for='列表中的项目“{item}}/span 4。情况

Span v-if='isHuman '我是人/span span v-否则我不是人/span5。属性

Av-bind: href=' URL' rel='外部nofollow '这是一个链接/aim g 3360 src 3360 href=' imgur ' rel='外部nofollow' alt='这是一张图片'/6。表示

Span1 1=: {{ 1 1 }}/span V .事件绑定

使用以下语法将页面元素的交互事件绑定到vue实例的methods属性中的方法。

1.点击事件

按钮类型=' button ' v-: Click=' showMsg '单击可调用showMsg方法/button2。选择一个事件

选择on:变更=' showchangemsg '选项值=' 1 '选项1/选项选项值='2 '选项2/选项/选择VI。综合例子

Html代码

Div id=' app商品列表/h3 hr/表th td商品名称/tdtd商品图片/tdtd商品数量/tdtd操作/td /th tr v-for='列表' TD { { item }中的'(item，Index)'。名称}}/TD TD img src=' http :项。im gur '/TD TD { { item }。数量}}/TD TD按钮类型='按钮' v-on :点击='删除(索引)'删除此产品/按钮/TD

new Vue({ El : ' # app }，data: { list:[] }，create d : function(){ this . LoadProductList()；}，methods : { LoadProductList : FuncTion(){ $。post('/product/apiGetList '，function(data){ this . list=data . data . list；});}，deleteproduct : function(index){ var _ this=this；$.post ('/product/apidelete '，{productid: _ this。list [index] ['productid']}，function () {alert('删除成功')；});}}，})上述代码表示在页面初始化时，后台服务器获取的商品列表数据被ajax请求赋给vue实例数据的list字段，然后使用vue模板语法循环渲染页面，每个商品绑定一个delete button click事件，点击后调用vue实例的deleteProduct执行商品删除操作。

以上是对vue框架的简单介绍，大家可以在vue官网了解更多高级应用。

以上是边肖介绍的前端框架vue的详细讲解和整合，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！