Vue之常用基础特性

---

Vue基本用法

Vue官网

• 易用：熟悉HTML、CSS、JavaScript知识可快速上手Vue;

1. 传统开发模式

• 原生JS
  
• jQuery框架
  

2. Vue开发模式

先去官网下载Vue.js文件

在html文件中引入vue.js文件；然后开始使用，相比于之前的原生js，vue 不再需要DOM操作；


el:元素的关联位置
data:模型数据

Vue模板语法

1. 如何理解前端渲染

把数据填充到HTML标签中，在页面中可以显示

2. 前端渲染方式

1. 原生的js拼接字符串

2. 使用前端的模板引擎

模板引擎没有提供事件机制，需要在渲染完页面之后再去获取元素，然后绑定元素，然后写处理程序；

3. 使用vue特有的模板语法

• 插值表达式
  插值表达式会存在“闪动”的问题，用v-cloak指令来解决；

背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果

• 指令(这里介绍三个数据绑定指令，其他指令可以参考官方文档如何使用)
  指令的本质就是自定义属性，下面的盒子就表示div具有v-cloak属性；
  v-cloak指令用法
  
  
  v-text指令没有闪动问题

<div v-text='msg'></div>

v-html指令，可以识别标签，但是容易受到XSS攻击；
v-pre指令显示原始信息{{Hello Vue}}，跳过编译过程;

• 数据响应式
  
  v-once应用场景：如果显示的信息后续不需要修改，可以使用v-once只编译一次，提高性能；
  双向数据绑定 给input写v-model可以使得当不输入数据的时候，按键改变输入框的uname的时候在页面上也能对应显示更改以后的值；
  
  
• 事件绑定
  给button标签绑定点击事件<button v-on:click='num++'>点击</button>
  
  
  
• 事件修饰符
  阻止冒泡行为，阻止默认行为，其他的可以参考官方文档；

<button v-on:click.stop='handle1'>点击1</button>
//以上代码相当于在handle1里面写
event.stopPropagation();
<a href="http://www.baidu.com" v-on:click.prevent='handle2'>百度</a>
//以上代码相当于在handle2里面写
event.preventDefault();

• 按键修饰符
  
  
• 自定义按键修饰符
  可以通过event.keyCode获得键盘事件对象
  
  简单计算器
  
• 属性绑定
  使用v-bind绑定href属性，动态处理属性的值
  
• 样式绑定

1. class样式处理，有对象语法，数组语法；然后两种语法可以混合使用，可以简化；默认的class样式会保留不会覆盖；
   
   
2. style样式处理
   与前面的class样式处理类似
   

• 分支循坏结构
  
  v-if控制元素是否渲染到页面
  v-show控制元素是否显示，相当于display:block/none;频繁显示隐藏使用v-show，不频繁使用用v-if
  
  key可以帮助Vue区分不同的元素，提高性能，item.id是唯一的；
  v-if和v-for结合使用，val代表值，key代表键名，index代表索引，只有键名对应的值是13的才显示；
  

Vue常用特性

1. 常用特性

表单操作
自定义指令
计算属性
过滤器
侦听器
生命周期

1. 表单操作

v-model双向数据绑定；通过value的值来区分选中的是哪一个

<select v-model='occupation' multiple>

表单修饰符，number转换为数值， trim去掉开始和结尾的空格，lazy将input事件切换为change事件，失去焦点的时候才变化；

2. 自定义指令

因为内置指令不满做需求所以需要自定义指令
如下自定义指令，使用的时候写v-focus，el代表元素

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

带参数的自定义指令，使用：v-color='msg',msg是data中的一个对象

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

局部指令，定义的时候写在实例对象下面的方法

3. 计算属性

表达式的计算逻辑较复杂的，使用计算属性可以使模板内容更加简洁；method和这里的computed的区别在于方法不具有缓存，计算属性是基于他们的依赖（这个例子的依赖是msg）进行缓存的；所以有些没有更新的数据就可以不用执行两次了，提高代码效率；

4. 侦听器

侦听器应用场景：数据变换时执行异步或者开销较大的操作；

侦听器用法：使用watch

这个简单的案例也可以使用计算属性来做

computed:{
	fullName:function(){
		return this.FirstName+' '+this.lastName;
	}
}

侦听器使用场景：验证用户名是否已经注册


lazy表示表单失去焦点的时候才变化；

5. 过滤器

过滤器作用：格式化数据，将字符串格式化为首字母大写，将日期格式化为指定的格式等

过滤器定义：局部过滤器如下val 表示我们要处理的数据，如果需要全局过滤器就在vm外面使用Vue.filter

过滤器使用方法：

带参数的过滤器，第二个参数表示参数

6. 生命周期

1. 主要阶段

• 挂载（初始化相关属性）
• 更新（元素或组件的变更操作）
• 销毁（销毁相关属性）

Vue实例图书管理

效果图：

数组相关知识：

点击按钮添加list数据，删除list数据，在method里面写对应的处理函数：


以上方法不能响应式变化，修改响应式数据vue也提供了两个API：


完整代码D:\web_study\vue\day02

总结