易游网-易游模拟器

 找回密码
 立即注册
查看: 1922|回复: 0

[js/html/css] vue2.0学习笔记

[复制链接]

3382

主题

3401

帖子

38

积分

超级版主

Rank: 8Rank: 8

积分
38

技术达人

发表于 2021-1-5 15:25:27 | 显示全部楼层 |阅读模式
1.模板必须有个根节点,比如加个div

2. Vue.componet(组件名,{
data:{}
methods:{}
template:{}
})

3. Vue.extend

4. var Home = {
template:{}
}

5. new Vue({
el:'',
data:{},
componets:{},
methods:{}
})

6. 组件生命周期
beforeCreate 实例创建之前
created         实例已经创建完成
beforeMount 模板编译之前
mounted    模板编译完成了
beforeUpdate 组件数据更新之前
updated    组件数据更新完毕之后
beforeDestory 组件销毁前
destoryed      组件销毁后

7. this.$destroy() 销毁组件自己

8. v-for
2.0循环里默认可以添加重复数据
2.0去掉了一些隐式的变量 $key $index
<li v-for="(val,index) in array"/>
想用$key和$index,自己添加
默认2.0可以添加重复数据
v-bind:key提高循环性能

9. 自定义按键(新的)
Vue.config.keyCodes.ctrl = 17

10. 系统内置过滤器没了可以自定义过滤器
Vue.filter('toDou', function(input){
})
{{msg | toDou}}
过滤器传参 {{msg|toDou(1,2,3) }}

11. 组件通信
vm.$emit()
vm.$on()

父组件和子组件
props:[]
父组件每次传一个对象给子节点

vuex 管理组件通信的

12、v-on:click="" 可以简写@click=""
@click="show($event)"
$event 传入事件对象
@click.stop 阻止冒泡 ev.cancelBubble
@contextmenu.prevent ev.preventDefault 阻止默认
ev.keyCode
@keydown   @keyup
keyCode==13回车键
@keyup.enter="show()"
@keyup.down
@keyup.left / right /up

13、属性是用v-bind:src绑定的
v-bind:src可以简写为:src
:class="[]"是一个数组
:calss="{}"
:style="{}"
14、v-model 这些是扩展的指令 v-for

15、模板
{{}} 数据更新模板变化
{{*}}数据只绑定一次
{{{}}}html转义

16、过滤器
{{‘welcome’ | uppercase}}
{{‘welcome’ | lowercase}}
{{‘welcome’ | capitalize}}首字母大写
{{‘welcome’ | currency '¥'}}

17、交互 (vue本身不支持交互)
引入 vue-resource
this.$http.get();
res.status   res.data
this.$http.post();  {emulatorJSON:true}
this.$http.jsonp  跨域取数据 jsonp:cb

keyCode.up == 38  keyCode.down == 40
keyCode.enter == 13

18、更新data里字段值 this.$set(this.$data, 'yxtstitle', 'hahaha');

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|易游网-易游模拟器 Copyright @2015-2021 ( 浙ICP备15028007号-1 )

GMT+8, 2024-11-27 09:42 , Processed in 0.028825 second(s), 9 queries , Gzip On, MemCache On.

Powered by Discuz! X3.4 Licensed

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表