vue基础概念以及vue常用指令等

vue基础概念

vue是什么

 一位华裔前google工程师（尤雨溪）开发的前端js库
基于JavaScript开发的渐进式框架(***)
作用： 动态构建用户界面(***)
优势：
	 易用：上手容易，【html、css、JavaScript】
	 灵活：库与框架之间自由伸缩
	 高效：20kB min+gzip 运行大小 ， 超快的虚拟dom
 特点：
	遵循MVVM模式
		 Mvvm 和其他框架的区别是 vue 数据驱动 通过数据来显示视图而不 是节点操作 适用于数据操作比较多的场景 
		 Mvvm 
			M	---	Model 	---		模型 
			V	---	View	---		视图 
			vm	---	ViewModel	---	是作为模型和视图的桥梁，
		当模型层数据改变，vm 会检测到并通知视图层进行相应的修改
	 本身只关注UI，可以轻松引入vue插件或者第三方库
	 编码简洁、代码少、体积小、运行效率高、移动端\pc端开发
vue与其他框架的关联：[*]
	 借鉴了react组件化与虚拟dom技术
	 借鉴了angular 模板与数据绑定技术
vue的核心
	 数据驱动
	组件化 

vue常用指令

1、v-once【只执行一次，只生效一次】

		当数据改变时，插值位置的数据不会更新

2、v-show【显示或隐藏指定元素】

	v-show 有两个值：
		1- true 	--	显示元素		--- 	控制css样式的display属性 display：block
		2- false	-- 	隐藏元素		---	控制css样式的display属性 display：none
	v-show的值有两种形式：
		1- 布尔值设置
		2- 表达式

3、v-if【条件渲染】

	1- 可以是表达式
	2- 布尔类型的值
	 可以单独使用 也可以搭配 v-else  v-else-if 去使用

4、v-if与v-show的区别

	 v-if是重新渲染 v-show是通过css样式中的display属性控制元素的显示与隐藏
	 v-if 不适合重复多次显示或者隐藏数据的操作，因为每一次显示或者隐藏都需要重新执行渲染操作
 	 v-show 适用于频繁切换显示或者隐藏数据的操作，可以减少渲染数据带来的开销

5、v-else【当v-if的值为false时执行v-else的操作】

6、v-if-else 【如果上一级v-if判断条件为false 则执行此操作 如果此条件为false 则继续向下执行 如果为true则执行完此处代码终止执行】

7、v-for 【列表渲染 – 循环】

	语法格式：
		v-for = "value in 对象\数组"
		v-for = "(value,index) in 对象\数组""
		value --- 值
		index --- 键 索引 下标
	注意：v-for的优先级高于v-if

8、v-html 【innerHTML】

	可以解析html元素设置文本

9、v-text 【innerText】

	任何数据都解析为普通文本

10、v-html 与 v-text 、 {{ }}插值 的区别

	 相同点：
		 v-html v-text {{}} 都是用来设置文本  将数据展示到视图中 
	 不同点
		v-html 与 v-text {{}}
		  v-html可以解析html元素设置文本
		  v-text {{}} 任何数据都是普通文本
	 v-text 与 {{}}
		 v-text 没有闪烁问题 
		 插值存在闪烁问题
		如何解决插值闪烁问题 后面说明
		  	方式1：使用v-text 不使用{{}}
		  	方式2：v-cloak 设置style [v-cloak]{display:none}

11、v-bind 【强制绑定属性】

	语法格式：
		v-bind:属性名 = “data中的属性名”
	简写：
		:属性名 = “data中的属性名”
	常用于：脚手架中 父组件向子组件传递数据

12、v-on 【事件监听】

	语法格式：
		v-on:事件名=“事件处理函数”
	简写：
		@事件名=“事件处理函数”

13、v-model 【 Vue 双向绑定就是：数据变化更新视图，视图变化更新数据 】

	双向绑定的原理
		Vue 数据双向绑定是通过数据劫持和观察者模式来实现的， 
		数据劫持，object.defineproperty 它的目的是：当给属性赋值的时候， 程序可以感知到，就可以控制改变属性值 
		观察者模式 当属性发生改变的时候，使用该数据的地方也发生改变

vue选项

1、data：包含多个方法的对象

	语法格式：
	methods:{
		fun:function(){
			alert(123)
		}
	}

2、computed计算属性

	 方式一：Function  ---- 方式二中的get
		fun:function(){
			alert(123)
		}
		简写
			fun(){
				alert(123)
			}
	 方式二：Object 
		属性名：{
			get(){},
			set(){}
		}
	作用：对数据做一个相应的处理

3、watch【监听属性】

	局部： watch：{
		}
	全局：vm.$watch

4、el 【vue管理的dom节点入口】

5、template 【自定义组件】