专栏首页王磊的博客vuejs深入浅出—基础篇

vuejs深入浅出—基础篇

一、从HelloWorld说起

任何语言的都是从Hello World开始的,VueJs也不例外,直接上代码:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="demo">

{{hello}}

</div>

<script>

 new Vue({

 el:'#demo',

 data:{hello:'hello world!'}

 });

</script>

二、常用指令 v-x的使用

1.v-if/v-else 移除或插入DOM;

2.v-show 显示或隐藏DOM(相当与设置display:none;);

3.v-model 双向数据绑定;

4.v-for 数据循环渲染;

5.v-text/v-html 标签内部插值 ex:<div v-html=’html’></div>等同于<div>{{html}}</div>,不建议使用v-html,容易导致XSS攻击;

6.v-bind 绑定更新html特性,完整语法:<a v-bind:href="url"></a>、缩写:<a :href="url"></a>;

7.v-on 事件监听器绑定,完整语法:<a v-on:click="doSomething"></a>、缩写<a @click="doSomething"></a>;

三、模板渲染

模板渲染可以使用Javascript表达式,{{number+1}}、{{ok?’yes’:’no’}}

四、计算属性 & Methods

在模板中绑定表达式是非常便利的,但在模板中放入太多的逻辑会让模板过重且难以维护。例如:

<div id="example">

  {{ message.split('').reverse().join('') }}

</div>

这里就要使用计算属性了。

<div id="example">

  <p>Original message: "{{ message }}"</p>

  <p>Computed reversed message: "{{ reversedMessage }}"</p>

</div>

<script>

var vm = new Vue({

  el: '#example',

  data: {

    message: 'Hello'

  },

  computed: {

    reversedMessage: function () {

      return this.message.split('').reverse().join('')

    }

  }

});

</script>

同样,使用Methods也可以达到一样的效果,代码如下:

<div id="example">

  <p>Original message: "{{ message }}"</p>

  <p>Computed reversed message: "{{ reversedMessage() }}"</p>

</div>

<script>

var vm = new Vue({

  el: '#example',

  data: {

    message: 'Hello'

  },

  methods: {

    reversedMessage: function () {

      return this.message.split('').reverse().join('')

    }

  }

});

</script>

五、过滤器

过滤器本质上就是一个函数,作用就是用户输入数据之后,进行除了返回结果。Vue.js支持任何表达式的地方添加过滤器。比如内置过滤器uppercase(字母全部转换成大写):<span v-text=”message | uppercase”></span>。

内置过滤器列举:

1.字母操作:capitalize(首字母大写)|uppercase(全部字母转换为大写)|lowercase(全部转换为小写)。

2.限制:

a.limitBy(限制数组显示n个)ex:<div v-for=”item in items | limitBy 10 5”>第一个参数是展示条数,第二个参数是从下标5开始,也就是显示5-15条数据。

b.filterBy(过滤字符串或者函数),ex:<div v-for=”item in items | filterBy ‘hello’”>过滤字符串有hello的元素。

c.orderBy(排序)<li v-for=“user in users | orderBy ‘name’ ‘age’”>根据名称和年龄排序。

3.json过滤器,JSON.stringify()精简缩略版,把表达式转换成JSON字符串,ex:{{ data | json 4 }},缩进4个字符打印data对象。

4.currency过滤器,把数字转换为货币形式输出,ex:{{ money | currency }} 结果1234=> $1,234.00.

5.debounce过滤器,延迟执行处理器,接受的表达式必须为函数,比如监听用户输入值300毫秒之后在ajax请求,防止方法频繁被掉用,还是比较实用的,<input @keyup=”onKeyup | debounce 300”>.

6.自定义过滤器,创建全局过滤器,Vue.filter(ID,function(){...});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用Hexo搭建个人博客的终极资料

    Hexo 是一个基于 NodeJs 博客框架,可以快速的帮我们搭建一个博客系统,Hexo使用的是Markdown(下文简称MD)解析文章的,在几秒内即可利用靓丽...

    Java中文社群-磊哥
  • 使用Hexo搭建个人博客的终极资料

    Hexo 是一个基于 NodeJs 博客框架,可以快速的帮我们搭建一个博客系统,Hexo使用的是Markdown(下文简称MD)解析文章的,在几秒内即可利用靓丽...

    Java中文社群-磊哥
  • Visual Studio 2010 中JS注释制作

      Visual Studio 2010中的js注释已经很强大了,但怎么才能和调用c#的方法一样容易呢?怎样才能让每个参数都有注释说明呢?底下就是想要的答案。 ...

    Java中文社群-磊哥
  • Android开发人员不得不学习的Vue.js基础

    Vue是一套用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一...

    用户2802329
  • [jQuery学习系列一]1-选择器与DOM对象

    一枝花算不算浪漫
  • jquery属性操作 html() prop()

    使用html()相当于原生javascript的innerHtml,即可以获取元素的之间的html内容,还可以创建新的html元素。

    Devops海洋的渔夫
  • TensorLayer学习之简介与安装

    对于深度学习开发者来说,深度学习系统变得越来越复杂。以至于我们需要使用轻量级的工具从头到尾来管理流程,为了将更多的连续学习内置到神经网络中,这就要求我们建立可以...

    AI异构
  • RTSP协议视频平台EasyNVR接入EasyNVS云端管理平台通道无法显示如何处理设置?

    由于新版本的EasyNVR更新了很多功能,部分用户按旧版的方法去配置新版会发现服务器有报错情况产生,这是由于新版在旧版之上做了升级,部分功能需要重新调配才能生效...

    EasyNVR
  • React router 4.0之参数传递

    在前一篇文章中说到了react router 4的路由如何配置,这篇文章说一下路由跳转的参数问题。路由跳转传参一种方式是在link标签上写参数,另一种方式是通过...

    OECOM
  • JAVAWEB复习笔记-day02

    阮键

扫码关注云+社区

领取腾讯云代金券