Vue.js（一）
什么是Vue.js
-
Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）
-
Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！
-
Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）
-
前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；
为什么要学习流行框架
- 企业为了提高开发效率：在企业中，时间就是效率，效率就是金钱；
- 企业中，使用框架，能够提高开发的效率；
- 提高开发效率的发展历程：原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js（能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了】）
- 在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑；
- 增强自己就业时候的竞争力
- 人无我有，人有我优
- 你平时不忙的时候，都在干嘛？
框架和库的区别
- 框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。
- node 中的 express；
- 库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。
-
- 从Jquery 切换到 Zepto
-
- 从 EJS 切换到 art-template
Vue之 - 基本的代码结构和插值表达式、v-cloak、v-text
- 使用v-cloak可以解决插值表达式闪烁的问题。
- 使用v-text默认是没有闪烁问题的。
- 使用v-text会覆盖元素中原本的内容；使用插值表达式可以在拼接字符串，只会替换原来的占位符。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<h1 v-text="msg"></h1>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'Hello Vue'
}
})
</script>
</html>
Vue指令之v-html
- v-html指令可以将msg中的HTMLdiamagnetic展示出来，而v-text只会以文本形式输出。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app" v-html="msg">
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'<h1>我是一个大标题，很大的标题</h1>'
}
})
</script>
</html>
Vue指令之v-bind的三种用法
- v-bind指令是Vue中用于绑定属性的指令
- v-bind指令可简写成 :要绑定的属性
- v-bind中可以写js表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="button" value="查看时间" :title="'现在的时间是:'+msg"/>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:new Date()
}
})
</script>
</html>
Vue指令之v-on和事件修饰符
- Vue 中提供了 v-on: 事件绑定机制
- v-on可简写为@事件
事件修饰符：
- .stop 阻止冒泡
- .prevent 阻止默认事件
- .capture 添加事件侦听器时使用事件捕获模式
- .self 只当事件在该元素本身（比如不是子元素）触发时触发回调
- .once 事件只触发一次
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- 使用 .stop 阻止冒泡 -->
<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
<!-- 使用 .prevent 阻止默认行为 -->
<a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a>
<!-- 使用 .capture 实现捕获触发事件的机制 -->
<div class="inner" @click.capture="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
<!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 -->
<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
<!-- 使用 .once 只触发一次事件处理函数 -->
<a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a>
<!-- 演示： .stop 和 .self 的区别 -->
<div class="outer" @click="div2Handler">
<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
</div>
<!-- .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为 -->
<div class="outer" @click="div2Handler">
<div class="inner" @click.self="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
methods: {
div1Handler() {
console.log('这是触发了 inner div 的点击事件')
},
btnHandler() {
console.log('这是触发了 btn 按钮 的点击事件')
},
linkClick() {
console.log('触发了连接的点击事件')
},
div2Handler() {
console.log('这是触发了 outer div 的点击事件')
}
}
})
</script>
</html>
在Vue中使用样式
使用class样式
- 数组
<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>
- 数组中使用三元表达式
<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>
- 数组中嵌套对象
<h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>
- 直接使用对象
<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>
使用内联样式
- 直接在元素上通过
:style的形式，书写样式对象
<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>
- 将样式对象，定义到
data中，并直接引用到:style中
- 在data上定义样式：
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
- 在元素中，通过属性绑定的形式，将样式对象应用到元素中：
<h1 :style="h1StyleObj">这是一个善良的H1</h1>
- 在
:style中通过数组，引用多个data上的样式对象
- 在data上定义样式：
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
h1StyleObj2: { fontStyle: 'italic' }
}
- 在元素中，通过属性绑定的形式，将样式对象应用到元素中：
<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>
Vue指令之v-model和双向数据绑定
- 使用v-model指令，可以实现表单元素和Model中数据的双向数据绑定
- 注：v-model 只能运用在表单元素中
登录案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用Vue实现登录验证</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<table width="400px" height="300px" border="1" cellpadding="0" cellspacing="0" style="word-break:break-all">
<tr :style="trsty">
<td width="15%" style="text-align: center;">用户名：</td>
<td> <input type="text" placeholder="请输入用户名" v-model.trim="userName" @blur.prevent="checkuserName" :style="inputsty" />
<span :style="userNamesty" v-text="tip1"></span>
</td>
</tr>
<tr :style="trsty">
<td width="15%" style="text-align: center;">密码：</td>
<td> <input type="password" placeholder="请输入密码" v-model.trim="passWord" @blur.prevent="checkpw" :style="inputsty" />
<span :style="passwordsty" v-text="tip2"></span>
</td>
</tr>
<tr :style="trsty">
<td colspan="2" style="text-align: center;">
<input type="button" value="提交" @click="submit" style="height: 40px;width: 40px;" />
<input type="button" value="重置" @click="reset" style="height: 40px;width: 40px;" />
</td>
</tr>
</table>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
userName: null,
passWord: null,
tip1:'*请输入用户名',
tip2:'*请输入密码',
flaguser:'false',
flagpw:'false',
trsty:{'height': '100px'},
userNamesty:{'display': 'none'},
passwordsty:{'display': 'none'},
inputsty:{ 'width': '50%', 'height': '30px','padding': '10px,10px,10px,10px'}
},
methods: {
reset() {
this.userName = this.passWord = null
},
submit() {
var userName = this.userName;
var passWord = this.passWord;
if (userName == null||userName.trim()=='') {
this.userName = this.passWord = null;
this.userNamesty={'color':'red'};
} else if (passWord == null||passWord.trim()=='') {
this.passWord = null
this.userNamesty={'display': 'none'};
this.passwordsty={'color':'red'};
} else {
this.passwordsty={'display': 'none'};
window.location.href="Http://www.baidu.com"
}
},
checkuserName(){
var userName = this.userName;
if (userName == null||userName.trim()=='') {
this.userName = this.passWord = null;
this.userNamesty={'color':'red'};
}else{
flaguser='true';
}
},
checkpw(){
if (passWord == null||passWord.trim()=='') {
this.passWord = null
this.userNamesty={'display': 'none'};
this.passwordsty={'color':'red'};
}else{
flagpw='true';
}
}
}
})
</script>
</html>
Vue指令之v-if和v-show
注：
- v-if每次都会重新删除或创建元素
- v-show每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式
一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。
Vue指令之v-for和key属性
- 迭代数组
<ul>
<li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 性别：{{item.gender}}</li>
</ul>
- 迭代对象中的属性
<!-- 循环遍历对象身上的属性 -->
<div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>
- 迭代数字
<p v-for="i in 10">这是第 {{i}} 个P标签</p>
注：2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。
列表页案例
需求：实现用户列表的展现，可以增加和删除用户。并可以根据姓名进行查询。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div style="width: 500px;height: 100px;background-color: aliceblue;">
<table>
<tr>
<td>姓名：</td>
<td><input type="text" v-model="userName" style="width: 80%;" /></td>
<td>年龄：</td>
<td><input type="text" v-model="userAge" style="width: 80%;" /></td>
</tr>
<tr>
<td>性别：</td>
<td><input type="text" v-model="userGender" style="width: 80%;" /></td>
<td>部门Id：</td>
<td><input type="text" v-model="userDpet" style="width: 80%;" /></td>
</tr>
<tr>
<td>角色Id：</td>
<td><input type="text" v-model="roleId" style="width: 80%;" /></td>
<td colspan="2">
<input type="button" value="添加" @click="addUser" />
</td>
</tr>
</table>
</div>
<div style="width: 500px;height: 400px;">
<table width="500px" height="300px" border="1" cellpadding="0" cellspacing="0" style="word-break:break-all;">
<thead>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>部门Id</th>
<th>角色Id</th>
<th>操作</th>
</thead>
<tr v-for="item in search(userName)" :style="trsty">
<td>{{item.id}}</td>
<td>{{item.userName}}</td>
<td>{{item.userAge}}</td>
<td>{{item.userGender}}</td>
<td><span v-if="item.userDpet==100">研发部</span></td>
<td><span v-show="item.roleId==100">管理员</span></td>
<th><a href="" @click.prevent="del(item.id)">删除</a></th>
</tr>
</table>
</div>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
trsty: {
'text-align': 'center'
},
userName: '',
userAge: null,
userGender: null,
userDpet: null,
roleId: null,
list: [{
'id': '1',
"userName": "张三",
"userAge": "23",
"userGender": "男",
"userDpet": "100",
"roleId": "100"
},
{
'id': '2',
"userName": "李四",
"userAge": "23",
"userGender": "男",
"userDpet": "100",
"roleId": "100"
},
{
'id': '3',
"userName": "王五",
"userAge": "23",
"userGender": "男",
"userDpet": "100",
"roleId": "100"
},
{
'id': '4',
"userName": "李颖",
"userAge": "23",
"userGender": "女",
"userDpet": "100",
"roleId": "100"
},
{
'id': '5',
"userName": "张静",
"userAge": "23",
"userGender": "女",
"userDpet": "100",
"roleId": "100"
},
{
'id': '6',
"userName": "赵柳",
"userAge": "23",
"userGender": "女",
"userDpet": "100",
"roleId": "100"
},
{
'id': '7',
"userName": "小明",
"userAge": "23",
"userGender": "男",
"userDpet": "100",
"roleId": "100"
},
{
'id': '8',
"userName": "小华",
"userAge": "23",
"userGender": "男",
"userDpet": "100",
"roleId": "100"
},
{
'id': '9',
"userName": "李华",
"userAge": "23",
"userGender": "男",
"userDpet": "100",
"roleId": "100"
},
{
'id': '10',
"userName": "李建国",
"userAge": "23",
"userGender": "男",
"userDpet": "100",
"roleId": "100"
},
{
'id': '11',
"userName": "李建设",
"userAge": "23",
"userGender": "男",
"userDpet": "100",
"roleId": "100"
},
{
'id': '12',
"userName": "李晶晶",
"userAge": "23",
"userGender": "男",
"userDpet": "100",
"roleId": "100"
},
{
'id': '13',
"userName": "赵婧",
"userAge": "23",
"userGender": "女",
"userDpet": "100",
"roleId": "100"
},
{
'id': '14',
"userName": "李娣",
"userAge": "23",
"userGender": "女",
"userDpet": "100",
"roleId": "100"
},
{
'id': '15',
"userName": "方便",
"userAge": "23",
"userGender": "男",
"userDpet": "100",
"roleId": "100"
}
]
},
methods: {
addUser() {
var user = {
userName: this.userName,
userAge: this.userAge,
userGender: this.userGender,
userDpet: this.userDpet,
roleId: this.roleId,
}
this.list.push(user);
this.userName = this.userAge = this.userGender = this.userDpet = this.roleId = null
},
del(id) {
var index = this.list.findIndex(item => {
if (item.id == id) {
return true
}
})
this.list.splice(index, 1)
},
search(userName) {
return this.list.filter(item => {
if (item.userName.includes(userName)) {
return item
}
})
}
}
})
</script>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
