vue笔记（上）

Vue.js笔记

指令

1. v-text：填充文本
2. v-html：填充html片段
3. v-pre：填充原始信息
   • 跳过编译过程

数据的响应式

如何理解响应式

• HTML5中的响应式
• 数据的响应式

什么是数据绑定

将数据填充到标签中

v-once只编译一次

v-once的使用场景：

如果显示的信息后续不需要修改，可以使用v-once

双向数据绑定

1. v-model双向数据绑定

   <input type="text" v-model="answer" />
   

MVVM设计思想

1. M（model）
2. V（view）
3. VM（view-model）

事件绑定

Vue如何处理事件

1. v-on指令

   <button type="button"  v-on:click="num++">点击</button>
   

2. 简写形式

   <button type="button"  @click="num++">点击</button>
   

事件函数的调用方式

1. 直接绑定函数名称

   <button type="button"  v-on:click="say">点击</button>
   

2. 调用函数

<button type="button"  v-on:click="say()">点击</button>

事件函数参数传递

<button type="button"  v-on:click="say(value1,value2)">点击</button>

1. 如果事件直接绑定函数调用，那么默认事件对象作为事件函数的第一个参数
2. 如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须为$event

事件修饰符

.stop阻止冒泡

<a href="" v-on:click.stop="doThis"></a>

.prevent阻止默认行为

<a href="" v-on:click.prevent="doThis"></a>

按键修饰符

.enter回车键

<input type="password" v-model="password" v-on:keyup.enter="submit" />

.delete删除键

<input type="password" v-model="password" v-on:keyup.delete="handle" />

自定义按键修饰符

全局config.keyCodes对象

Vue.config.keyCode.[name] =[event.keyCode];

简单计算器

<div id="app">
    <form action="">
        数值A：<input type="text" v-model="numa" />
        数值B：<input type="text" v-model="numb"/>
        <input type="button"  v-on:click="add" value="点击" >
    </form>
    <p>计算结果:{{result}}</p>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            numa:'',
            numb:'',
            result:''
        },
        methods:{
            add:function(){
                var result = parseInt(this.numa)+parseInt(this.numb);
                this.result = result;
            }
        }
    })
</script>

属性绑定

vue如何动态的处理属性v-bind

<a v-bind:href="url">百度</a>
<!--简写的方式-->
<a :href="url">百度</a>

v-model双向事件绑定的原理分析

<input type="text" v-bind:value="msg" v-on:input="msg=$event.target.value">
<!--等价于-->
<input type="text" v-model="msg">

样式绑定

class样式处理

1. 对象语法

   <div V-bind:class="{active:isActive}"></div>
   

2. 数组绑定

   <div V-bind:class="[activeClass,errorClass]"></div>
   

   样式绑定相关语法的细节

   1. 对象绑定和数组绑定可以结合使用
   2. class的绑定的值可以简化操作
   3. 默认的class如何处理？默认的class会保留

style样式处理

1. 对象语法

   <div :style="{border:borderStyle,width:widthStyle,height:heightStyle}">
   </div>
   <script type="text/javascript">
   var vm =new Vue({
       el:'#app',
       data:{
           borderStyle:'',
           widthStyle:'',
           heightStyle:''
       }
   })
   </script>
   

2. 数组语法

<div :style="[objStyle,overStyle]"></div>

分支循环结构

分支结构

• v-if
• v-else
• v-else-if
• v-show：控制元素样式是否显示

前三个配合使用；v-if控制元素是否渲染到页面

v-show控制元素是否显示（已经渲染到页面）

循环结构

• v-for遍历数组

<li  v-for='ch in chars'>{{ch}}</li>

<li  v-for='(ch,index) in chars'>{{ch+"---"+index}}</li>

• key的作用：帮助vue区分不同元素，从而提高性能

<li :key='item.id' v-for='(item,index) in list'>{{item}}+'--'+{{index}}</li>

v-if和v-for 结合使用

v-for遍历对象

<div v-for = 'parseInt(data.a('content'))'></div>

v-for和v-if结合使用

<div v-if="value==12" v-for="parseInt(data.a('content'))"></div>

Vue常用特性

表单的操作

vue-vuejs-黑马19年8月最新版--前端-webpack-vuecli-vuex等

表单的输入域

表单域修饰符

1. number：转化成数值

   <input type="text" v-model.number="age">
   

2. trim：去掉开始和结尾的空格----v-model.trim

3. lazy ：将input事件转化成change事件----v-model.lazy

自定义指令

自定义指令的语法规则

Vue.directive('focus',{
    inserted:function(el){
    //el表示指令所绑定的元素
    el.focus();
    }
})

自定义指令用法

<input type="text" v-focus>

带参数的自定义指令

Vue.directive('bgcolor',{
    bind:function(el,binding){
        //根据指定的参数设置背景色
        console.log(binding);
        el.style.backgroundColor = binding.value.color;
    }
})

带参数指令的用法

<input type = "text" v-color ="{color:'orange'}">

局部指令

var vm =new Vue({
    el:'#app',
    data:{
        msg:{
            color:'red'
        }
    },
    methods:{
        
    },
    directives:{
        color:{
             bind:function(el,binding){
                    //根据指定的参数设置背景色
                    console.log(binding);
                    el.style.backgroundColor = binding.value.color;
        	}
    }
})

计算属性

计算属性的使用

computed:{
    reverseString:function(){
        return this.msg.spilt('').reverse().join('');
    }
}

<div>
    {{reverseString}}
</div>

计算属性与方法的区别

1. 计算属性是依赖于缓存的
2. 方法不存在缓存

侦听器

1. 使用场景

   数据变化时执行异步或开销比较大的操作

2. 使用方法

   watch:{
   	firstName:function(val){
   	
   	}
   }
   

过滤器

1. 作用：格式化数据

2. 自定义过滤器

   <div id="app">
   		<input type="text" v-model="msg" />
   		<div>{{msg | upper}}</div>
   	</div>
   	<script type="text/javascript">
   		Vue.filter('upper',function(val){
   			return val.charAt(0).toUpperCase()+val.slice(1);
   		});
   		var vm =new Vue({
   			el:'#app',
   			data:{
   				msg:''
   			},
   		})
   	</script>
   

3. 使用方法

   <div>{{msg | upper}}</div>
   <div>{{msg | upper | lower}}</div>
   <div v-bind:abc="msg | upper"></div>
   

4. 局部过滤器

   filter:{
       upper:function(val){
           //方法
       }
   }
   

5. 携带参数的过滤器

   Vue.filter('upper',function(val,args){
   			
   		});
   

Vue的生命周期

挂载（初始化相关属性）

• beforeCreated
• created
• beforeMounted
• mounted

更新（元素的变更操作）

• beforeUpdated
• updated

销毁（销毁相关属性）

• beforeDestroy
• destroyed

vue生命周期的产生过程