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

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

1.11导入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 通过<router-view></router-view>显示路由

2.6 通过<router-link>xxx</router-link>切换路由

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="doUpdate"
v-on: @click="doUpdate"

4.4绑定属性

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

4.5插值表达式

{{}}