前端框架vue
Posted 飞虎的自留地
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端框架vue相关的知识，希望对你有一定的参考价值。
vue学习
基础使用
vue属于前端框架，和框架中的模板语言比较类似，下面开始做一个简单的vue做成的网页。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../js/vue.js"></script>
<script>
window.onload=function () {
var vm = new Vue({
el:'.he',
data:{
content:'第一个vue对象'
}
})
}
</script>
</head>
<body>
<p class="he">{{content}}</p>
</body>
</html>
首先要在script里导入js.vue.js文件。
设置window.onload 可以提前加载html代码，在运行完html再运行js文件。
设置new Vue对象，el:绑定标签，此处通过类标签进行绑定，id标签使用#进行绑定。
在html代码下添加{{}}括号，代表数据要在vue中添加，此时html代码中是{{content}},vue中content：第一个vue对象。此时就会在网页显示这行字。
模板语法
V-bind和V-on命令，
v-bind可以绑定标签内的属性，简写为：
v-on可以绑定时间，简写为@
代码示意：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>02-vue的基本操作</title>
<script src="js/vue.js"></script>
<script>
window.onload = function () {
// 2.创建vue对象
var vm = new Vue({
el:'.box',
data:{
message:"hello Vue!",
linkName:'百度链接',
linkUrl:'http://www.baidu.com'
},
methods:{
fnClick:function(){
alert('v-on: 3.操作方法 ')
}
}
})
}
</script>
</head>
<body>
<div class="box">
<!-- v-on: 3.操作方法 -->
<button v-on:click="fnClick">操作方法</button>
<!-- v-bind: 2.操作属性 -->
<a v-bind:href="linkUrl" target="_blank">{{linkName}}</a>
<!-- 1.操作数据 标签包裹的内容 -->
<p>{{message}}</p>
</div>
</body>
</html>
v-on绑定了点击事件，在v-on：click=”fnclick“,fnclick属于方法，所以在vue中添加了methods,将方法fnclick添加进去。
三目运算
三目运算通常运用在‘二选一’的情景下，代码示意：
#css文件
<style>
.red{color: red}
.green{color: green}
</style>
#vue设置
isRed:false，
#html文件设置
<p :class="isRed?'red':'green'">三目运算三元运算</p>
此刻在vue设置isred为ture就执行redcss文件，false就执行绿色css文件。
计算属性和倾听属性
计算属性是因为把一些运算表达式放在html代码中相对比较乱，html和js代码混合使用。此时发明了计算属性，在vue添加一个：computed：{这里面写运算表达式}
倾听属性：在vue中添加watch：{这里面添加函数，函数需要传入两个参数，第一次是当前值，第二个是变化后的值}。
class和style绑定
class绑定有很多很多方法，掌握其中一个就可以，
下面是字符串class绑定:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.red{
color:red;
}
.font{
font-size: 50px;
}
.line{
text-decoration: underline;
}
</style>
<script src="../js/vue.js"></script>
<script>
window.onload= function () {
var vm = new Vue({
el:".box",
data:{
classstr:"red line font",
}，
style02:{
"text-decoration":"underline"
}
})
}
</script>
</head>
<body>
<div class="box">
<p :class="classstr">1字符串class绑定</p>
<p :style="style02">style的操作样式</p>
</div>
</body>
</html>
在class哪里进行v-bind，设置class=某个字符串，在vue中添加字符串等于css的名称，从而给标签绑定了css.
style绑定：
style绑定类似于把css文件写到了vue中，我也不知道这有什么写的，也不方便啊。
通过标签中style=‘一个字符串’就可以应用了这个style。代码示意在上述代码写了。<p :style="style02">style的操作样式</p>这句代码绑定了style02，所以就有了下划线。
条件渲染
1.v-show 用于标签是否显示用的，例如：v-show=‘isshow’假如在vue data中，isshow=TURE则显示，=false则隐藏。
2.v-if v-else-if：
v-if=‘number=1’
v-else-if ='number=2'
在vue中data number=1展示第一条数据，number=2展示第二条数据。
列表渲染
v-for 类似于python中的列表遍历。
vue中data下写一个列表：例如dataList:['a','b','c','d','e'],
在html代码中进行列表渲染：<div class="box"> <div v-for="item in dataList"> {{item}}</div>
此时网页就会依次打出abcde
事件的处理
事件处理主要是阻止表单提交和防止事件冒泡：
事件冒泡：就是一个子标签和一个父标签，假设有点击事件，你点击子标签，就会向父标签传递。
<div class="box">
<!-- 阻止提交事件 submit.prevent -->
<!-- <form @submit.prevent = "" action=""> -->
<form action="">
<input type="text" name="user">
<input @click.stop.prevent = "" type="submit" >
</form>
<!-- 阻止冒泡事件 stop -->
<div @click="fnFather" class="father" style="background:red">
father
<div @click.stop="fnSon" class="son" style="background:green">son</div>
</div>
</div>
过滤器
过滤器这个在sql语句里面也有，意思差不多，还是上代码来解释吧~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>01-vue的基本使用</title>
<script src="js/vue.js"></script>
<script>
window.onload = function () {
var vm = new Vue({
el:'.box',
data:{
age:30
},
filters:{
// 判断年龄
ageFilter:function (age) {
if (age > 18) {
return "成年人"
} else {
return "小孩子"
}
}
}
})
}
</script>
</head>
<body>
<div class="box">
<p>{{age | ageFilter}}</p>
</div>
</body>
</html>
过滤器就是在html代码{{}}里面添加一个大竖杠|,后面的就是过滤器，在vue中做逻辑判断，然后在{{}}里面展示.
双向绑定v-model
v-model一般用于input和select下拉菜单使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-model</title>
<script src="../js/vue.js"></script>
<script>
window.onload = function () {
var vm = new Vue({
el:".box",
data:{
meg:[]
}
})
}
</script>
</head>
<body>
<div class="box">
<!-- <input type="text"v-model="meg">
<p>{{meg}}</p> -->
<select name="" id=""v-model='meg'><option value="石家庄">石家庄</option>
<option value="保定">保定</option>
<option value="衡水">衡水</option>
<option value="沧州">沧州</option></select>
<input type="checkbox" name="like"value="游泳" id="" v-model='meg'>游泳
<input type="checkbox" name="like"value="唱歌" id="" v-model='meg'>唱歌
<p>{{meg}}</p>
</div>
</body>
</html>
实例生命周期
我理解的实例生命周期类似于flask框架下的钩子函数，或者是django框架下的中间件。需要理解，但是平时不写也没有问题。
| 阶段 | 描述 |
|---|---|
| beforeCreate | 组件刚被创建 |
| created | 创建后 |
| beforeMount | 挂载前调用 |
| mounted | 实例挂载到dom之后被调用，可以当成是vue对象的ready方法来使用 |
| beforeUpdate | 数据发生变化前调用 |
| updated | 数据发生变化后调用 |
| beforeDestroy | 销毁前 |
| destroyed | 销毁后 |
禅定时刻
最近看了一本彭浩翔写的书，《一些无可厚非的小事》，书名和封面极其烂，但是不影响书的内容，书里面的内容大多都是由很短的一篇文章组成，不像散文那么飘逸的看不懂，没有看长篇小说那种压力，确实值得一读。对了，彭浩翔是一个香港导演，《志明与春娇》你应该听说过，不过我更喜欢他的《买凶拍人》~
以上是关于前端框架vue的主要内容，如果未能解决你的问题，请参考以下文章