1.取消绑定的事件 - off(‘click’,function)
function hello() {
alert('hello!');
}
a.click(hello);
setTimeout(function(){
a.off('click',hello);
})
2.有时候，我们希望用代码触发change事件，可以直接调用无参数的change()来触发该方法
var input = $('#test-input');
input.val('change it!');
input.change(); // 触发change事件
3.编写jQuery插件
给jQuery对象绑定一个新方法是通过$.fn对象实现的。
$.fn.highlight1 = function(){
this.css('background','red');
return this;
}
4.箭头图片旋转180°
transform:rotate(180deg);
5.vue双向数据绑定原理
通过Object.defineProperty这个方法，进行get()、set()方法的拦截去实现的。
var obj = {};
Object.defineProperty(obj,'myname',{
set(value){
console.log("有人修改了", value);
},
get(){
console.log("有人访问了");
}
})
6.MVC、MVP
MVC：把业务逻辑和展示逻辑分离，模块化程度高。但由于View是强依赖特定的Model的，所以View无法组件化，无法复用。
MVP：view不依赖与Model，View可以进行组件化。但Model->view的手动同步逻辑麻烦、维护困难。
7.vue常用指令
@click (v-on:click)绑定事件的指令
<button @click="handleClick()">changel</button>
v-show 动态显示隐藏
<div v-show="isShow===true">动态显示隐藏</div>
v-if 动态创建和删除:
<div v-if="isCreated"></div>
v-bind:class (:class) 动态绑定标签上的属性(class,src,alt,href等)：
:class="isActive?'red':'yellow'"
v-for 遍历数组的指令
<ul>
<li v-for="(item,index) in detaList">
{{item}}------{{index}}
</li>
</ul>
v-model 双向绑定的指令
<div id="box">
<input type="text" v-model="mytext" />
<button @click="handleClick()">add</button>
</div>
var vm = new Vue({
el:'#box',
data:{
mytext:''
},
methods:{
handleClick(){
console.log(this.mytext);
}
}
})
v-html,防止XSS、CSRF攻击
- 前端过滤
- 后台转义(< > <>)
- 给cookie加上属性http
8.vue实现Todolist
<div id="box">
<input type="text" v-model="mytext" />
<button @click="handleClick()">add</button>
<ul>
<li v-for="(data,index) in dataList">
{{data}}
<button @click="handlDel(index)">del</button>
</li>
</ul>
</div>
var vm = new Vue({
el:'#box',
data:{
mytext:'',
dataList:[]
},
methods:{
handleClick(){
this.dataList.push(this.mytext);
this.mytext = '';
},
handlDel(mIndex){
this.dataList.splice(mIndex,1);
}
}
})
9.template 就是一个包装元素，不会真正创建在页面上
<div>
<template v-if="flag">
<div>111</div>
<div>222</div>
<div>333</div>
</template>
</div>
10.列表渲染
- v-for （特殊v-for=“n in 10”）in和of 没有区别
可以循环数组，也可以循环对象
<div id="box">
<ul>
<li v-for="(data,index) of array">
{{data}} --- {{index}}
</li>
</ul>
<ul>
<li v-for="(data,key,index) of obj">
{{key}} --- {{data}} --- {{index}}
</li>
</ul>
<div v-for="n in 10">
{{n}}
</div>
</div>
var vm = new Vue({
el: '#box',
data: {
array:[11,22,33,44],
obj: {
name: '张三',
age: '30',
height: '172'
}
}
})
- key:
*跟踪每个节点的身份，从而重用和重新排序现有元素
*理想的key值是每项都有的且唯一的id。data.id - 数组更新检测
使用
11.修饰符
事件修饰符
- .stop 阻止冒泡 事件修饰符
- .prevent阻止浏览器默认事件
- .self 事件触发源是自己的时候才会触发
- .once 只执行一次
<ul @click="ulClick">
<li @click.stop="liClick">点击</li>
</ul>
<button @click.once='cjiang'>抽奖</button>
模态窗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.pop{
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
left: 0;
top: 0;
}
.pop-con{
position: absolute;
width: 300px;
height: 200px;
background: rgba(255, 255, 255, 1);
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
padding:30px;
}
</style>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<button @click="isShow=true">模态框</button>
<!-- <div v-show="isShow" class="pop" @click="isShow=false">
<div class="pop-con" @click.stop>
<div>用户名：<input type="text" /></div>
<div>密 码：<input type="text" /></div>
<div>登 录：<button>登 录</button></div>
<div>
</div> -->
<div v-show="isShow" class="pop" @click.self="isShow=false">
<div class="pop-con">
<div>用户名：<input type="text" /></div>
<div>密 码：<input type="text" /></div>
<div>登 录：<button>登 录</button></div>
<div>
</div>
</div>
<script>
new Vue({
el:'#app',
data: {
isShow: false
}
})
</script>
</body>
</html>
按键修饰符
- .enter 回车后执行
- .65 点击a后执行
<input type="text" @keyup.enter="handleKey" >
<input type="text" @keyup.65="handleKey" >
handleKey () {
console.log("插入数据");
}
12.表单绑定
单选、多选框
<input type="radio" value="vue" v-model="radios">vue
<input type="radio" value="react" v-model="radios">react
<input type="checkbox" value="vue" v-model="checkGroup">vue
<input type="checkbox" value="react" v-model="checkGroup">react
<input type="checkbox" value="jquery" v-model="checkGroup">jquery
data: {
myname: 'HTT',
checkGroup: [],
radios: ''
}
13.vscode 快捷键
行注释：ctrl + /
块注释：Shift + Alt + A
下方插入一行：Ctrl + Enter
上方插入一行：Ctrl + Shift + Enter
文件夹查找：Ctrl + Shift + F
格式化代码：Alt + Shift + F
14.动态路由
路由界面
import Detail from '../view/detail/detail' //引入组件
{
path: '/detail/:myid', //编写动态路由
component: Detail
}
动态跳转详情并携带id
<li v-for="data in dataList" :key="data.id" @click="handleClick(data.id)">
{{data.title}}
</li>
methods:{
handleClick(id){
// console.log(id);
//this.$router 是整个路由对象
this.$router.push(`/detail/${id}`); //编程式导航,注意push里是``,不是引号
}
// handleDetail () {
// location.href="#/Center"
// }
}
detail.vue 接受参数
export default {
mounted () {
//$route 当前匹配的路由对象信息
console.log(this.$route.params.myid);
}
}
15.路由跳转的3种方式
- 1.路径跳转
{
path:'/detail/:myid',
component:'detail'
}
this.$router.push(`/detail/${id}`);
this.$route.params.myid
- 2.路由命名 跳转
{
path: '/detail', //动态路由
component: Detail,
name: 'myDetail'
}
this.$router.push({
name:'myDetail',
params:{
myid: id
}
});
- 3.&query 传参
{
path:'/detail',
component:'detail'
}
this.$router.push(`/detail?id=${id}`);
this.$route.query.id
16.路由原理
- hash路由 ==> location.hash 切换
window.onhashchange 监听路径的切换 - history路由 ==> history.pushState 切换
window.onpopstate 监听路径的切换
17. Element UI
<el-image :src="require('@/assets/images/welcome.jpg')" class="imgStyle"></el-image>
18.为什么要使用TypeScript
类型推演与类型匹配
开发编译时报错
极大程度的避免了低级错误
支持JavaScript最新特性（包含ES6\7\8）
494
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
