Vue基础知识

作者: 沈凤德 | 来源:发表于2023-02-01 10:23 被阅读0次

Vue简介

动态构建用户界面的渐进式 JavaScript 框，遵循 MVVM 模。
MVVM 是Model-View-ViewModel的简写，Model也就是Vue中的data，而View是视图也就是标签页面，VM就是Vue中用于关联View与data的代码，方法，回调等等,也就是Vue

Vue特点 --响应式

响应式的原理是数据代理，可以见文章数据代理中会详细说明。
简单说明就是：在数据变化时可以被检测并对这种变化做出响应的机制，网页相关联数据数据会跟着变化

Vue 简单示例

<!DOCTYPE>
<html>
    <head>
        <title>Vue学习测试</title>
        <script src="js/v2.6.10/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <p>{{tittle}}</p><br />
            <p>{{studentName}}</p><br />
            <button @click="clickButton()" >点击</button>
            
        </div>
        <script>
            const vm=new Vue({
                
                el:"#root",
                data:{
                    tittle:"测试Vue插值 指令 计算属性",
                    studentName:"点击前姓名"
                },
                filters: {
                    fnName: function(value) {
                        return value;
                    }
                }
                methods:{
                    clickButton(){
                        this.studentName='点击后姓名'
                    }
                    
                },
                computed: {
                    name() {
                        return this.data 
                    }
                },
                watch: {
                    data(newValue, oldValue) {
                        
                    }
                },
                
            });
            
        </script>
        
    </body>
</html>

el的两种写法：

el的功能是

指定一个页面上已存在的 DOM 元素作为 Vue 实例的挂载目标；
也就是指定Vue中的方法和数据与哪个DOM元素进行交互。

写法1：

通过初始化 new Vue() 通过配置属性el属性通过CSS选择器指定具体DOM元素例如el:"#root",
在实例化的同时进行挂载

写法2：

通过方法vm.$mount()进行挂载，可以先初始化Vue实例然后选怎特定时机挂载到特定的DOM元素
示例： vm.$mount("#root"); 参数为CSS选择器指定DOM元素

Vue中的data的两种写法

对象式（不推荐）
函数式
示例：

const vm= new Vue({
        data:function(){
                       return {
                     insertMessage:"1111",
                         }  
                         },  
                  });

模板语法

什么是模板？？？
模板是将一个事物的结构规律予以固定化、标准化的成果，它体现的是结构形式的标准化。
什么是语法
所谓「语法」，就是「语言的规律」，是观察、分析实际语言现象之后人为总结出来的规律。而不是「语言的法律」，不是语法学家指定的普通人必须遵守的语言的法条。

Vue模板语法就是Vue规定(程序支持)用户可以使用的基本指令，就是Vue已经写好可以直接使用的命令或指令

Vue模板语法简介：

-插值语法
-指令语法

插值语法说明：

语法示例：

<p>{{差值表达式}}</p>

采用双大括号的形式，用于将内容（js表达式）插入到标签体内，{{}}内部的为JS表达式，可以直接使用（引用）Vue实例中的属性（data中的数据），方法。

指令语法

指令语法是指已V-开头的，Vue定制的语法。写特定语法，具有特定功能，该语法会在Vue编译的时候转化为特定功能的js代码。

内置指令：

v-text v-html文本指令语法

v-text 通过绑定内容，替换标签的所有标签体（标签不被解析）

v-html 绑定可以解析html文件，但是容易被XXS攻击。

v-pre指令跳过Vue编译指令

-可以跳过所在节点的Vue的编译过程
-可以利用它跳过：没有使用指令的语法，没有使用插值语法的节点，会加快编译。

v-cloak 防闪烁指令

作用就是用来解决浏览器在加载页面时因存在事件差而产生的闪动问题，她的原理是先隐藏文件挂载位置，处理渲染好后在显示最终结果。这个指令需要与css规则一起使用才可以

方法：在 html 中的加载点加上 v-cloak

<ul v-cloak v-for="item in obj">
 
     <li>{{ obj.name }}</li>
 
</ul>
//然后在css中添加
//解释：包含 v-cloak 属性的 html 标签在页面初始化时会被隐藏。
<style>
[v-cloak] {
     display: none;
}
</style>

