Web前端（八）-Vue相关指令（插值、v-text/html/model/bind/on/if/show/for）、Bootstrap前端框架（字体图标、响应式步距、栅格系统、轮播图、缩略图、列表图、媒体对象）、瀑布流步骤、综合练习
Vue相关指令
-
插值: {{变量}} 将Vue对象中的变量值取出显示到当前位置
-
v-text="变量" 将Vue对象中的变量值取出 替换掉当前元素的文本内容
-
v-html="变量" 替换掉当前元素的html内容,会解析标签的效果进行展示
-
v-model="变量" 让控件的value值和变量进行绑定, 页面会影响变量,变量也会影响页面称为双向绑定
-
v-bind:属性名="变量" 让元素的属性和变量进行绑定 :属性名="xxx" 是简写
-
v-on:事件名="方法" 让元素的事件和vue对象中的某个方法进行绑定 @事件名="方法" 是简写
-
v-if="变量" 让元素是否显示和变量进行绑定, true显示 false隐藏 , 如果是false元素不会被创建
-
v-show="变量" 让元素是否显示和变量进行绑定, true显示 false隐藏, 如果是false元素也会被创建出来 ,是通过CSS样式控制了元素隐藏 , 如果涉及频繁切换显示隐藏时使用v-show, 这样能避免频繁创建元素,使用此方式 只需改变样式即可 执行效率高于v-if
-
v-for="变量 in 数组" 遍历某个数组 , 遍历的过程中会自动生成当前元素对象
测试代码1：文本相关指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<!--{{}}}插值:可以将vue对象中的变量值显示到此位置-->
<p>{{info}}</p>
<!-- v-text是替换元素的文本内容,插值写法网速慢时会有短暂的{{}}内容的显示-->
<p v-text="info"></p>
<!--v-html替换元素的html内容,会解析标签的效果-->
<p v-html="info"></p>
</div>
<!--引入Vue框架文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
let vm = new Vue({
el:"div",
data:{info:"文本测试<b>我是加粗标签</b>"}
})
</script>
</body>
</html>
测试代码2：双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<p v-text="info">测试</p>
<!--让控件的value值和变量info进行绑定
双向绑定:页面元素值发生改变会影响Vue对象中的变量值,
同时变量值改变也会影响页面-->
<input type="text" v-model="info">
</div>
<!--引入Vue框架文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
let vm = new Vue({
el:"div",
data:{
info:"hello"
}
})
</script>
</body>
</html>
测试代码3：属性绑定
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<!--v-if判断vue中变量的值,如果是true则显示元素,否则不显示
如果是false,元素不会被创建-->
<p v-if="isShow">我是p1标签</p>
<!--v-show作用和v-if一样, 区别是：当值为false时，元素依然会被创建出来
只不过设置了一个隐藏的样式-->
<!--频繁显示隐藏用v-show-->
<p v-show="isShow">我是p2标签</p>
<!--v-bind:属性名,让元素的某个属性和变量进行绑定-->
<a v-bind:href="myurl">我是超链接1</a>
<a :href="myurl">我是超链接2</a>
<!--v-on:事件名 给元素绑定事件，
事件触发的方法需要在vue对象的methods里面写 @事件名是简写-->
<input type="button" value="按钮1" v-on:click="fn1()">
<input type="button" value="按钮2" @click="fn1()">
</div>
<!--引入Vue框架文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
let vm = new Vue({
el:"div",
data:{
myurl:"http://www.baidu.com",
isShow:true
},
methods:{
fn1:function () {
alert("按钮点击了");
}
}
})
</script>
</body>
</html>
测试代码4：Vue猜数字
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
xmlns:v-text="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<!--v-model="变量" 让控件的value值和变量进行绑定-->
<input placeholder="请输入1-100之间的整数" type="text" v-model="myValue">
<!--v-on:事件名="方法" 让元素的事件和vue对象中的某个方法进行绑定 @事件名="方法" 是简写-->
<input type="button" value="按钮" v-on:click="fn()" >
<!--v-text="变量" 将Vue对象中的变量值取出 替换掉当前元素的文本内容-->
<h3 v-text="info"></h3>
</div>
<!--引入Vue框架文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
let x = parseInt(Math.random() * 100) + 1;
let count = 0;
let vm = new Vue({
el: "div",
data: {
myValue:"",
info:""
},
methods: {
fn: function () {
count++;
let i = vm.myValue;
if (i > x) {
vm.info = "猜大了";
} else if (i < x) {
vm.info = "猜小了";
} else if (i == x) {
vm.info = "恭喜您,第" + count + "次猜对了";
}
}
}
})
</script>
</body>
</html>
测试代码5：循环指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<tr>
<th>名字</th>
<th>工资</th>
<th>工作</th>
</tr>
<!--v-for遍历数组:数组中有多少对象,就会遍历生成多少个tr组合-->
<tr v-for="e in arr">
<td v-text="e.name">张三</td>
<td v-text="e.sal">3000</td>
<td v-text="e.job">销售</td>
</tr>
</table>
<!--引入Vue框架文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
let vm = new Vue({
el:"table",
data:{
arr:[{name:"刘备",sal:6000,job:"程序员"},
{name:"关羽",sal:3000,job:"人事"},
{name:"张飞",sal:2000,job:"财务"}]
}
})
</script>
</body>
</html>
测试代码6：综合练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<div>
<h3>欢迎{{user.nick}}回来!</h3>
<!--如果isLogin为ture 则显示 退出登录 反之 显示登录-->
<input v-if="!isLogin" type="button" value="登录" @click="login()">
<div v-if="isLogin">
<input type="button" value="退出登录" @click="logout()">
<input type="text" v-model="name">
<input type="button" value="添加" @click="add()">
</div>
</div>
<ul>
<li v-for="name in arr" v-text="name"></li>
</ul>
</div>
<!--引入Vue框架文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
let vm = new Vue({
el:"body>div",
data:{
/*user变量对应的是一个对象类型,里面有nick属性*/
user:{nick:"张学友"},
isLogin:false,
arr:["悟空","八戒","沙僧"],
name:""
},
methods:{
login:function () {
vm.isLogin=true;
},
logout:function () {
vm.isLogin=false;
},
add:function () {
//把用户输入的名字添加到
vm.arr.push(vm.name);
}
}
})
</script>
</body>
</html>
Bootstrap前端框架
-
是对前端HTML,CSS,jQuery,JavaScript内容的封装, 可以让前端页面开发效率提高
-
Bootstrap框架工作原理
-
此框架把前端开发中一些常见的效果,CSS样式代码部分进行了封装, 可以通过给元素添加class属性的方式让元素直接作用上这些样式, 这样能让前端开发过程中尽量的少些一部分CSS样式代码.
-
-
学习BootStrap框架主要学习的就是此框架中封装好了哪些效果, 只需要掌握从文档中找到对应的内容即可
-
如何使用Bootstrap?
在文档中找到基本模板,在模板基础上做相关开发
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>按钮 参见文档: 全局CSS样式->按钮
图片 参见文件: 全局CSS样式->图片
测试代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<a href="">查看详情</a>
<a class="btn btn-default" href="">查看详情</a>
<h3>可作为按钮使用的标签</h3>
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
<h3>按钮样式</h3>
<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger"