Vue学习笔记
3模板语法
就是用{{xxx}}代表一段文字
<template>
<p>
{{text}}
</p>
</template>
<script>
export defaul{
name:"returnText",
data(){
return {
text: "I am yangstar",
}
}
}
</script>
4条件渲染
关键词是v-if,只有返回值是true的时候才会显示
v-xx是被我们叫做指令
<template>
<h3>here is components start</h3>
<p v-if="flag">我是傻逼</p>
<p v-else>我是帅哥</p>
<p v-show="flag">我的大傻逼</p>
</template>
<script>
export default{
name:"ifInstruct",
data(){
return {
flag: false
}
}
}
</script>
v-show和v-if的区别
v-show元素总是被渲染,初始开销比较大,切换代价较小
v-if只有为真的时候才开始渲染,初始开销比较小,切换代价比较大
根据两者的不同性质选择不同的用法
5列表渲染
v-for指令
<template>
<li v-for="item in fuck">
{{ item.title }}
</li>
</template>
<script>
export default{
name: "hello",
data() {
return {
fuck: [
{
id: '001',
title: ' 樊振东3比1卡纳克 ',
},
{
id: '002',
title: ' 小米客服回应11系列烧WiFi ',
},
{
id: '003',
title: ' 滕哈格确认C罗拒绝替补出场 ',
},
]
}
}
}
</script>
效果:
维护状态
也就是vue只渲染发生了变动的元素,没有变的元素就不渲染,这样比js更加的高效
但是要给vue一个提示,好跟踪每个结点的身份,用的是下面的:key这个语法
<div v-for=" xxx" :key="item.id">
6事件处理
监听事件
//v-on(可以缩写成@)
<button @click="counter +=1">点击增加一个计数</button>
//点击这个按钮counter这个东西就加一
但是这个东西呢,只能触发一次,不太灵活,所以我们想着能不能,点击的时候直接触发一个函数,这样就能干很多事情了
这里的话只要在export default 里面增加一个methods:{}里面写入函数就可以了
<template>
<div>
<button @click="counter +=1">点击增加一个计数</button>
{{counter}}
<br>
<button @click="click">施鲫鱼</button>
</div>
</template>
//data和methods两个东西是同一个水平的东西
<script>
export default{
data(){
return {
counter:0,
}
},
methods: {
click(){
console.log("杂毛是");
}
}
}
</script>
7表单输入绑定
8组件基础
这是vue的两大核心思想---组件化和数据驱动,这些组件可以重复利用,其中一个寄了也不影响另外的东西正常工作
怎么引入单文件组件
在cmponents文件下面新建一个.vue结尾的文件
里面的写的内容
<!-- hmtl部分 -->
<template>
<h1>我是单文件组件</h1>
</template>
<!-- js部分 -->
<script>
export default{
name: "my"
}
</script>
<!-- css部分 -->
<!-- scoped代表只在我的这个组件里面生效 -->
<style scoped>
h1{
color: red;
}
</style>
然后在App.vue这个文件里编辑
如果只想在这个组件里生效的话记得
这里要写上scoped,不然就是全局生效了
<style scoped>
09Proos组件交互
可以传递多参数,没有参数类型的限制
传入的参数:
App.vue文件里
传递的是数组和对象必须使用函数进行返回
10自定义组件交互
11组件生命周期
在不同阶段干不同的事情
beforeCreate(){
console.log("组件创建之前");
},
created(){
console.log("组件创建完成");
},
beforeMount(){
console.log("组件渲染之前");
},
mounted(){
console.log("组件渲染完成");
},
beforeUpdate(){
console.log("组件更新之前");
},
updated(){
console.log("组件更新完成");
},
beforeUnmount(){
console.log("组件卸载之前");
},
unmounted(){
console.log("组件卸载完成");
}
12引入第三方
swiper触摸滑动插件