<div id="app-5">
<p>{
{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
Vue.js
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
1、splite(' ')可以将字符串按某个字符或者其他分割。返回数组。
2、reverse()该方法会改变原来的数组,而不会创建新的数组。此函数可以将数组倒序排列。
3、join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。指定分隔方法join(' ');
今天使用节流
函数
的时候遇见了一个问题,搞了半天才找到原因,所以在这里做个总结。
节流
函数
浏览器的一些事件,如:resize,scroll,mousemove等。这些事件触发频率太过频繁,绑定在这些事件上的回调
函数
会不停的被调用,加重浏览器的负担,导致用户体验非常糟糕。所以先贤们发明了节流
函数
,简单版本如下:
function throttle (f, wait = 200) {
let last = 0
return function (...args) {
let now = Date.now()
if (now - last > wait) {
last = now
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof
render
函数
vue
通过 template 来创建你的 HTML。但是,在特殊情况下,这种写死的模式无法满足需求,必须需要js的编程能力。此时,需要用render来创建HTML。
render方法的实质就是生成template模板;
通过调用一个方法来生成,而这个方法是通过render方法的参数传递给他的;
通过这三个参数,可以生成一个完整的模板
//未使用render
函数
Vue
.component('anchored-heading', {
template: '#anchored-heading-template',
props: {
level:
先看代码,
vue
官方文档
var message = 'Hello
Vue
.js!'
message.
split
('').
reverse
().
join
('')//"!sj.euV olleH
split
(' ')是分裂的意思,也就是把一个数据拆分
var vm = new
Vue
({
date:{
message=" Not
split
"
message.
split
(' ') == [ "N", "o", "t", " ", "s", "p", "l", "i", "t" ]
3.
split
(’ ')将字符串按空格才分成数组,这个用的比较多的如","将字符串根据逗号切割成数组。拆分后:[‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’, ‘8’, ‘9’]separator :可选参数。用于拆分的字符串或正则表达式。1.
split
()不传参数默认整个字符串作为数组的一个元素,返回包含原始字符串的数组。2.
split
(‘’)单引号不传参数默认将字符串拆分成一个个字符数组。2.
join
(‘*’)按指定字符将数组分割成字符串。1.
join
()不传默认按,分割数组。
<meta charset="UTF-8">
<title>
vue
中
的变异方法:排序:sort()方法 和反转:
reverse
() 方法</title>
<script type="text/javascript" ...