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>
结果图:

Hello,vue

二、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)
        }
    }

})
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页