一、从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(){...});

vuejs深入浅出—基础篇相关推荐

Vuejs另辟蹊径(基础篇+小案例)
邂逅Vuejs 学习视频来自b站,传送门 https://www.bilibili.com/video/BV15741177Eh 内容概述简单认识 Vue.js安装下载地址 https://cn. ...
深入浅出Mysql - 基础篇（列类型/运算符/函数）
深入浅出Mysql - 基础篇(列类型/运算符/函数) 每一个常量.变量和参数都有数据类型,它用来指定一定的存储格式.约束和有效范围.MySQL提供了多种数据类型,主要包括数值型.字符串类型.日期和时 ...
学习笔记---程序员练级攻略（入门篇、修养篇、专业基础篇、软件设计篇、高手成长篇）
根据极客时间左耳朵耗子整理,请忽略每一行最后的数字文章目录 1. 入门篇 47 2. 修养篇 51 3. 专业基础篇 56 4. 软件设计篇 60 5. 高手养成 63 1. 入门篇 47 1. ...
Android事件分发机制：基础篇：最全面、最易懂
如何提升安卓水平?安卓开发者必须了解的事件分发机制. 最全面.最易懂的形式来讲解Android事件分发机制. 0. 前言鉴于安卓分发机制较为复杂,故分为多个层次进行讲解,分别为基础篇.实践篇与高级篇 ...
java综合知识点总结基础篇
一.JDK常用的包 java.lang: 这个是系统的基础类,比如String.Math.Integer.System和Thread,提供常用功能. java.io: 这里面是所有输入输出有关的类,比 ...
视频教程-Linux系列课程（基础篇）-Linux
Linux系列课程(基础篇) 2年JavaEE开发 ,5年资深大数据开发大牛,曾就职于蓝点科技,擅长精准广告系统开发,精通Linux操作系统! 具备丰富的大数据研发和培训经验,熟练运用Hadoop和S ...
逆向工程恶意软件入门（基础篇）
本文讲的是逆向工程恶意软件入门(基础篇), 前言在这个系列文章中,我会向大家介绍逆向工程恶意软件的各个方面的知识.逆向工程恶意软件是一个很深奥和复杂的主题,因此很少有人掌握它,这也是这个领域的薪酬很 ...
Python Qt GUI设计：信号与槽的使用方法（基础篇—7）
目录 1.信号与槽的概念 2.信号与槽的基础函数 2.1.创建信号函数 2.2.连接信号函数 2.3.断开信号函数 2.4.发射信号函数 3.信号和槽的使用方法 3.1.内置信号与槽的使用 3.2.自 ...
Python Qt GUI设计：窗口布局管理方法【强化】（基础篇—6）
目录 1. 水平布局类(QHBoxLayout) 2.垂直布局类(QVBoxLayout) 3.网格布局类(QGridLayout) 3.1.单一的网络布局 3.2.跨越行.列的网络布局 4.表单布局 ...

vuejs深入浅出—基础篇