Vue 项目尝鲜（三） 常规 Vue 操作

前言 上回我们项目也跑起来了，目录结构也简单了解了，现在我们就开始将我们之前看文档的那些东西，在这边操作一下吧，如果你之前没有看过 vue 文档的话，也没事，先看完我这个，然后再回去学习官方文档。

预备工作

这次的话，我们就先用一些简单的，用的比较多的几个地方。然后我们这次的操作全在 component 文件夹里面那个原来的 HelloWorld.vue 里面搞了，就先不用 vue-router 了。
首先我们把 HelloWorld.vue 里面的代码删完，换成下面的初始代码

<!--  -->
<template>
  <div>
    
  </div>
</template>

<script>
  export default {
    components: {},
    data() {
      return {};
    },
    computed: {},
    watch: {},
    methods: {},
    created() {},
    mounted() {},
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style scoped>

</style>

然后到 App.vue 文件里面注释掉那个 img 标签

<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <router-view/>
  </div>
</template>

然后你就会发现 8080 现在就一片空白了，初始化了，开始自己乱搞了。

声明式渲染

其实就是把 data 里面的数据，通过模板语法渲染到页面上去了。
比如我们在 data 里面写一个 name 变量，然后再上面的 template 里面用模板语法写一下。代码如下

<template>
  <div>
    <!--双大括号 {{}} 表示模板语法，他会直接在 data 里面找数据渲染
    最后效果 <p>ljy</p>-->
    <p>{{name}}</p>
  </div>
</template>
...
components: {},
  data() {
    return {
      name: "ljy"
    };
  },

效果图（不截图了，差不多就这样啦）
<div style="border:1px solid #eee;line-height:40px;height:40px;">
<p style="font-size:20px;text-align:center;">ljy </p>
</div>

触发事件

这个我们把所有方法都写在了 methods，里面，然后就各自触发调用了，其中我们用的比较多是点击事件，这个在页面中我们可以通过 v-on:click 来绑定点击事件

<!--@click 是v-on:click 的缩写，直接写方法名就不传参数，要穿参数就在后面写（）传参了-->
<p v-on:click="demo">{{name}}</p>
<p @click="demo('ljy')">{{name}}</p>
...

methods:{
  demo(val){
    debugger
  }
}

v-model

v-model 是一个语法糖，他可以监听用户在输入框的值，然后实现数据 的双向绑定,比如我在文件中加入下面的代码

<!--template 里面 input 框绑定 data 里面的 input 变量-->
<p>{{input}}</p>
<input type="text" v-model="input">

// data 里面加一个 input 变量
data() {
  return {
    name: "ljy",
    input:'demo',
  };
},

然后我们会发现，我们输入框里面的数据，和上面 p 标签的内容是一样的，input 改，上面也改，这样就形成了一个数据的双向绑定。

列表循环

这列表循环也是我们经常会用到，就是一个 v-for 的指令，比如渲染我们的数据列表。咋用啊，看代码吧

<!-- v-for 指令用法，形式是 item in list，
item是每一项的值，list 是遍历的数组-->
<ul>
    <li v-for="item in list" :key="item">{{item}}</li>
    <!--这里可以用使用遍历项 item 进行渲染-->
</ul>

<!--也可以加一个 index 来表示当前项在数组里面的下标
为了加快一点性能，使用 v-for 的时候要提供 key 属性，就以 :key="" 形式给，一般放遍历项 item 或者 下标 index -->
<ul>
    <li v-for="(item, index) in list" :key="index">{{index}}</li>
</ul>

...
data(){
  return {
    list:[1,2,3,4]
  }
}

差不多这样的效果
<div style="border:1px solid #eee;line-height:40px;">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
然后上面的 item 和 idnex 不是固定命名的，你也可以根据项目自由命名。

条件渲染

这个在实际项目中用的也是比较多的，因为我们有时候要根据不同的情况，渲染出不同的效果，这个是就用到 v-if 指令进行条件渲染了（配套的还有 v-else，v-elif 指令）。这个使用我们还是看代码吧

<p v-if="show">看不到我</p>
<p v-else>被你看到了</p>

...
data(){
  return {
    show: false,
  }
}

我们页面就会显示

你看不到我

没有出现「被你看到了」内容了。

这几个是我们经常用到的几个操作，要熟悉，没有看过官网文档，后面要去官网看，vue 不止只有这些便捷的用法，并且上面说的比较简单，还有很多没有讲的，所以尝鲜之后记得一句话「官方文档大法好！」