Vue整体反刍
{{}} – mustache 差值表达式，绑定数据
Object.freeze(data); //实现冻结对象，禁止其他对象访问该data对象
vm.$data // vm监听的所有数据对象
computed:计算属性不加括号，基于依赖进行缓存——多次使用更加高效
方法加括号
watch:侦听器，侧重于对监测的数据变化后执行一系列功能逻辑操作
数据：data: data1
方法:msg: 'msgWatch'
监听
watch: {
msg: function(newV, oldV) {
console.log(newV, oldV);
}
}
===深度检测
obj: {
handler: function(newV, oldV) {
console.log(newV, oldV);
},
deep: true
}
过滤：
//vue作用域内：局部监听
filters: {
capitalize: function(value) {
if (!value) return '';
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
}
}
//全局监听
Vue.filter('capitalize', function(value) {
if (!value) return '';
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
});
【1】vue钩子函数
【2】<p v-cloak>{{msg}}</p> ： 解决屏幕显示内容闪烁问题
【3】<p v-once>{{msg}}</p> ： 屏幕内容只显示一次
【4】v-bind: 简写 ：ex: :href="url" v-bind:href="url"
【5】v-on:mouseover="handle" v-on: 鼠标单击事件
=====条件渲染：注意必须连在一起使用
<p>learning...</p>
<h3 v-if="bool">Vue</h3>
<h3 v-else>React</h3>
====快速捡起来
<p>score level:</p>
<h3 v-if="score>=90">A</h3>
<h3 v-else-if="score>=80">B</h3>
<h3 v-else-if="score>=70">C</h3>
<h2 v-else>D</h3>
模板元素：template—-实际页面会不显示template [内置属性]
<template v-if="isStudy">
<h2>Vue</h2>
<h2>React</h2>
</template>
note:注意这块的 加单引号 变量名才能引用到变量！！！
<p>login...type...</p>
<template v-if="loginType=='username'">
<label for="username">用户名</label>
<input type="text" name="username" id="" placeholder="请输入用户名" key="key2"> //支持组件是否复用或者重新渲染！
</template>
<template v-else-if="loginType=='email'">
<label for="email">用户名</label>
<input type="text" name="" id="email" placeholder="请输入邮箱" key="key2">
</template>
<button v-on:click="toggle">toggle</button>
=====区别v-show && v-if
v-if:真正的条件渲染，条件表达式为真，则创建；否则销毁
v-show：无论条件真假，都会渲染，通过改变display属性达到显示或隐藏的效果
所以：频繁控制元素显示和隐藏推荐使用v-show
v-on:click=”” && @click=””
计算属性的应用：支持直接返回数据对象！
<div v-for="(item,index) of fruitFilter">
{{index}}-{{item}}
</div>
computed: {
fruitFilter() {
return this.fruits.filter(item => item === 45);
}
}
Vue:获取焦点
<input type="text" v-focus:foo.a.b="score" >
===全局
Vue.directive('focus', {
inserted: function(el, binding) {
el.focus();
console.log(binding);
},
bind: function() {
console.log('开始绑定');
},
unbind: function() {
console.log('开始解绑');
},
update: function() {
console.log('开始更新');
}
});
====局部
directives: {
focus: {
inserted(el, binding) {
el.focus();
console.log(binding);
}
}
}
style:类型
====注意类名与变量名的用法：直接写类名，相当于写死；通过变量则可以灵活使用！
类名：demo1 \ demo2 :支持采用对象的写法实现 ; 其中true\false : 支持采用数据变量声明： bool = true\false
变量名：class1 \ class2 :采用数组表示
【class1 = demo1】
<p class="demo" :class="[class1,class2]">{{msg}}</p>
<p class="demo" :class="[{demo1:true},class2]">{{msg}}</p>
<p class="demo" :class="{demo1:true,demo2:true}">{{msg}}</p>
==对于类名采用数组：必须加单引号
<p class="demo" :class="['demo1','demo2']">{{msg}}</p>
===数据内，数据之间调用不支持this.bool !!!
objStyle: {
demo1: this.bool,
demo2: true
}
===注意区分css && vue属性
<div style="width: 100px; height: 100px; border: 2px solid #ccc;">div block</div> //分号隔开
<div :style="style">div block</div> //值以单引号展示
style: {
width: '100px',
height: '100px',
border: '2px solid #ccc'}
fontSize：‘30 px’ //采用驼峰式命名
或者使用--计算属性直接返回：
computed: {
styleObj() {
return {
width: '100px',
height: '100px',
border: '2px solid #ccc',
fontSize: '30px',
}
},
styleObj2() {
return {
textDecoration: 'underline'
}
}
}
事件方法：默认不加括号
【1】需要传参时，加小括号
【2】有返回值时【在模板语法中调用时】，需要加小括号
===获得事件函数：方法内部支持：直接用 event 调用
【1】不传参的情况下，默认有event值——对应的实参： $event
【2】传参的情况下：支持 $event传入
======事件修饰符
<div class="fa" @click.self="fa"> //点击到目标才生效
<div class="son" @click.stop="son"></div> //阻止冒泡
<button @click.once="fav">点赞{{num}}</button> //仅支持点击一次
<a @click.prevent="alert" href="http://www.baidu.com">百度</a> //组织默认行为：超链接跳转
.passive:移动端应用，让浏览器不要阻止事件触发【显示表明不要阻止】
一个 Vue 应用会将其挂载到一个 DOM 元素上。
HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。
{{}}只更新所在位置的内容，v-text和v-html替换整个内容
v-text :将标签内容当作普通文本； v-html会解析标签数据
v-html： 对于发生xss攻击，除非对于信任的内容！
//vm侦测具体的值变化
vm.$watch('a', function(newV, oldV) {
console.log(newV, oldV);
});
表单元素处理
<input type="text" v-model="msg">
====等价于
<input type="text" :value="msg" @input="msg=$event.target.value">
单选&多选
=========sex2 对应value的值
<input type="radio" value="man" v-model="sex2">male
<input type="radio" value="woman" v-model="sex2">female
==========hobby为数组[] 对应多选的值
<input type="checkbox" v-model="hobby" value="sleeping">sleep
<input type="checkbox" v-model="hobby" value="eating">bonus
<input type="checkbox" v-model="hobby" value="playing">game
=======下拉框select：option中value第一个不赋值，disabled显示未选择的值 || multiple –> selected为数组【】
<select v-model="selected" multiple style="height:100px">
<option value="" disabled>请选择报考大学</option>
<option value="bj">北京大学</option>
<option value="qh">清华大学</option>
<option value="sj">上交大学</option>
</select>
.lazy
.number
.trim
复选框中value & v-model选中值的区别？
<p><input type="checkbox" value="ok" v-model="all">全选</p>
-如果all 为值，则选中为true；未选中为false ;
-如果all 为数组，则选中为对应的value值
<p><input type="checkbox" value="ok" v-model="all" @click="handle">全选</p>
-对于单击事件，click事件优先于视图数据更新！！
-对于多选按钮：v-model后数组包含value的值，则选中！
事件委托机制：通过监听上一级的change事件，实现input的全选---通过数组实现
<div @change="delgate">
<input type="checkbox" value="a" v-model="hobby">a
<input type="checkbox" value="b" v-model="hobby">b
<input type="checkbox" value="c" v-model="hobby">c
</div>
=========区别于：template模板
<template v-if="loginType=='username'">
<label for="username">用户名</label>
<input type="text" name="username" id="username" placeholder="请输入用户名" key="key1">
</template>
<template v-else-if="loginType=='email'">
<label for="email">邮箱</label>
<input type="text" name="email" id="email" placeholder="请输入邮箱" key="key2">
</template>
<button v-on:click="toggle">toggle</button>