Vue条件渲染显示与隐藏

标签的显示与隐藏

v-if
v-show

v-if

 写法 
1 v-if=''表达式"
2 v-else-if="表达式"
3 v-else="表达式"

适用于切换频率低的场景：
特点：不展示DOM元素直接被删除
注意：v-if v-else-if v-else 一起组合使用。

v-show

  写法 v-show="表达式"
  适用于切换频率比较高的场景
  特点：不显示DOM元素未被移除，仅仅是隐藏掉。

使用v-if隐藏时候无法获取DOM元素，v-show可以。

v-bind--数据绑定

v-bind：属性名 (或v-model)为元素的属性与js表达式相绑定。
例如v-bind:scr="js表达式" 简写方式 :src="js表达式"

绑定class样式：字符串写法

<template>
    //绑定class样式：字符串写法,适用于：样式的类名不确定，需要动态指定
    <view class="basic" :class="mood" @click="changeMood">{{name}}</view>
    //绑定class样式：数组写法,适用于：要绑定的样式个数不确定，名字也不确定
    <view class="basic" :class="classArr">{{name}}</view>
    //绑定class样式：对象写法,适用于：要绑定的样式个数确定，名字也确定，但要动态决定用不用
    <view class="basic" :class="classObj">{{name}}</view>
</template>
<script>
export default {
    data() {
        return {
            name:"class样式绑定",
            mood:'normal',
            classArr:["a","b","c"],//这样写便于对数组的增删改查，动态切换
            classObj:{a:false,b:false}//这样写便于动态切换
        };
    },
    methods: {
        changeMood() {
        //定义一个数组，用来改变样式的切换,利用数组的生成随机数函数实现
        const arr = ['happy','sad','normal']；
        this.mood = arr[Math.floor(Math.random()*3)]//Math.random()：0~1的随机数，不包含1
        }
    }
}
</script>
<style>
.basic{
        width:500px;
        height:200px;
        border:1px solid black;
    }
    
.happy{
        border:5px solid red;
        background-color: rgba(255,255,0,0.644);
        background: linear-gradient(30deg,yellow,pink,orange,yellow);
    }
    
.sad{
    border:5px solid rab(2,197,2);
    background-color: gray;
    }
    
.normal{
        background: #1382f8;
    }
    
.a{
        background: #8B008B;
    }
    
.b{
        font-size:30px;
        text-shadow:2px 2px 10px red
    }
    
.c{
        border-radius:20px
    }
</style>

绑定Sytle样式


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定样式</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <!--  绑定 style 样式 数组写法  -->
    <div class="basic" :style="{fontSize:size+'px'}">{{name}}5</div>
    <div class="basic" :style="[styleObj,styleObj2]">你好</div>
</div>
</body>

<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            styleObj: {
                fontSize: '40px',
                color: 'red',
            },
            styleObj2: {
                backgroundColor: 'blue'
            }
        },
    })
</script>
<style>
    .basic {
        height: 100px;
        width: 100px;
    }
</style>
</html>

全局自定义指令

以V-开头都是Vue给我们写好的指令，我们也可以自定义自己的指令，指令本质是js代码的合集代表。
通过 Vue.[directive]( id, [definition] )方式注册全局指令。然后在入口文件中进行 Vue.use() 调用

函数式

1.自定义指令，在对应方法内写入原生JS代码

<!DOCTYPE>
<html>              
    <head>
        <title> vue 自定义指令</title>
        <script src="js/v2.6.10/vue.min.js"></script>
    </head>
    <body>
        <div id="root">
            <!-- 自定义指令不能用大驼峰的命名方式，要使用-进行分割 -->
            <p v-myorder='msg'>123</p>
            <p v-my-text-order='msg'>123</p>
            <button @click="changeMsg">点击更改msg内容</button>
        </div>
        <script>
            const vm=new Vue({
                data() {
                    return {
                        msg: "开始测试"
                    }
                },
                methods:{
                    changeMsg(){
                        this.msg=this.msg+"123";
                        
                    }
                },
                //自定义指令方法模式，需要以directives属性进行定义
                directives: {
                    //定义方法与指令对应
                    //自定义标签方法在：标签与指令绑定的时候被调用、指令说在模板被重新解析的时候。
                    //如果使用-分割的时候方法要使用双引号阔
                    "my-text-order"(element,msg){
                        element.innerText=msg.value+"自定义命名方式";
                        
                    },
                    myorder(element,msg){
                        element.innerText=msg.value+"自定义指令";
                        
                    }
                    
                }
                
                
            });
            vm.$mount("#root");
            
        </script>
    </body>
