一 Vue的使用(基于js库)
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、显示路由
<router-view></router-view>
2.6切换路由
<router-link>xxx</router-link>
2.7获取路由参数
this.$route.query
三:BootStarp
3.1:导库
<link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="assets/jquery-3.5.1.min.js"></script>
<script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
3.2:设置container
<div class=container>
</div>
3.3设置两个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-for= "item in array"
4.2绑定按钮点击事件
@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插值表达式
{{}}