论文项目总结02-前端技术点总结

一、Vue的使用（基于js库）

1.1、导入js库

<!--vue-->
<script src="assets/vue.min-v2.5.16.js"></script>
<!-- 路由 -->
<script src="assets/vue-router.min-2.7.0.js"></script>
<!-- 发送http请求 -->
<script src="assets/axios.min.js"></script>

1.2、放个div，将管理权交给vue

<div id=app>
    
</div>

1.3、构建框架

//创建一个vue实例（对象）
new Vue({
    //将id为app的div的管理权交给vue
    el: '#app',
    //网页控件和数据进行双向绑定
    data: {
        userCode: null,
        pwd: null
    },
    //要绑定的函数
    methods: {
        
    },
    //页面加载完成后执行
    created: function () {
        
    }

二、Vue路由的基本使用

2.1、定义模板

<template id="template_insert_or_update">

</template>

2.2、创建模板的实例对象

var myTemplate = {
    //设置id为template_insert_or_update的模板
    template: '#template_insert_or_update',
    //要绑定的数据
    data(){
    	return{
              
        }
    },
    //要绑定的函数
    methods:{
        
    },
    //页面加载完成后执行
    created: function () {
        
    }
}

2.3、创建vue的路由对象

//创建router实力，维护路由（点击不同链接，显示不同的模板）
        var rt = new VueRouter({
            routes: [
                {path: '/add', component: myTemplate}
            ]
        });

2.4、将自定义的路由对象交给vue管理

//创建vue实例对象
        new Vue({
            //将id=app的div的管理权交给vue
            el: '#app',
            router: rt, //将自定义的路由绑定到vue实例
            //需要绑定的数据
            data: {
                
            });

2.5、通过显示路由

2.6、通过xxx切换路由

2.7、通过js代码控制路由

2.7.1、通过js代码切换路由

this.$router.push("/add");

2.7.2、获取路由参数

this.$route.query

三、BootStrap

1、导库

<!--注意：顺序不能错-->
<!-- bootstrap的样式，注意rel属性别忘了写-->
<link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery库 -->
<script src="assets/jquery-3.5.1.min.js"></script>
<!-- bootstrap库 -->
<script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

2、设置container

<div class="container">
    
</div>

3、布局相关

3.1、行

<div class="row">
    
</div>

3.2、设置两个div水平平分整个屏幕

<div class="row">
    <div class="col-md-6">
        
    </div>
    <div class="col-md-6">
        
    </div>
</div>

3.3、一个div宽度占6个格，但是要水平居中显示

<div class="row">
    <div class="col-md-6 col-md-offset-3">
        
    </div>
</div>

3.4、表单相关

1、控制文本框的样式

<input type="text" class="form-control"/>

2、控制按钮的样式， 要求使用超链接的样式

<button class="btn btn-link">
    百度一下
</button>

3、标签

<label>用户名：</label>

4、表格

<table class="table table-striped">
	<!--表标题-->
    <caption>这是一个标题</caption>
    
    <!--表头-->
    <thead>
    	<tr>
            <th>用户名</th>
        </tr>
    </thead>
    
    <!--表内容-->
    <tbody>
    	<tr>
            <td>张三</td>
        </tr>
    </tbody>
</table>

5、用于分页的导航

<ul class="pagination">
    <li class="active">
    	<a>1</a>
    </li>
</ul>

四、Vue常用指令

4.1、逻辑控制

v-if=" "和v-else= " "

4.2、循环控制

v-for= "item in array"

4.3、绑定按钮点击事件

@click="doLogin"
v-on:click="doLogin"

4.3、绑定数据

v-model="data中要绑定的数据"

4.4、绑定属性

<img :src="u.img"/>
<img v-bind:src="u.img"/>

4.5、插值表达式

{{ }}