JavaWeb之Vue

一、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

[html]view plain copy
<!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>  
<script type="text/javascript">  
 var vue=new Vue({  
      el:"#app",  
      data:{  
           name:''  
      },  
      methods:{  
  
      }  
 });  
</script>  

4、vue对象：

el:Vue作用域，只有在这个范围内的dom受Vue控制

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

methods：时间处理方法对象

5、vue事件处理：v-on:<事件名> v-on:click=""

6、数据绑定：绑定指令：v-bind; { { } } ; v-html(以原始数据方式绑定)

绑定位置：文本；属性(dom属性，如title,src...)； css(包括style和class绑定)

7、条件指令：v-if :

v-else-if ; v-else ;v-show

8、循环指令：v-for

<liv-for ="item in items">

<liv-for="(item,index) in items">

<liv-for="(value,key,index) in object">

9、表单绑定：v-model

eg:<input type="text" v-model="name"/>

10、vue自定义组件：（1）定义：页面中完成某个特定功能的模块

提高代码复用

（2）格式：Vue.component('组件名'，

{ props : ['属性名' ] ，

template:'模板内容'

})

（3）自定义属性绑定：v-bind:属性名='实际对象'

11、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()

一、Web前端技术：

二、angularjs：

三、vue

猜你喜欢