VUE

最新推荐文章于 2026-06-22 21:34:47 发布

原创最新推荐文章于 2026-06-22 21:34:47 发布 · 688 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Web前端

本文对比介绍了AngularJS和Vue这两个流行的前端框架。AngularJS由Google推出，具备丰富的特性和组件支持，但学习曲线较陡峭；Vue则以其轻量级、易上手的特点受到开发者青睐，适用于快速构建用户界面。

一、angularjs介绍

1、AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVW（Model-View-Whatever）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
2、AngularJS 是一个 JavaScript框架。它是一个以 JavaScript 编写的库。它可通过 <script> 标签添加到HTML 页面。
3、AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。
4、AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中。

5、angularjs特点:

优势：google出品
   文档及组件丰富
         支持数据与dom的自动绑定
不足：学习曲线陡峭
         angularjs 1.x与angularjs2.x不兼容
         angularjs2.x采用typescript语法

二、vue介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

1、为什么使用vue
   轻量级
   js语法
   入门及上手快
vue与Jquery比较
     jquery关注dom
    vue关注数据，不关注dom

<!DOCTYPE html>
<html lang="en">
<head>
		<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css" />
    <!--[if lt IE 9]>
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/html5shiv.min.js"></script>
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/respond.min.js"></script>	
<![endif]-->

<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/jquery.min.js"></script>
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./vue.js"></script>
	<title>Document</title>
</head>
<body>
	<div class="container" id="abc">
	  <div class="row">
	     <div class="col-md-4">
       <input type="text" v-model="name"/>
          <p>Hello,{{name}}</p>
          <p>{{time}}</p>
	     </div>
	   </div>
     </div>
</body>
</html>
<script type="text/javascript">
  var vue=new Vue({
  	el:"#abc",
    data:{
    	name:'Lucy',
    	time:new Date()
    }
  });

</script>

2、vue初步使用介绍

第一步：引入

第二步：构造vue对象

第三步：使用{{}}将数据和DOM绑定

第四步：改变数据即可查看结果

3、vue对象介绍

el：vue的作用域，即只有在这个作用域里的dom受vue控制

data：vue页面的数据模型，该数据模型为一个javascript对象，且在运行过程中该对象的属性不允许增加，因此页面数据模型必须提前定义好

metho：事件处理方法对象

4、vue事件处理

v-on:<事件名>
v-on:click

5、数据绑定

绑定指令：v-bind、{{}}
v-html:以原始数据方式绑定
绑定位置：
文本。文本可以出现的地方
属性。dom对象的属性，如title,src等
css。包括style和class绑定

三、vue常用指令

1、条件指令
v-if
<p v-if="true">显示</p>
v-else-if
v-else
v -show

2、循环指令
v-for
<li v-for ="todo in todos">
<li v-for="(todo,index) in todos">
<li v-for="(value,key,index) in object">

3、表单绑定
v-model
<input v-model="name" />

4、vue自定义组件

组件：组件可以理解为页面中的完成某个特定功能的模块
为什么要使用组件

代码复用。DRY（Don't Repeat Yourself）原则

vue.component('组件名',{props:['属性名'],template:'模板内容'})
自定义组件使用
<组件名>
自定义属性绑定

v-bind:属性名='实际对象'

5、vue ajax

(1)axios
function registerUser(params ) { return axios.post(`${base}/xuke/companyaccount/register.do`, params).then(res => res.data) }
function checkmobile(params) { return axios.get(`${base}/xuke/companyaccount/checkmobile.do`, { params: params }).then(res => res.data) }
(2)jquery.ajax
$.get()
$.post()