事件绑定 on [.stop .prevent .once .capture .self] keydown[.enter .f1 ctrl+click]
//methods中配置的函数，不要用箭头函数！否则this就不是vm了/****************表达式and传参****************/<!-- v-on表达式 --><button @click="count+=1">ADD</button><span>{{count}}</span><!--省略()但方法本身需要一个参数,此时vue会默认将浏览器生产的event事件对象传入到方法--><button @click="getParameter"></button><!-- 传参 --><button @click="getParameter(index,item,$event)">{{msg}}</button>/****************事件修饰符****************/<!-- 阻止冒泡.stop --><button @click.stop="stopBu">BB</button><!-- 阻止默认事件.prevent --><a @click.prevent="stopBu" href="">prevent</a><!-- .once 函数只触发一次 --><button @click.once="stopBu">once</button><!-- v-once 一次性插入,不再修改 --><h1 v-once>{{msg}}</h1><!-- 时间捕获.capture --><!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 --><div @click.capture="doThis">...</div><!-- 只当在 event.target 是当前元素自身时触发处理函数 即事件不是从内部元素触发的.self --><div @click.self="doThat">...</div>/****************按键修饰符****************/系统修饰键（用法特殊）：ctrl、alt、shift、meta(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。(2).配合keydown使用：正常触发事件。<!-- 触发回车事件 --><input type="text" @keydown.enter="stopBu" value="once"><!-- 自定义f1事件(Vue.config.keyCodes.f1 = 112) --><input type="text" @keydown.f1="stopBu" value="once"><!-- 只要有按到ctrl+click 就触发--><button @click.ctrl="stopBu">ctrl+click</button><!-- 精确到必须按ctrl+click 才触发--><button @click.ctrl.exact="stopBu">ctrl+click</button>
HTML模板语法cloak text html once bind pre
<!-- v-clock 解决差值表达式闪烁问题 --><h1 v-clack>{{msg}}</h1><!-- 与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会 --><h1 v-text="msg">{{msg}}</h1><!-- v-html 插入html内容 (会覆盖掉原有内容msg)严重注意：v-html有安全性问题！！！！(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！--><h1 v-html="htmlText">{{msg}}</h1><!-- 拼接 也可以是三元运算--><h1>{{first+last}}</h1><h1>{{first}} {{last}}</h1><!-- v-once 一次性插入,不再修改 --><h1 v-once>{{msg}}</h1><!-- v-bind 给元素属性绑定数据 --><input type="text" :value="msg"><input type="text" :value="msg +'hellow'"><!--v-pre指令：1.跳过其所在节点的编译过程。2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。--><h2 v-pre>我这里没有插值和指令</h2>
v-for
<div id="app">
<ul>
<!-- 循环数组 -->
<li v-for="item in stars">{{item}}</li>
<!-- 循环对象 一个参数时是value-->
<li v-for="item in students">
{{item}}
</li>
<!-- 循环对象 -->
<li v-for="(value,key,index) in students">
{{key}}:{{value}}
</li>
<!-- 循环数组+判断条件 -->
<li v-for="item,index in students" v-if="item.age%2==0" :key="index">
{{item.name}}
</li>
<!-- 循环数组内对象 -->
<li v-for="item,key in students" :key="key">
<h4>{{item.name}}</h4>
{{key}}---{{item.age}}---{{item.class}}
</li>
</ul>
<!-- 循环数组内多个对象 循环嵌套 -->
<ul v-for="(item,index) in msg2" :key="index">
<li v-for="item1,index1 in item" :key="index1">{{ item1 }} - {{ index1 }}</li>
</ul>
</div>
key的作用与原理
index作为key
新数据虚拟dom内部diff过程
- li key=0 与老虚拟dom对比，发现key=0的数据，于是复用
- 继续往内部对比 新数据“老刘”与老数据“张三”不符，于是取代
- input 发现一样 于是保留。此时第一条对比完毕。
- 继续对比，重复上述行为li key=1 复用，内部对比 新数据“张三”老数据“李四”不符，于是取代 。。。
id作为key
面试题：react、vue中的key有什么作用？（key的内部原理）
<br />**1. 虚拟DOM中key的作用：**<br /> key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, <br /> 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：<br /> <br />**2.对比规则：**<br /> (1).旧虚拟DOM中找到了与新虚拟DOM相同的key：<br /> ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！<br /> ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。<br /> (2).旧虚拟DOM中未找到与新虚拟DOM相同的key<br />创建新的真实DOM，随后渲染到到页面。<br /> <br />** 3. 用index作为key可能会引发的问题：**<br /> 1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:<br /> 会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。<br /> 2. 如果结构中还包含输入类的DOM：<br /> 会产生错误DOM更新 ==> 界面有问题。<br />**4. 开发中如何选择key?:**<br /> 1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。<br /> 2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。
修饰符:.lazy .number .trim
<body>
<div id="app">
<!-- 修饰符number:将字符串变为数字 -->
<input type="text" v-model.number="age">
<!-- 修饰符lazy:把v-model的input事件改为change事件(失去焦点或回车) -->
<input type="text" v-model.lazy="age">
<!-- 修饰符trim:去除内容左右空格 -->
<input type="text" v-model.trim="age">
{{age}}
</div>
<script>
let app = new Vue({
el:"#app",
data:{
age:16
},
watch:{
age:function(val){
console.log(typeof(val))
}
}
})
</script>
</body>
v-if （v-else-if ）& v-show
区别：v-show不显示时是display:node
<div id="app">
<!-- v-if和v-else中间不能出现别的内容 -->
<h1 v-if="age>18">10</h1>
<h1 v-else-if="age>14">18</h1>
<h1 v-else>20</h1>
</div>
自定义指令
全局指令 & 局部指令
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>自定义指令</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
自定义指令总结：
一、定义语法：
(1).局部指令：
new Vue({ new Vue({
directives:{指令名:配置对象} 或 directives{指令名:回调函数}
}) })
(2).全局指令：
Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)
二、配置对象中常用的3个回调：
(1).bind：指令与元素成功绑定时调用。
(2).inserted：指令所在元素被插入页面时调用。
(3).update：指令所在模板结构被重新解析时调用。
三、备注：
1.指令定义时不加v-，但使用时要加v-；
2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
-->
<!-- 准备好一个容器-->
<div id="root">
<h2>{{name}}</h2>
<h2>当前的n值是：<span v-text="n"></span> </h2>
<!-- <h2>放大10倍后的n值是：<span v-big-number="n"></span> </h2> -->
<h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
<button @click="n++">点我n+1</button>
<hr/>
<input type="text" v-fbind:value="n">
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
//定义全局指令
/* Vue.directive('fbind',{
//指令与元素成功绑定时（一上来）
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析时
update(element,binding){
element.value = binding.value
}
}) */
new Vue({
el:'#root',
data:{
name:'尚硅谷',
n:1
},
directives:{
//big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
/* 'big-number'(element,binding){
// console.log('big')
element.innerText = binding.value * 10
}, */
big(element,binding){
console.log('big',this) //注意此处的this是window
// console.log('big')
element.innerText = binding.value * 10
},
fbind:{
//指令与元素成功绑定时（一上来）
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析时
update(element,binding){
element.value = binding.value
}
}
}
})
</script>
</html>
若有收获，就点个赞吧
0 人点赞
