一、Vue的基本使用步骤

1.需要提供标签用于填充数据
2.引入vue.js库文件
3.可以使用vue的语法库做功能
4.把vue提供的数据填充到标签里面

  <div id="app">
<div>{{msg}}</div>
</div>   
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">var vm = new Vue({el:'#app',data:{msg:' Hello,vue'}})
</script>
结果图：

二、vue的基本使用

Hello,vue实例细节分析

1.el: 元素挂在位置（值可以是css选择器或者DOM元素）
2.data: 模型数据（值是一个对象）
3.{{}}: 差值表达式

• 将数据填充到HTML标签中
• 差值表达式支持基本的计算操作

4.概述编译过程概念（Vue语法->vue框架(编译)->原生语法）

三、Vue模板语法

1.如何理解前端渲染？

把数据填充到HTML标签中

2.前端渲染方式

• 原生js拼接字符串
  -基本上就是将数据以字符串的方式拼接到HTML标签中。
  -
  缺点：不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护变得逐渐困难。
• 使用前端模板引擎
  右侧代码是居于模板art-template的一段代码，与字符串拼接 相比，代码明显规范许多，拥有一套自己的模板语法规则。
  

3.vue模板语法概念

• 差值表达式
• 指令
• 时间绑定
• 属性绑定
• 样式绑定
• 分支循环结构

3.1指令

1、什么是指令

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

2、v-cloak指令的用法

• 差值表达式存在的问题：“闪动”（在页面有些卡的时候，会先显示{{}}，之后进行替换）

• 如何解决该问题：使用v-cllock指令

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

    <style>[v-cloak]{display: none;}</style><div id="app"><div v-cloak>{{msg}}</div></div>
  

v-cloak指令的用法
1.提供样式
[v-cloak]{
display: none;
}
2.在差值表达式所在的标签中添加v-cloak指令

原理：

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

3、数据绑定指令

• v-text 填充纯文本
  相比表达式更加简洁
• v-html 填充HTML片段
  存在安全问题,容易导致XSS攻击
  本站内数据可以使用，来自第三方的数据不可用
• v-pre 填充原始信息
  显示原始信息，跳过编译过程（分析编译过程），得到{{msg}}

数据响应式

• 如何理解响应式
  html中的响应式（屏幕尺寸的变化导致样式的变化）
  数据的响应式（数据的变化导致页面内容的变化）
• 什么是数据绑定
  数据绑定：将数据填充到标签中
• v-once只编译一次
  显示内容之后不再具有响应式功能
  应用场景：如果显示的信息后续不需要再修改，可以使用v-once，提高性能

3.3 双向数据绑定

1、什么是双向数据绑定
数据到页面，用户改内容影响模块

<div v-text="msg"></div>
<input type="text" v-model="msg">

2、MVVM思想

• M(model) 用到的数据
• V(view) 写的DOM元素
• VM(view-Model) 俩者结合，视图模型，实现控制

3.4事件绑定

1.Vue如何处理事件

• v-on指令

  <button v-on:click="num++">加一</button>
  

• v-on简写形式

   <button @click="num++">加一</button>
  

2、事件函数的调用

• 直接绑定函数名称

• 调用函数

   <button v-on:click="handle">加一1</button><button v-on:click="handle()">加一2</button>//js代码,methods:{handle:function () {console.log(this === vm);//true,这里的this是Vue实例化的对象this.num++;}
  

3、事件函数传参

• 普通参数和事件对象

    <button v-on:click="handle2">加一1</button><button v-on:click="handle1(123,466,$event)">加一2</button>//---------函数-------------,methods:{handle1:function (p,p1,event){// console.log(this === vm);//true,这里的this是Vue实例化的对象console.log(p,p1,event.target.innerHTML);this.num++;},handle2:function (event) {console.log(event.target.innerHTML)}
  

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

4、事件修饰符
.

• stop阻止冒泡
  当div增加点击事件每次增加1，而不想div中按钮也附加这个加1功能。

   //vue提供的事件修饰符,handle0:function (event) {this.num++;}<div v-on:click.stop="handle0">
  <button v-on:click.stop="handle2">加一1</button>
  

麻烦一点的方法

	 ,handle2:function (event) {console.log(event.target.innerHTML)//阻止冒泡event.stopPropagation();}

• prevent阻止默认行为

   原始方法,handle3:function (event) {//阻止默认行为event.preventDefault();}vue简化：<a href="http://www.baidu.com"  @click.prevent="handle3">百度</a>
  

• capture - 添加事件侦听器时使用 capture 模式。

• self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

• {keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

• native - 监听组件根元素的原生事件。
  .once - 只触发一次回调。

• left - (2.2.0) 只当点击鼠标左键时触发。

• right - (2.2.0) 只当点击鼠标右键时触发。

• middle - (2.2.0) 只当点击鼠标中键时触发。

• passive - (2.3.0) 以 { passive: true } 模式添加侦听器

5、按键修饰符

<div id="app">
<form action=""><div>用户名：<input type="text" v-model="uname" v-on:keyup.delete="clear"></div><div>密码：<input type="password" v-on:keyup.enter="handleSubmit" v-model="pwd"></div><div><input type="button" value="提交" v-on:click="handleSubmit"></div>
</form>
</div>

<script>
var vm = new Vue({el:'#app',data:{uname:'',pwd:''},methods:{handleSubmit:function () {console.log(this.uname,this.pwd)},clear:function () {//按delete键清空用户名this.uname=''}}
})

6、自定义按键

<input type="text" v-on:keyup.65="handle" v-model="info">
//函数
,handle:function (event) {console.log(event.target.value)}
//每个值是键盘按钮的唯一标识
<input type="text" v-on:keyup.aaa="handle" v-model="info">
Vue.config.keyCodes.aaa = 65;

案例：简单计算器
实现简单的加法计算，分别输入a和b,点击按钮，结果显示在下面

</form>
<div><button  type="button"  v-on:click="add2">计算加法</button>
</div>
<div>计算结果：<span v-text="result"></span></div>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({el:'#app',data:{num1:'',num2:'',result:''},methods:{add2:function () {this.result = parseInt(this.num1 )+ parseInt(this.num2)}}})