Vu

落日映苍穹つ 2022-03-15 15:54 213阅读 0赞

# 1.前端框架介绍 #

老牌  
jquery -> 更简单的方式去操作 dom 对象（标签对象）  
extjs -> 更适合做后台管理系统  
easyui -> 模仿了 extjs 免费

mvc -> mvvm m模型 v视图 vm(view model) 控制器  
vue 国内开源的js框架  
argularjs 国外js框架  
提倡前后台分离，

传统的后台开发人员：  
controller -> jsp， service， dao -> 页面展示部分，需要用jsp等技术负责数据展示

前后台分离之后，后台开发人员  
service, dao -> 负责准备模型数据即可

前台开发人员，负责页面之间的跳转、从后台获取模型数据，展示数据

# 2.VUE #

渐进式的js框架

*  传统 `<script src="js路径">` 成本低
 *  js 分模块，编译，集成less，打包，发布，npm， 成本太高

webstorm(html,css,js) 和 idea (java)

# 3. 使用 #

1.  引入vue.js

<script src="vue.js"></script>

1.  创建Vue对象

var vue = new Vue({ 
        el: 视图对应的标签
        data: 模型数据
    });

1.  展示模型数据  
    两标签之间的普通文字，要从模型中获取数据，语法使用 \{ \{模型数据的名称\}\}  
    标签的属性需要从模型中获取值：v-bind:属性名 (v-bind 绑定指令)

<div id="app">
        
        <h1>姓名：{ { name}}, 年龄: { { age}}, 图片 { { photo}}</h1>
    
        
        <img v-bind:src="photo">
    </div>
    <script>
    // el -> element
    var vue = new Vue({ 
        el: '#app', /*vue 对象对应的视图是id为app的标签*/
        data: {  /*data 中包含的是模型数据*/
            name:'zhangsan',
            age: 18,
            photo: '2_1.bmp'
        }
    });
    </script>

当模型数据发现变化，那么视图也会跟着变动(被重新渲染(render) )

1.  v-for 用来遍历一个集合

v-for="(临时变量名,下标变量) in 集合名"

其中下标变量从0开始

1.  v-if  
    用来进行条件判断，当条件成立，才会渲染视图，如果条件不成立，不会生成html代码

<div id="app">
        <h3 v-if="hasError">用户名不正确</h3>
    </div>
    
    <script>
    var vue = new Vue({ 
        el:"#app",
        data:{ 
            hasError:false /*没有错误*/
        }
    });
    </script>

1.  v-show  
    用来进行条件判断，当条件成立，把此标签显示出来，如果条件不成立，会把此标签隐藏起来
2.  事件处理  
    传统方式处理事件

vue 来处理事件 格式：v-on:事件名称， 事件名称前不需要再加on了

<input type="button" v-on:click="方法名">
    <input type="button" v-on:mouseout="方法名">
    
    var vue = new Vue({
        el:
        data:
        methods:{
            方法1：function(){},
            方法2：funciton(){},
            ...
        }
    });

1.  双向绑定 v-model

*  v-bind 模型数据发生了改变，视图也会重新渲染，模型会影响视图，而反之不行
 *  v-model, 不仅是数据改变影响视图，而且视图改变也会影响数据，尤其配合表单使用

1.  简化写法

*  `v-bind:属性名` 可以被简化为 `:属性名`
 *  `v-on:事件名` 可以被简化为 `@事件名`

// 使用最底层的 api 与服务器交互