vue需要java基础吗_[Java教程]vue.js基础知识总结

[Java教程]vue.js基础知识总结

0 2017-09-23 21:00:20

初始化一个项目npm init -y

安装一些依赖npm install 名称 --save

例如 npm install vue axios bootstrap --save

--save 表示开发和上线都要用

--save dev 表示开始时候用，上线丢掉

vue总结

1.指令v-show 切换显示隐藏，频繁显示使用

v-if 根据条件语句可以显示隐藏，不频繁显示隐藏使用

v-else 前面有v-if 配合使用，如果前面v-if不成立情况下

v-model 双向数据绑定的关键所在，视图变化

v-cloak 防止闪烁css中定义一下[v-cloak]{display:none}

v-once 控制绑定的内容不会再次被监测变化通常是配合v-model使用

v-html 解析数据里面的标签，插入到绑定节点里面去

v-text 绑定数据 ，和{{}}等价，但可以防闪烁

v-for 循环 语法- 不带索引写法 item in arr 语法二 带索引写法 (item,index) in arr v-for可以嵌套

v-on 用于监听dom事件 ，简写@

v-bind 用于绑定属性 ，简写:

v-style 写内嵌样式，基本没有什么作用

阻止冒泡e.cancelBubble=true;

e.stopPropagation();

@click.stop

修饰符时间后面可以加一些修饰符号

@click.stop 阻止冒泡

@click.capture 时间捕获，先捕获到目标再冒泡

@click.self 只有在自己身上点击才会触发函数，其他冒泡，会跳过这个函数

@click.prevent 阻止默认事件，例如a标签点击跳转，加上这个@click.prevent，就阻止了默认属性href跳转了

ref="wo" 给节点绑定一个标识后期调用绑定的标识this.$refs.wo

创建实例之后，再添加一个数据上去Vue.set(data,'sex', '男')

2 实例化一个Vue生命周期

实例化一个Vue函数 new Vue({})周期里面的属性

el -绑定vue用的范围，id和class都可以语法1： 内部：el:"#app"或el:".app

语法2：外部：vm.$ount(''#app')

语法2：其实没有必要外部挂载范围

data:{ }绑定vue全局的数据，是一个对象

语法 ： data:{ }

created(){}实例已经创建完成之后被调用的函数

通常用数据请求

methods:{}，实例上去之后,获取真实的dom元素,调用这个对象

基本所有的方法，函数都丢在这个函数里面

directives:{}自定义指令方法,里面写指令函数，名称可以不带v-;但是外部必须带v-指令函数里面有两个参数，第一个(ele)是当前元素，第二个(bind)是当前元素的对象

语法 directives:{auto(ele,bind){

} }

filters:{}过滤器,过滤管道(|)左边值的操作

过滤器里面过滤方法auto

第一个参数是左边要过滤的值，

第二个参数是过滤方法里面传的参数

语法

filters:{auto(e,prem){

}

}

computed:{}计算属性

计算属性里面不支持异步编程，比如计时器呀，ajax等默认get()函数，意思就是根据别人数据，得到自己计算的数据

set()函数，意思是根据自己，影响别人数据，很少用

watch:{}监控属性，返回回调函数

监控的数据，必须和data里面定义是一样的

默认是handler(){} 方法

deep:true 是深度监控，值发生变化，也能监控

beforeDestroy(){}销毁实例的Vue

不常用的vue里面的属性beforeCreate(){}数据没有被挂载，方法也没有被挂载的时候

基本不用

beforeMount(){}判断有没有el属性，这时候，有模板template，就用模板，没有就用#app节点内部渲染

基本不用

beforeUpdate(){}

当页面数据发送变化时候，执行，前提是页面用到了这个数据

基本不用 computed{} 计算属性基本全部搞定

destroyed(){}销毁vue实例，

基本不用

localStorage缓存localStorage.setItem('缓存的名字','缓存的值');

localStorage.getItem('缓存的名字')

我们平常缓存时候，将对象想变成字符串缓存JSON.stringify()JSON.stringify()将一个对象变为字符串

然后取出缓存数据再将字符串转为json对象JSON.parse()JSON.parse将一个字符串变为json对象

异步编程之一 Promise解决回调地狱

同步请求,依次等待

Promise 有三种状态，成功，失败，等待

Promise 有两个参数，其实是两个函数类型第一个参数 resolve ,代表成功

第二个参数 reject 代表失败

Promise 自带then方法，then 方法有两个函数第一个函数成功

第二个函数失败

数组常见操作reverse()倒序数组

[1,2,3,4].reverse()[4,3,2,1]

join()

接收一个参数,即用作分隔符的字符串,然后返回包含所有数组项的字符串["red","green","blue"].join("|")red|green|blue

pop()从数组末尾移除最后一项,减少数组的length值,然后返回移除的项

[1,2,3].pop()

[1,2]

concat()合并数组

[1,2].concat([3,4])

[1,2,3,4]

map 映射结果生产一个新数组，不影响原来的数组console.log(arr=[1,1,3].map(function(item){

return item+1;

}))结果[2,2,4]，不影响上一个数组

forEach 循环

循环数组

filter 过滤

根据条件过滤一个数组，返回过滤后的数组console.log([1,2,3].filter(function(item){

if(item>1){

return item

}

}))结果就是[2,3],之前的[1,2,3]就不在了

find 查找用于找出第一个符合条件的数组元素，有就返回该元素，没有就undefinedconsole.log([1,2,3].find(function(item){

if(item==1){

return item;

}

}))结果找到 1

includes 方法判断当前数组是否包含某个指定的元素，如果有true,没有falseconsole.log([1,2,3].includes(1))结果true 当中包含1

some 方法

判断当前数组有没有符合条件的，有就返回ture,没有就falseconsole.log([1,2,3,6].some(function(item){

if(item>1){

return item

}

}))结果为true 当前有元素大于1

every 方法判断当前数组里面是不是每一个元素符合条件，都符合返回true,有一个不符合返回falseconsole.log([1,2,3].every(function(item){

if(item>1){

return item

}

}))结果为false ，当前有元素1不大于1

reduce 方法

累加结果，其实循环累加，=+

有4个参数第一个参数 是当前元素上一次累加的值

第二个参数 是当前元素

第三个参数 是当前索引值

第四个参数 是数组本身

为了每次累加没有出现undefined,默认添加一个第一项为0console.log([1,2,3].reduce(prev,next,index,arr){

return prev+next;

})过程，第一次选项值为0,加上第一项的值为10+1 //1

第二次，前一个累加的值为1，加上第二项的值为21+2 //3

第三次 前面累加的值为3 ，加上第三项的值为33+3-全部长度就是3个元素，结束，此时return 最后的结果为6

-所以结果为6 本文网址：http://www.shaoqun.com/a/325703.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

JS

0