vue学习记录一：vue基础认识和指令

一、什么是vue

mvvm模式
m:model数据
v：视图
vm:视图模型
数据驱动视图模型，修改视图。

二、指令

1.v-bind:可缩写成：

v-bind就是动态绑定一个元素的属性。

v-bind:href="url"等于:hrdf=url

这样可以动态修改这个url

2.v-model

实现控件的和数据的双向绑定。
一般都是用在可输入的组件中。
原理：
v-model其实是语法糖，它其实执行了下面的两个代码
给子组件绑定一个value属性
监听input事件。

 v-bind:value="userInfo"
  v-on:input="userInfo = $event"

<input  type="text" :value='msg' @input="msg =$event.target.value">
//$event.target表示是input这个元素,vaule是控件输入的值

3.自定义指令

1.不带参数的自定义

Vue.directive('focus'，{
  inserted:function(el){
  //el是指令绑定的元素。
  //focus()获取元素的焦点，
  //inserted表示的是指令的钩子函数，含义是：被绑定元素插入父节点时调用。
   el.focus();
}
})

用法

<input type='text' v-focus>
<input type='text' v-focus>
//多个的话只有第一个有效

2.带参数的自定义指令

Vue.directive('color'，{
   bind:function(el,binding){
  //el是指令绑定的元素。
  //focus()获取元素的焦点，
  //`bind`这个钩子函数：只调用一次，第一次绑定指令到元素时调用，我们可以在此绑定只执行一次的初始化动作。
el.style.backgroundColor = binding.value.color
}
})

用法

<input type='text' v-color="{color:'orange'}">
//orange与上面的binding.value后面的值对应

//多个的话只有第一个有效

3.自定义指令的钩子函数

bind
inserted

4.局部指令

注册在组件中，即vue实例中
directives属性

directive:{
color:{
bind:function(el,bingding){
el.style.backgroundColor = binding.value.color
}
},
focus:{
 inserted:function(el){
     el.focus()
}
}
}

用法

<input type='text' v-color="{color:'orange'}">
//多个的话只有第一个有效
<input type='text' v-focus>

局部组件只能在本组件中使用，全局指令没有限制，多个组件都能使用。

4.v-block，解决闪动

可以在插值表达式值没刷新出来之前，先隐藏掉，在内存中进行值的替换，替换好后在把值显示出来。这就解决了闪动的问题

[v-block]{
display:none;

}

<div v-block>
{{mes}}

</div>

5.数据绑定指令

v-text
和插值表达式{{}}类似

6.v-on

给组件绑定事件

<button @click="changeName">更换姓名</button>