• 35648

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

Vue 项目尝鲜(三) 常规 Vue 操作

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/0708/6234.html 1190000019686816

前言 上回我们项目也跑起来了,目录结构也简单了解了,现在我们就开始将我们之前看文档的那些东西,在这边操作一下吧,如果你之前没有看过 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 不止只有这些便捷的用法,并且上面说的比较简单,还有很多没有讲的,所以尝鲜之后记得一句话「官方文档大法好!」

相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!