Vue 入门到精通（持续更新）

第一部分：Vue入门

                                    VUE学习思路

什么是Vue：
是一套用于构建用户界面的渐进式框架。
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

			第一步：引入
<script src="./js/vue.js"></script>
			第二步：利用插入表达式的形式，进行渲染
<div id="app">
         {
  {msg}}   //1.可以将数据填充到HTML标签中，  2. 支持基本的计算操作  //
</div>
			第三步：创建实例对象
var vm = new Vue({
     el:'#app',      el:挂载元素，值可以是CSS选择器（一般为ID选择器） 
     data:{            data:数据模型  （值是一个对象）
    msg:'你好，第一个VUE'
   }
})

---

前端渲染： 把数据填充到HTML标签之中

渲染的方式： 原生JS拼接字符串
缺点：不同的开发人员的编写代码风格不同，后期维护性困难
使用模板引擎：
缺点：缺少专门的事件机制

使用框架的模板语法： 便于后期的维护

---

第二部分：模板语法

模板语法的分类：
1-插值表达式 2-指令 3-事件绑定 4-属性绑定 5-样式绑定 6-分支循环结构

---

1-插值表达式：
{ {msg}}

---

2-指令：

		什么是指令：指令的本质就是自定义属性 指令的格式：以v-XX 开始（比如:v-cloak）

1-v-cloak
2-v-html
3-v-text
4-v-bind
5-v-show
6-v-model
7-v-for
8-v-if v-else-if v-else
9-v-pre

一： v-clock 解决插值表达式闪动的问题
解决原理：先隐藏，替换好值之后再显示最终的值

---

二：数据绑定指令

1 v-text 填充纯文本 比插值表达式更加的简洁（没有了闪动的问题）

2 v-html 填充html片段 存在安全问题 本网站内数据可以使用，第三方的数据不可以用，容易遭到XSS攻击

3 v-pre 填充原始信息 显示原始信息 跳过编译过程

---

三:响应式数据

如何理解响应式：

1.h5中的响应式   （屏幕尺寸的变化导致样式的变化）
2.数据的响应式   （数据的变化导致页面内容的变化）

什么是数据绑定： 将数据填充到标签中
v-once 显示内容之后不再具备响应式功能【显示一次之后不用再修改，可以提高性能】

---

四：双向数据绑定

v-model： 修改数据或者修改页面内容都会同步的修改

v-model的底层原理就是 v-bind和v-model的共同使用

---

五:事件绑定

v-on:click=‘XX’ 事件绑定 简写形式 @click=‘XX’
事件函数的调用方式：

  <button @click="btnHandle">方法里的+1</button>
  <button @click="btnHandle（ ）">方法里的+1</button>

事件函数的参数传递：

• 注意
  • 只要是事件发生，就会有事件对象event/e
  • event.target：获取到当前的事件源对象，发生事件的元素对象
• 总结
  • 不加小括号：如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
  • 加小括号：如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

普通参数和事件对象
<button @click="btnHandle（’参数‘ ， $event）">方法里的+1</button>
$event事件对象
event.target.tagName（触发事件的标签名称）
event.target.innerHTML（触发事件的内容）

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

---

六：事件修饰符

事件修饰符
.stop 阻止冒泡 .prevent阻止默认行为 .self只阻止本身的行为

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
因此，用 v-on:click.prevent.self 会阻止所有的点击，
而 v-on:click.self.prevent 只会阻止对元素自身的点击