一、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、构建框架
new 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 = {
template : '#template_insert_or_update' ,
data ( ) {
return {
}
} ,
methods : {
} ,
created : function ( ) {
}
}
2.3、创建vue的路由对象
var rt = new VueRouter ( {
routes : [
{ path : '/add' , component : myTemplate}
]
} ) ;
2.4、将自定义的路由对象交给vue管理
new Vue ( {
el : '#app' ,
router : rt,
data : {
} ) ;
2.5、通过显示路由
< router-view> </ router-view>
2.6、通过切换路由
< router-link> xxx</ router-linke>
2.7、通过js代码控制路由
2.7.1、通过js代码切换路由
this . $router. push ( "/add" ) ;
2.7.2、获取路由参数
this . $route. query. id/ 等
三、BootStrap
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>
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.4、绑定数据
v-model="data中要绑定的数据"
4.5、绑定属性
< img :src = " u.img" />
< img v-bind: src= " u.img" />
4.6、插值表达式
{{}}