vue基础

- vue是一个渐进式框架
vue (视图渲染)
components(路由机制)
vue-router(路由管理)
vuex (状态管理)
vuecli (构建工具) - 库和框架
库如jQuery,是调用它的函数实现功能,
框架如vue, 是在指定的地方写代码,框架帮我们调用,是库的升级版
- 声明式(如forEach,不必关注里面实现) vs 命令式(for等具体语句)

vue响应式数据变化

Object.defineProperty用法,重新赋值会触发set方法

obj = {};
Object.defineProperty(obj, 'name', {
get(){
return value
},
set(val){
console.log("111111");
value = val
}
}); obj.name = "maomao";
console.log(obj.name);

Object.defineProperty实现数据劫持

vue中data都被代理到了vm实例上,例如vm.name

只要模版中用到的变量,必须先在vm上定义,用之前先声明.

知道vue中哪些修改会触发template更新

- 数组
数组类型的push等,是ok的(不能触发template重新渲染)
操作value类型是数组长度或者下标索引,是不ok的。arr.length-- - 对象
value是对象类型,重新给该key赋值为对象,是ok的
value是对象类型,给该对象新增属性,是不ok的,不符合使用前先定义原则

vue属性

vm.$el
获取dom
指的是template被渲染后的该id的html vm.$options
components: {}
data: ƒ mergedInstanceDataFn()
directives: {}
el: "#app"
filters: {}
render: ƒ anonymous( )
staticRenderFns: [] vm.$nextTick(): vm上数据修改后,template渲染是异步的,因此可能获取到老的值
vm.arr = [4,5,6];
console.log(vm.$el.innerHTML); //template渲染的arr依旧是老的 获取dom
vm.$nextTick实现 vm.msg = "maotai";
vm.arr = [4, 5, 6];
vm.$nextTick(() => {console.log(vm.$el.innerHTML)}); vm.$set() 给value是对象类型的添加属性
data: {info: {name: "maotai"},}
vm.$set(vm.info,'age','22'); //vm提供的动态添加属性
前面说了,默认vm.info.age = 22方式添加属性是不会触发数据劫持的。
vue提供了vue.$set动态添加属性,也可以劫持 vm.$watch
监听数据变化,一旦数据变化,会触发函数执行
多次修改执行会只会触发1次,因为有缓存
vm.$watch('msg', function (newVal, oldVal) { console.log(newVal,oldVal); });
vm.msg = 'xxx';
vm.msg = '12'; template渲染{{}}取之表达式
取值
假如中间是对象,用空格隔开即可: {{ {name:1} }}
运算
{{1+1}}
{{'hello'+'world'}}
三元
{{flag?''ok':'no'}}

vue指令

v-once: 只触发template渲染一次
<div v-once>{{msg}}</div>
vm.msg = '' //修改值,不会触发重新渲染
v-html
<div v-html="html"></div>
被转为innerHtml插入div
⚠️防止xss攻击,这样做有危险 v-if
是操作dom的增删 - 规则(中间不能有其他元素)
<div v-if="true">a</div>
<div v-else-if="type === 'B'">b</div>
<div v-else>c</div> 如果2个标签,可以使用div包裹, 如果不想多一层div标签,则使用template关键字
如果条件有2个标签,可以使用template关键字
<template v-if="Math.random() > 0.5">
<h1>hello</h1>
<p>hello world</p>
</template>
<div v-else>bb</div> eg:
<template v-for="i in 10">
<template v-if="i%2==0">
<span>name: </span>
<input type="text" :key=`name_${i}`> <br>
</template>
<template v-else>
<span>age: </span>
<input type="text" :key=`age_${i}`> <br>
</template>
</template> v-if内置了属性绑定, 直接调用i就可以访问到属性了
:key绑定,也可以直接绑定属性, 但是 如果需要字符串拼接,则需要反引号标注 v-show
是操作css样式
不支持template关键字 v-for vue2.5后v-for必须要带key属性: dom中不会被显示,如果其他属性名,则显示.
<div v-for="(fruit,index) in fruits" :key="index" :a="index">
{{fruit}} - {{index}}
</div> 如果不想有div标签,可以使用template
想把这坨代码显示3次
- 存在的问题 包裹div优化
<div v-for="i in 3">
<div :key="i+'_1'" :a="i+'_1'">{{i}}</div>
<div :key="`${i}_2`" :a="`${i}_2`">{{i}}</div>
</div>
弊端: 被包了一层div - 使用template标签解决
<template v-for="i in 3">
<div :key="i+'_1'" :a="i+'_1'">{{i}}</div>
<div :key="`${i}_2`" :a="`${i}_2`">{{i}}</div>
</template> 体现key的作用
vue在切换时候对比结构,如果标签一样, 如果没有key
切换dom时候, vue检测dom结构,如果相同的结构就会被复用,
input框被复用了,所以修改条件,切换失败,
如span一样,则直接修改innerText,但是input框一样,就不会被更新了 如果下面需要绑定key则可以使用拼接字符串方法,防止key冲突
<template v-if="flag">
<span>name</span>
<input type="text" :key=`name_${i}`>
</template>
<template v-else>
<span>age</span>
<input type="text" :key="2">
</template> ⚠️<div :key="`${i}_2`" :a="{{i}}">{{i}}</div> //不能使用这种方式来取,会报错,必须使用v-bind方式来取值 尽量不要使用index作为key,如果有唯一标示,尽量使用唯一标示
更改橘子苹果的位置,需要渲染2次
如果使用固定的,移动dom位置即可,节约性能 v-model
input双向绑定data
自己实现数据双向绑定 绑定数据到input
绑定方法到input,使得输入动作触发这件事 fn为什么不能放在data里, 因为this的问题,放data里this是window input绑定事件时候要不要加括号
vue中input @click绑定可加也可以不加,情况不一样,加了必须要传个参数$event才能获取事件
<input type="text" :value="msg" @input="fn">
data: {
msg: "hello",
fn: function (e) {
console.log(e); //e.target.value
}
}
如果绑定事件时加括号,必须给传一个参数$event
<input type="text" :value="msg" @input="fn($event,name)">
data: {
msg: "hello",
fn: function (e, name) {
console.log(e); //e.target.value
}
}
如果加了括号,无$event,则e会丢失.
<input type="text" :value="msg" @input="fn(name)">
data: {
msg: "hello",
fn: function (name) {
console.log(name);
}
} v-model是:value+@input的语法糖
<input type="text" v-model="msg">
data: {
msg: "hello",
fn: function (e) {
this.msg=e.target.value
}
} select
<select v-model="selectValue">
<option value="0" disabled>请选择</option>
<option v-for="(value,key) in menu" :value="value.id" :key=`menu_${key}`>{{value.name}}</option>
</select>
data: {
selectValue:"0",
menu:[
{name:"m1",id:1},
{name:"m2",id:2},
{name:"m3",id:3},
]
}, 如果是multipule的select则要改成数组
<select v-model="selectValue" multipule>
<option value="0" disabled>请选择</option>
<option v-for="(value,key) in menu" :value="value.id" :key=`menu_${key}`>{{value.name}}</option>
</select>
data: {
selectValue:[],
menu:[
{name:"m1",id:1},
{name:"m2",id:2},
{name:"m3",id:3},
]
}, radio: 根据v-model分组
男:<input type="radio" v-model="radioValue" value="男">
女:<input type="radio" v-model="radioValue" value="女"> <br>
{{radioValue}} checkbox单选,多选 修饰符
.number
.number.lazy
不加lazy是实时更新数据的
<input type="number" v-model.number="product.productCount" min="1">
使得产生的类型是数字
如果不加产生的是字符串
.trim
删除首尾空白 键盘修饰符
.enter.ctrl.keyCode
@keyup.enter.esc
@keyup.13
@keyup.f1 事件修饰符
@事件.stop
stopPropagation,cancelBubble=true;
@事件.capture
xxx.addEventListener('click',fn,true)
@事件.prevent
preventDefault,returnValue=false
@事件.once
on('click') off('click')
@事件.self
e.srcElement&&e.target 判断事件源绑定事件
事件汇总(事件绑定)
@click
点击时候触发
@input
自己实现v-mode(:value+@input的语法糖)时候用过
@change
针对select下拉框改变
@keyup
@keyup
键盘抬起后触发
<input type="text" v-model="msg" @keyup="fn">
@keyup.13
输入后,按回车键
@keyup.esc
输入后,按esc触发

[js]vue小结的更多相关文章

  1. js isArray小结

    原文:[转载]js isArray小结 在日常开发中,我们经常需要判断某个对象是否是数组类型的,在js中检测对象类型的常见的方法有几种: 1.typeof操作符.对于Function.String.N ...

  2. Js继承小结

    Js继承小结 一直以来,对Js的继承有所认识,但是认识不全面,没什么深刻印象.于是,经常性的浪费很多时间重新看博文学习继承,今天工作不是特别忙,有幸看到了http://www.slideshare.n ...

  3. [js]js设计模式小结

    js设计模式小结 工厂模式/构造函数--减少重复 - 创建对象有new - 自动创建obj,this赋值 - 无return 原型链模式 - 进一步去重 类是函数数据类型,每个函数都有prototyp ...

  4. [js]设计模式小结&对原型的修改

    js设计模式小结 工厂模式/构造函数--减少重复 - 创建对象有new - 自动创建obj,this赋值 - 无return 原型链模式 - 进一步去重 类是函数数据类型,每个函数都有prototyp ...

  5. JS(vue iview)分页解决方案

    JS(vue iview)分页解决方案 一.解决思路 使用分页组件 使用组件API使组件自动生成页面数量 调用组件on-change事件的返回值page 将交互获得的数组存在一个数组list中 通过p ...

  6. 7-81 js课程小结

    7-81 js课程小结 学习要点 理解全局对象 变量的作用范围 理解全局对象Global 全局属性和函数可用于所有内建的 JavaScript 对象.全局对象是所有全局方法的拥有者,用来统一管理全局方 ...

  7. (vue.js)Vue element tab 每个tab用一个路由来管理?

    (vue.js)Vue element tab 每个tab用一个路由来管理? 来源:网络整理     时间:2017/5/13 0:24:01     关键词:   关于网友提出的“ (vue.js) ...

  8. 解析Nuxt.js Vue服务端渲染摸索

    本篇文章主要介绍了详解Nuxt.js Vue服务端渲染摸索,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. Nuxt.js 十分简单易用.一个简单 ...

  9. JS vue 组件创建过程

    https://www.jianshu.com/p/3504a1edba42 vue.js原生组件化开发(一)——组件开发基础 0.3472017.05.09 12:00:54字数 1120阅读 33 ...

随机推荐

  1. js 小细节(持续更新)

    1.在对数据进行操作时,一定要考虑数据里面每一个value值是否存在 $.each(data, function(i, item){ if(item == null || item.firstFram ...

  2. 新人数据库连接不上或数据库配置管理器里面sql服务打不开问题

    新人在链接数据库时可能会出现链接不上数据库,这个问题解决方法是大家找到配置管理器里面,把那些停用的功能开启一下应该就可以.但是我们有的电脑还会遇到里面配置里面什么也没有的情况,这个时候我们就得到控制面 ...

  3. Linux CentOS7 httpd 配置注释

    本文首发:https://www.somata.work/2019/LinuxCentOShttpdConfigComment.html 如果没看懂可以去看看官方发布的文档 apache官方文档 co ...

  4. kafka相关

    一.消息队列优点(解耦.异步.削峰)二.用消息队列都有什么优点和缺点?三.kafka.activemq.rabbitmq.rocketmq都有什么区别四.如何保证消息队列的高可用啊?五.如何保证消息不 ...

  5. sklearn逻辑回归实战

    目录 题目要求 ex2data1.txt处理 方案一:无多项式特征 方案二:引入多项式特征 ex2data2.txt处理 两份数据 ex2data1.txt ex2data2.txt 题目要求 根据学 ...

  6. virtualBox+centOS的一些报错

    step1: 安装系统后进入命令行模式 安装virtualBox:https://www.virtualbox.org/wiki/Downloads 下载centOS7镜像:https://www.c ...

  7. linux学习-添加多个硬盘和lvm配置

    原文 一般,服务器会有多个硬盘,一块硬盘分区安装操作系统,另外多块硬盘分区做存储使用.现在测试添加多块硬盘分区,使用lvm进行实现动态磁盘分配. 1.新增硬盘查看 fdisk -l 可以看到新增的两块 ...

  8. jaxb读有BOM的XML文件问题

    一开始找了半天没找到什么原因,读文件就报错: Content is not allowed in prolog 后来发现是文件是UTF-8带BOM和不带BOM的问题 问题就好解决了,直接读带BOM文件 ...

  9. C#百度api 根据经纬度获取地址

    public string GetAddress(string lat, string lng) { try { string res = ""; string url = @&q ...

  10. BZOJ 1420 Discrete Root

    思路:数学大汇总 提交:\(3\)次 错因:有一个\(j\)写成\(i\) 题解: 求:\(x^k \equiv a \mod p\) 我们先转化一下:求出\(p\)的原根\(g\) 然后我们用\(B ...