</html>

对象式

<div id="root">
        <button @click="n++">点击进行自增</button>
        <input type="text" v-fbind:value="n">
        <!-- 自定义的一个fbind指令名 ，注意必须是小写-->
    </div>
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el:"#root",
            data:{
                n:1,
            },
            directives:{
                //directives 里面可以存放自定义指
                //对象式写法，可以分步写
                fbind:{
                    //指令与元素绑定的时候（一上来时候）
                    bind(element,binding){
                        element.value = bingding.value;
                    },
                    //指令所在元素插入页面的时候
                    inserted(element,binding){
                        element.focus()//获取焦点
                    },
                    //指令所在模板被重新解析时候（data数据发生改变，则会重新解析）
                    update(element,binding){
                        element.value = binding.value;
                    }
                }
            }
        })
    </script>

v-on 事件绑定

为控件绑定事件：

1.通过v-on:XX或者@XXX 绑定事件，其中XXX为事件名称
2.事件回调需要配置在Vue配置想的methods对象中，最后会在vm上.
3.methods中配置的函数，不要使用箭头函数，否则this就不是vm实例了。
4.methods中配置函数，都是被Vue管理的函数，this的指向是vm或组件实例对象
5.@clik="demo"和@click="demo($event)"效果一致，或者可以传递参数
传参数实例：
@click="demo($event，参数1，参数2)

事件修饰符

1、prevent：阻止默认事件

2、stop：阻止事件冒泡

3、once：事件只触发一次

5.se1f：事件触发事件，只有event.target是元素的当前操作：

示例：
<template>
  <div @click="clickEvent('out')">
    <button @click.stop="clickEvent('in')">点击</button>
  </div>
</template>
<script lang="ts">
export default {
  methods: {
    clickEvent(e) {
      console.log(e);
        //不使用.stop，点击 button 会输出 in 和 out
        //使用.stop，点击button 只会输出 in
    },
  },
};
</script>

键盘事件监听

基本使用方法：

键盘的基本事件：

keydown
keypress
keyup

通过 v-on 在监听键盘事件时添加按键修饰符

1、Vue 中的按键别名，按键修饰符：

回车 => enter
删除 => delete （捕获‘删除’和‘退格’键）
退出 => esc
空格 => space
换行 => tab
上 => up
下 =>down
左 => left
右 => right

基本示例：
<input v-on:keyup.Alt="showtips" type="text">

2、Vue未提供别名的按键，

可以使用按键原始的 key 值去绑定，但是需要注意转换用短横线命名（比如：键盘上的：CAPSLOCK 。就需要转换为：caps-lock）

3、系统修饰键（用法特殊）：ctrl、alt、shift、meta（win键）

（1）配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才会被触发
（2）配合keydown使用：正常触发事件。
系统修饰键
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl
.alt
.shift
.meta
Do something
与按键别名不同的是，修饰键和 keyup 事件一起用时，事件引发时必须按下正常的按键。换一种说法：如果要引发 keyup.ctrl，必须按下 ctrl 时释放其他的按键；单单释放 ctrl 不会引发事件。

<input @keyup.alt.67="clear">
 
<!-- 按下Alt + 释放任意键触发 -->
<input @keyup.alt="other">
<!-- 按下Ctrl + enter时触发 -->
<input @keydown.ctrl.13="submit">

对于elementUI的input，我们需要在后面加上.native, 因为elementUI对input进行了封装，原生的事件不起作用。

<input v-model="form.name" placeholder="昵称" @keyup.enter="submit">

<el-input v-model="form.name" placeholder="昵称" @keyup.enter.native="submit"></el-input>

.exact修饰符

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>

鼠标按钮修饰符

.left 
.right 
.middle

4、也可以使用 keyCode 去指定具体的按键（不推荐）

自定义指令

这些修饰符会限制处理函数仅响应特定的鼠标按钮。

image.png