VUE知识点总结---更新中

如何理解前端渲染？

把数据填充到HTML标签中，通过前端渲染，生成静态HTML内容

前端渲染方式

• 原生JS拼接字符串
• 使用前端模板引擎
• 使用vue模板语法

VUE模板语法

声明式渲染 / 编程

模板的结构和最终显示的效果基本一致

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

1 差值表达式 {{ }}

插值表达式存在的问题：“闪动”

使用v-cloak指令

解决该问题的原理：先隐藏，替换好值之后再显示最终的值

2 指令 v-

• 本质就是自定义属性

2.1 数据绑定指令

数据绑定：将数据填充到标签中

• v-text 填充纯文本

    相比插值表达式更加简洁
  

• v-html 填充HTML片段

    存在安全问题
    本网站内部数据可以使用，来自第三方的数据不可以用
  

• v-pre 填充原始信息

    显示原始信息，跳过编译过程（分析编译过程）
  

• v-once 只编译一次

    显示内容之后不再具有响应式功能
  

2.2 双向数据绑定指令

v-model指令用法

<input type='text' v-model='uname'/>

MVVM设计思想

	M(model)
	V(view)
	VM(View-Model)

3 事件绑定v-on

v-on指令用法

<input type='button'  v-on:click='num++'/>

简写形式@

<input type='button' @click='num++'/>

3.1 事件修饰符
.stop 阻止冒泡

<a v-on:click.stop="handle">跳转</a>

.prevent 阻止默认行为

<a v-on:click.prevent="handle">跳转</a>

3.2 按键修饰符
.enter 回车键

<input v-on:keyup.enter='submit'>

3.3 自定义按键修饰符
全局 config.keyCodes 对象

Vue.config.keyCodes.f1 = 112

4 属性绑定v-bind

v-bind 指令被用来响应地更新 HTML 属性
v-bind 指令用法

  <a v-bind:href='url'>跳转</a>

缩写形式:

<a :href='url'>跳转</a>

绑定class样式
 <div v-bind:class="{ active: isActive }"></div>
 <div v-bind:class="[activeClass, errorClass]"></div>
绑定style样式
 <div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>
 <div v-bind:style="[baseStyles, overridingStyles]"></div>

5 分支循环结构

分支结构v-if

v-if
v-else
v-else-if
v-show

• v-if与v-show的区别

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

循环结构v-for

v-for遍历数组list
<li v-for='item in list'>{{item}}</li>
<li v-for='(item,index) in list'>{{item}} + '---' +{{index}}</li>
v-for遍历对象object
<div v-for='(value, key, index) in object'></div>

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

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

Vue常用特性

表单操作

基于Vue的表单操作

Input  		单行文本
textarea  	多行文本
select  	下拉多选
radio  		单选框
checkbox 	多选框

表单域修饰符

number：转化为数值
trim：去掉开始和结尾的空格
lazy :  将input事件切换为change事件

例如：

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

自定义指令Vue.directive()

原因：内置指令不满足需求时
自定义指令的语法规则

获取元素焦点的指令
<input type="text" v-focus>
 
Vue.directive('focus' {
    inserted: function(el) {
      // 获取元素的焦点
      el.focus();
    }
  }) 

计算属性

侦听器

过滤器

自定义过滤器

 Vue.filter(‘过滤器名称’, function(value){
     // 过滤器业务逻辑
  })

过滤器的使用

<div>{{msg | 过滤器名称}}</div> 

局部过滤器

filters:{
     capitalize: function(){}
  } 

生命周期

指VUE实例所产生的整个过程