语法基础
-
v-cloak:
1 差值表达式存在问题：闪动（性能较差时才会出现）
2 利用v-cloak指令先隐藏，赋值好后再显示最终结果v-cloak指令的用法： 1.提供样式 [v-cloak]{ display:none; } 2 在插值表达式所在的标签中添加v-cloak -
数据绑定指令
1 v-text:填充纯文本，比插值表达式更简洁
2 v-html:填充html片段，存在安全问题，内部网站可以用
3 v-pre：显示原始信息，跳过编译过程
v-text:
<div>{{msg}}</div>
<div v-text='msg'></div>
下面与上面是一样的效果
v-html:
<div v-html='msg1'></div>
...
data:{
msg1 = '<h2>Hello</h2>'
}
作用:可以动态的生成html标签.缺点,容易遭到XSS攻击
- 数据响应式
就是指修改数据不用刷新浏览器,页面上的数据也会自动刷新
v-once:阻止再次编译,如果某个数据不需要响应式,可以使用v-once,提高性能
-
双向数据绑定
v-model -
事件绑定
v-on:click(简写： @click)
1
<button @click='add'>add</button>
2
<button @click='add()'>add</button>
注：add是methosd里提供的方法
一个小坑：
箭头函数是不绑定this的，他会捕获上下文中的this，最为自己的this，所以，在Vue的methods中的函数，如果用的箭头函数，那可就会出现不能用this拿到Vue实例的情况。
- 事件函数传参
参数可以是某个普通值，也可以是事件对象
传递事件对象的写法：
$event，固定写法
示例代码：
<button @click='params(123,$event)'>hhh</button>
params:function(data,event){
console.log(data);
console.log(event);//接收到的事件
}
注：
如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数。
如果事件绑定函数调用，那么事件对象必须作为最后一个参数传递，并且事件对象的名称必须是$event
- 事件修饰符
.stop:组织事件冒泡
冒泡：
举个例子：
<div @click='num++'> <button @click='num=1'>+</button> </div>
结果：num变成了2.我们明明是点击了button，num应该被赋值为了1，但是因为事件冒泡到了上层的div，触发了上层div的click事件，num被再次加了1，就成了2，有些时候，这并不是我们想要的结果，因此需要一个方法来阻止事件冒泡
传统的方式来阻止事件冒泡：
1 在click事件触发的函数中获取到事件对象event
2 为事件对象添加event.stopPropagation()
Vue阻止事件冒泡：
v-on:click.stop = 'fnName'
.prevent :阻止默认行为，比如a标签在点击的时候会默认发生跳转，可以用这个来阻止
- 按键事件
除了像是click这类似的鼠标事件之外呢,还是一些键盘事件,比如
keyup,就是当按键被按下时触发 - 按键事件修饰符
eg:
<input @keyup.enter='enter' />
这个的意思是就是,当焦点在input里的时候,如果按下了enter键,就会触发enter函数
有些按键不在Vue提供的范围内,我们可以自己给他添加按键事件修饰符
-
Vue属性绑定
eg :
v-bind:href='url'
就把该标签绑定来href属性，属性为data里的url的值
简写：:href='url' -
Vue样式绑定
1 class样式处理
（1）对象形式
<div v-bind:class='{active:isActive,danger:isDanger}'></div>
然后我们需要去data里设置isDanger和isActive属性，布尔值类型
而active和danger则是具体的css类名
也可以直接:
<div v-bind:class='objClassName'></div>
objClassName:{
active:true,
danger:false
}
（2）数组形式
<div v-bind:class='[activeClass,dangerClass]'></div>
data里：
activeClass:'active',
dangerClass:'danger'
- 分支结构
v-if:控制元素是否被渲染到页面
v-show：控制元素是否显示（已经渲染）
如果一个元素需要频繁的显示和隐藏，则推荐用v-show，否则用v-if - 循环结构
v-for：
<li v-for = '(item,index) in list'>{{item + '---' + index}}</li>
list是data中的一个数组
为了能有更好的性能，我们最高在遍历时为元素加上key
<li v-bind:key='item.index' v-for = '(item,index) in list'>{{item + '---' + index}}</li>
- 自定义指令
eg:
1 如果我们需要设置一个v-focus，让被绑定该指令的元素获得焦点
2 设置一个指令v-color，来改变当前元素颜色
<input type="text" v-focus v-model='msg' v-color='{color:"blue"}'>
Vue.directive('focus',{
inserted:function(el){//el表示指令所绑定的元素
el.focus()
}
})
//自定义属性2:改变当前元素的颜色 带参数
Vue.directive('color',{
inserted:function(el,binding){
el.style['background-color'] = binding.value.color;
}
})
以上两种指令的定义都是全局的，我们还可以定义局部指令:
image.png
这样的局部指令应该定义在组件内部（Vue实例也是一个组件），只能在本组件中使用
- 计算属性
实际场景：
<!-- 反转msg -->
{{msg.split("").reverse().join('')}}
我们需要把msg先反转，再展示到页面中，直接再{{}}内写相关逻辑，会导致代码不便于阅读。因此要用到计算属性.使用方法：
{{reverseMethod}}
computed:{
reverseMethod:function(){
return this.msg.split('').reverse().join('');
}
}
计算属性就是基于data中的数据来做处理的，data里的数据变了，计算属性的结果也会自动改变。
- methods和computed的区别
缓存上的差异。方法不存在缓存，计算属性是有缓存的
举个例子：
{{reverseMethod}}
{{reverseMethod}}
computed:{
reverseMethod:function(){
console.log('happy')
return this.msg.split('').reverse().join('');
}
}
这个例子中，happy只会被打印一次，如果使用方法来完成相应功能，happy会被打印两次。
缓存好处：节省性能
-
侦听器
image.png
应用场景：
数据变化时执行异步或开销大的操作
一个模拟：
<div id="box">
<span>请输入用户名：</span>
<input type="text" v-model.lazy='uname'>
<span>{{tips}}</span>
</div>
<script>
var vim = new Vue({
el:'#box',
data:{
uname:'',
tips:''
},
methods:{
checkName:function(uname){
var _this = this
setTimeout(function(){
if(uname === 'hah'){
_this.tips = '已经存在该用户名，请重新输入'
}else{
_this.tips = '该用户名可用'
}
},2000)
}
},
watch:{
uname:function(val){
this.checkName(val);
this.tips = 'waitting...'
}
}
})
</script>
-
过滤器
作用：格式化数据，如：将字符串格式转换成首字母大写，或是指定日期格式等自定义过滤器：
Vue.filter('过滤器名称',function(value){
//业务逻辑代码
})
eg：
<input type="text" v-model='msg'>
<div>{{msg | upper}}</div> //Vue过滤器的使用方法1 （插值表达式）
<div v-bind:id="msg | upper">hhh</div> //使用方法2 （属性绑定）
Vue.filter('upper',function(value){
//将语句转化为每个单词首字母大写的办法.
var result = []
value = value.split(' ');
for(var i=0;i<value.length;i++){
var tool = ''
var tools = value[i].toUpperCase()
tool += tools[0]
tools = tools.toLowerCase();
for(var j = 1; j < tools.length;j++){
tool += tools[j];
}
result.push(tool)
}
result = result.join(' ')
return result
})
注：也可以定义局部过滤器
- 带参数的过滤器
在filter定义时，回调函数中的第一个参数时默认的，时传入的数据，而我们认为进行传参的话，传入的参数是第二个参数
<div>{{date | format('yyyy-MM-dd')}}</div>
Vue.filter('test',function(val,params){
//逻辑代码
})
- Vue生命周期
主要阶段：（8个钩子函数）
1 挂载(初始化相关属性)
1)beforeCreate
2)created
3)beforeMount
4)mounted
2 更新（元素或组件的变更操作）
1)beforeUpdate
2)updated
3 销毁（销毁相关属性）
1)beforedestory
2)destoryed
比如，我们向页面中填充数据，需要保证页面中已经有模板内容了，就需要用到mounted钩子函数
-
Vue数组操作
image.png
变异方法直接使用，替换数组不会自动更新数据，要把结果传递给自己
数组的响应化：（不用v-model却可以自动更新数据）
Vue.set(vm.items,indexOfItem,newValue);
vm.$set(vm.items,indexOfItem,newValue);
参数一：要处理的数组名称
参数二：要处理的数组索引
参数三：要处理的数组的值
注：Vue中，直接操作对象是不能响应化的，同样可以用操作数组的方法来操作对象。只是在索引那里，不再是数字，而是key字符串。
网友评论