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触摸滑动插件