Vue的学习---第一天（指令，事件绑定，数据响应）

一、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,点击按钮，结果显示在下面

简单计算器

数值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)
        }
    }

})