JavaWeb之vue

一、Web前端技术：1、展示：html ,css.2、交互：java applet , flash , javaScript(包含原生javascript时代，jquery时代，大前端时代[angularjs ,vue]).二、angularjs：1、起源：诞生2009年，由Misko Hevery等人创建,后被Google所收购。是一款优秀的前端JS框架，...

黄宝～

2886人浏览 · 2019-11-13 22:53:47

黄宝～ · 2019-11-13 22:53:47 发布

一、Web前端技术：
1、展示：html ,css.

2、交互：java applet , flash , javaScript(包含原生javascript时代，jquery时代，大前端时代[angularjs ,vue]).

二、angularjs：
1、起源：诞生2009年，由Misko Hevery等人创建,后被Google所收购。是一款优秀的前端JS框架，

angularJS最为核心的特性是：MVW（Model-View-Whatever）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

angularJS是一个JavaScript框架，是一个以javaScript编写的库。可通过<script>标签添加到HTML页面；

angularJS通过指令扩展HTML，且通过表达式绑定数据到HTML；

angularJS是一个以JavaScript文件形式发布的，可通过script标签添加到网页中。

2、优点：google出品，文档及组件丰富，支持数据与dom的自动绑定

3、不足：学习曲线陡峭，angularJS1.x与angularJS2.x不兼容

angularJS.x采用typescript语法

三、vue
1、定义：用于构建用户界面的渐进式框架。可以自底向上逐层应用,Vue核心库只关注视图层，易上手，便于与第三方库或既有项目整合。为复杂的单页应用提供驱动。

2、优点：轻量级、js语法、入门上手快。

Jquery关注dom,vue关注数据

3、vue使用步骤：引入vue.js , bootstrap.min.css;

构造vue对象（var vue=new Vue({ })）;

使用{ { } }将数据和DOM绑定；

改变数据即可查看浏览器效果。

eg1：编辑hello,World

<!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"/>
   <title>helloWorld</title>
   <link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
   <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
   <div class="container" id="app">
   <div class="row">
<div class="col-md-6">
<input type="text" v-model="name">//v-model表单绑定
<h3>Hello,{{name}}</h3>
</div>
   </div>
   </div>
</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^