Vue基础总结
- 详情可以去官网了解https://cn.vuejs.org/v2/guide/
- 链接式引用<script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script>
知识点
1.el绑定节点
new Vue({
el:
data{
}
})
2.指令(命令)
*v-show
*v-if 判断对错
*v-for for循环
v-for 可以渲染页面
在html所需渲染的标签里添加v-for指令
v-for="子级 in(for) js的data里存储数据的变量名":key="子级.属性名"
3.绑定事件
@事件="函数名" 放在对应标签上
methods vue里面用methods放事件函数
vue里所有的this都指定dn，dn是vue的自带对象
4.生命周期函数
应用到项目实践操作大致
首先在html页面添加vue的链接
然后把html页面的代码包含在一个带有id名的标签里面
再在js页面里创建一个vue对象
const 对象名 = new Vue({
然后在里面添加对应的东西
el:'#id',
data:{
获取数据
},
created() {
用生命周期函数里的创造来储存一开始要运行的函数
等价于之前的start();开头函数
这里一般放获取数据等一开始要执行的函数
},
methods:{
methods里面一般存放执行函数和事件函数
}
})
-
做定时刷新项目时结合生命周期图的分析
image.png
一、插值表达式{{ }}
<!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>
</head>
<body>
<div id="app">
<!-- 插值表达式 -->
<p>{{msg}}</p>
<p>{{name}}</p>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script>
<script>
const vn = new Vue({
// 绑定节点
el:'#app',
// 数据data
data:{
msg:'你好Vue',
name:'我们好好合作吧',
say:'好嗨哟'
}
});
// 在控制台访问name只需vn.name,然后还可以更改name的值，对应的浏览器里会更改成刚才改的值
</script>
</html>
二、指令命令 v-for v-else v-if
<!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>
</head>
<body>
<div id="app">
<!-- v-show和v-if里面的值为true才起作用 -->
<div v-show='show'>哈哈哈哈</div>
<div v-if='show'>来了老弟，好嗨哟，感觉人生已经到达了巅峰</div>
<div v-else>哎哟我去</div>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script>
<script>
// v-if 和 v-else 如果v-if是true显示，否者就是v-else，显示其他或者隐藏 必须并排排列 v-show
const vm = new Vue({
el:'#app',
data:{
show:true
// 填入v-if或v-show里面
}
})
</script>
</html>
三、v-for循环替换显示(遍历)
<!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>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in list":key="item.id">{{item.name}}--{{item.add}}</li>
<!-- 这里面的意思是，循环list下的属性，里面是显示item里从name到add -->
<!-- 取名的时候可以在后面加s这样v-for的时候前面的子级就可以用没有s结尾的来代表了 -->
</ul>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{
list:[
// app4.todos.push({ text: '新项目' }) 控制台输入，可以添加新的属性进来
{
id:'001',
name:'哪吒',
add:'美国'
},
{
id: '001',
name: '哪吒',
add: '美国'
},
{
id: '001',
name: '哪吒',
add: '美国'
},
{
id: '001',
name: '哪吒',
add: '美国'
}
]
}
})
</script>
</html>
四、绑定事件实现点击显示隐藏
<!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>显示隐藏</title>
</head>
<body>
<div id="app">
<!-- 绑定事件 -->
<button @click="showContent">{{buttonText}}</button>
<p v-show="show">
<!-- v-if和v-show都可以 -->
按实际连卡佛hi哈佛i啊上次就看撒解开了按实际电
话卡喝咖啡哈萨克交换机开始看垃圾的卡拉就看见来看看借记卡数据库哈骷髅精灵
</p>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script>
<script>
new Vue({
el:'#app',
// data放数据
data:{
show:true,
// 因为这里提前定义了show为true所以上面才能用
buttonText:'隐藏'
},
// 所有的事件都写在methods里面
methods:{
showContent(){
if(this.show){
this.show = false;
this.buttonText='显示'
// vue里面的所有this都是指向bn对象的，bn对象是vue定义的
}else{
this.show=true;
this.buttonText='隐藏';
}
}
}
});
</script>
</html>
五、生命周期函数
<!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>
</head>
<body>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script>
<script>
const vm = new Vue({
el:'#app',
data:{
// 放数据
},
// vue生命周期函数 模板
// 创建完成 里面一般放一开始就要执行的，比如获取数据的函数
created() {
console.log('创建完成')
},
// 挂载
mounted() {
console.log('挂载完成')
},
methods: {
// 里面一般放要执行的函数或事件函数
},
// 更新
updated() {
},
// 销毁
destroy(){
}
})
</script>
</html>
<!-- 应用到项目实践操作大致
首先在html页面添加vue的链接
然后把html页面的代码包含在一个带有id名的标签里面
再在js页面里创建一个vue对象
const 对象名 = new Vue({
然后在里面添加对应的东西
el:'#id',
data:{
获取数据
},
created() {
用生命周期函数里的创造来储存一开始要运行的函数
等价于之前的start();开头函数
这里一般放获取数据等一开始要执行的函数
},
methods:{
methods里面一般存放执行函数和事件函数
}
})
-->
六、更改class、动态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>
<script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script>
<style>
.bian {
color: red
}
</style>
</head>
<body>
<div id="app">
<button :class="{bian: issa}">点击</button>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
issa: false
}
});
</script>
</html>
- 实际应用
<html>
<head>
<meta name="" charset="utf-8" content="" />
<title></title>
<style type="text/css">
.list {
position: fixed;
bottom: 0;
width: 100%;
height: 80px;
border: 1px solid;
display: flex;
justify-content: space-around;
align-items: center;
}
span {
cursor: pointer;
}
.active {
background: orange;
padding: 20px;
color: #ffffff;
}
</style>
</head>
<body>
<div id="app">
<div class="list">
<span @click="changeTab(0)" :class="{active: tabIndex === 0}">微信</span>
<span @click="changeTab(1)" :class="{active: tabIndex === 1}">通讯录</span>
<span @click="changeTab(2)" :class="{active: tabIndex === 2}">发现</span>
<span @click="changeTab(3)" :class="{active: tabIndex === 3}">我的</span>
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.8/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
tabIndex: 0
},
methods: {
changeTab(index) {
this.tabIndex = index;
}
}
})
</script>
</body>
</html>
- 动态class
<html>
<head>
<meta name="" charset="utf-8" content="" />
<title></title>
<style type="text/css">
.list {
position: fixed;
bottom: 0;
width: 100%;
height: 80px;
border: 1px solid;
display: flex;
justify-content: space-around;
align-items: center;
}
span {
cursor: pointer;
}
.active {
background: orange;
padding: 20px;
color: #ffffff;
}
</style>
</head>
<body>
<div id="app">
<div class="list">
<span v-for="(item,index) in list" @click="changeTab(index)"
:class="{active:tabIndex===index}">{{item}}</span>
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.8/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
tabIndex: 0,
list: ['微信', '通讯录', '发现', '我的']
},
methods: {
changeTab(index) {
this.tabIndex = index;
}
}
})
</script>
</body>
</html>
网友评论