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>

posted @ 2020-07-27 02:14  小海_macro  阅读(195)  评论(0编辑  收藏  举报