Vue 笔记一

最新推荐文章于 2024-04-26 13:21:00 发布

e神还是心头好

最新推荐文章于 2024-04-26 13:21:00 发布

阅读量118

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_43606967/article/details/119176593

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1 数据丢失

第一类：数组中的值类型：用新数组替换原来的数组

第二类：数组中的新成员：用新数组替换原来的数组

第三类：对象中的新属性：用新对象替换原来的对象

第四类：未初始化的：将数据初始化。

解决数据丢失还可以用 $set

$set
第一个参数表示数据对象，可以是vue实例化对象，也可以是其它对象

第二个参数表示属性名称

第三个参数表示属性值

let app = new Vue({
    el: '#app',
    data: {
        colors: ['red', 'green', 'blue', { title: 'nihao' }],
        size: {
            width: 100,
            height: 200
        },
        // 初始化数据
        abc: 'hello'
    }
})

// 数据丢失：
// 第一类：数组中的值类型：
app.colors[1] = 'pink';
// 第二类：数组中的新成员：
app.colors[4] = 'orange';
// 第三类：对象中的新属性：用新对象替换原来的对象
app.size.say = 'nihao';

// 通过$set方法修改
// 第一类
app.$set(app.colors, 1, 'pink');
// 第二类

// 第三类
app.$set(app.size, 'say', 'hello');

2 计算属性数据

我们想在获取数据的时候，动态改变数据，可以使用计算属性数据技术。
计算属性数据定义在comptued属性中：定义的是方法，获取的时候，会将执行的结果返回（是计算的）
computed与data的用法是一样的，添加给vue实例化对象自身，并设置了特性，定义的时候都是一个对象，返回值，就是获取的数据。

注意：当多次使用计算属性数据的时候，该方法只会执行一次。只有当内部使用的数据发生改变的时候，计算数据数据的方法才会执行一次。

let app = new Vue({
    el: '#app',
    // data属性绑定数据
    data: {
        msg: 'hello',
    },
    // 计算属性数据
    computed: {
        dealMsg() {
            // 动态返回数据
            return this.msg.toUpperCase();
        }
    }
})

<!--使用计算属性数据-->
<h1>{{dealMsg}}</h1>

3 插值

为了在模板中，使用模型中的数据，我们可以使用插值语法：{{}}，真正的js环境

注意：插值语法中的js表达式无法复用，想复用可以放在计算属性数据中（多定义监听器，性能）。
如果逻辑复杂：建议计算属性数据
如果逻辑简单：建议js表达式。

let app = new Vue({
    el: '#app',
    data: {
       msg: 'hello',
    }
})

<!-- {{}}中是真正的js环境 因此可以书写表达式 -->
<h1>{{msg.toUpperCase() + '!'}}</h1>

4 属性绑定

v-bind指令，动态设置属性
语法 v-bind:key=”value”
语法糖 :key=”value”

<h1 v-bind:title="msg">{{msg}}</h1>

5 插值指令

v-text：该指令用来设置元素的内容，
1 避免插值符号闪烁。
2 只能渲染元素的全部内容，我们还可以用字符串拼接形式来解决这个问题。

v-html：该指令用来渲染带有html标签的文本。
1 避免插值符号闪烁。
2 只能渲染元素的全部内容，我们还可以用字符串拼接形式来解决这个问题。
3 可以渲染标签。

v-once：该指令用来让内容单次渲染。
该指令不需要设置属性值。
该指令会让其所在的元素及其所有子元素上的所有插值与指令只执行一次。

6 插值过滤器

使用过滤器

<div id="app">
        <!-- 使用过滤器的标志是 |  -->
        <h1>{{price | currency}}</h1>
        <h1>{{price | currency '￥'}}</h1>
        <!-- 使用内置过滤器中的 uppercase -->
        <h1>{{msg | uppercase}}</h1>
</div>
<!--输出的结果是
$123,456.00
￥123,456.00
HELLO
-->

自定义过滤器

全局过滤器

import Vue from 'vue';
// 全局过滤器  str默认就是 使用该过滤器的值
Vue.filter('dealMsg', (str, ...args) => {
    // 处理str 去掉-_ 将第一个字母改为大写
    return str.replace(/[-_]([a-z])?/g, (match, $1 = '') => {
        // 返回结果
        return $1.toUpperCase()
    })
})

使用全局过滤器

<div id="app">
        <!-- 使用过滤器的标志 | -->
        <h1>{{msg | dealMsg}}</h1>
        <!-- 可以传参 -->
        <h1>{{msg | dealMsg(true, 100, 'abc')}}</h1>
    </div>

局部过滤器

let app = new Vue({
    // el属性 绑定视图
    el: '#app',
    // data属性绑定数据
    data: {
        msg: 'abc_efh-Ljk-iop',
        title: 'hello world'
    },
    // 定义局部过滤器
    filters: {
        uppercase(val) {
            // console.log(this, arguments);
            return val.toUpperCase()
        },
        // slice过滤器
        slice(val, ...args) {
            // console.log(args);
            return val.slice(...args);
        }
    }
})

使用局部过滤器

 <h1>{{title | uppercase}}</h1>
<!-- 使用多个过滤器  前一个过滤器处理后的值 再用下个过滤器处理 -->
<h1>{{title | uppercase | slice(3, 5)}}</h1>

7 v-model指令

v-model指令，属性值就是绑定的数据，1 只能绑定数据，不能使用表达式 2 绑定的数据必须在模型中定义。

8 v-cloak指令

第一步为容器元素设置v-cloak指令（属性）
第二步在style标签内（style标签要定义在容器元素的前面），通过v-cloak属性选择器，设置display: none样式，将元素隐藏。

<style>
        /* 使用属性选择器 */
        [v-cloak] {
            display: none;
        }

</style>

<!-- 可以为app 使用v-cloak指令  -->
    <div id="app" v-cloak>
        <h1>{{msg}}</h1>
    
        <!-- 1 使用 -->
        <h1 v-cloak>{{msg}}</h1>
	</div>

9 单选框多选框下拉框

<div id="app">
        <!-- 一组单选框绑定的是同一份数据  如果想要选中默认项  则需要修改绑定数据的值即可 -->
        <div>
            <label for="">选择兴趣爱好:</label>
            篮球:<input type="radio" value="baseketball" v-model="sports">
            足球:<input type="radio" value="football" v-model="sports">
            乒乓球:<input type="radio" value="pingpang" v-model="sports" checked>
            <h1>显示结果: {{sports}}</h1>
        </div>

        <!-- 多选框 -->
        <!-- 为了访问数据方便 将所有数据放入同一个命名空间下 -->
        <div>
            <label for="">选择兴趣爱好:</label>
            篮球:<input type="checkbox" value="baseketball" v-model="intrest.baseketball" checked>
            足球:<input type="checkbox" value="football" :true-value="'选中时候的值'" :false-value="notChoose" v-model="intrest.football" checked>
            乒乓球:<input type="checkbox" value="pingpang" v-model="intrest.pingpang">
            <h1>显示结果: {{intrest}}</h1>
        </div>


        <!-- 下拉框 -->
        <div>
            <select v-model="color">
                <option>red</option>
                <option>green</option>
                <option>blue</option>
            </select>
            <h1>显示结果: {{color}}</h1>
        </div>

        <!-- 定义了value就是value值(isRed), 要是没定义value 就是标签中的值(red) -->
        <div>
            <select v-model="color" multiple>
                <option value="isRed">red</option>
                <option value="isGreen">green</option>
                <option value="isBlue">blue</option>
            </select>
            <h1>显示结果: {{color}}</h1>
        </div>
    </div>

// 基于ES Module规范
import Vue from 'vue';

// 实例化
let app = new Vue({
    // el属性 绑定视图
    el: '#app',
    // data属性绑定数据
    data: {
        // 默认选中乒乓
        sports: 'pingpang',
        // 默认选中篮球
        intrest: {
            baseketball: true
        },
        // 默认选中 red green
        color: ['isRed', 'isGreen']
    }
})

10 数据监听器

监听模型中数据的改变，当视图中的msg改变时，会触发，有两个参数是修改前后的值

let app = new Vue({
    // el属性 绑定视图
    el: '#app',
    // data属性绑定数据
    data: {
       msg: 'hello',
    },
    // 监听数据的变化
    watch: {
        msg(newValue, oldValue) {
            console.log(this, arguments);
        }
	}

11 v-on 指令

为了绑定DOM事件
语法：v-on:click=”fn()”
语法糖是@

()表示参数集合，可有可无。
如果没有定义参数集合，
默认有一个参数，就是事件对象
如果添加了参数集合，
默认没有参数，此时使用什么数据可以在参数集合中传递。
想使用事件对象，要传递$event。
vue中事件绑定技术，没有使用事件委托技术，是直接绑定给元素的。
因此事件对象是源生的事件对象。

12 事件修饰符

通用修饰符

stop：实现阻止冒泡的修饰符。

prevent：实现阻止默认行为的修饰符。

once：表示单次触发的修饰符。

self：表示绑定事件的元素与触发事件的元素是同一个元素。

这些修饰符还可以混合使用。

鼠标键修饰符

left：点击鼠标左键

right：点击鼠标右键

middle：点击鼠标中间件

辅助键修饰符

ctrl：点击ctrl辅助键

shift：点击shift辅助键

alt：点击alt辅助键

meta：点击window|command辅助键

键盘事件修饰符

键盘事件：keydown，keyup，keypress（输入有效键）

当我们绑定键盘事件的时候，可以使用键盘事件修饰符。

有效修饰符：esc， tab， space， enter， delete（delete|backspace），up, down,
left, right, 以及所有字母键。

<div id="app">
        <!-- 通用修饰符
            stop：实现阻止冒泡的修饰符。		prevent：实现阻止默认行为的修饰符。
            once：表示单次触发的修饰符。		self：表示绑定事件的元素与触发事件的元素是同一个元素。
            这些修饰符还可以混合使用。
        -->

        <div class="parent" @click="parentClick">
        <!-- <div class="parent" @click.self="parentClick"> -->
            parent
            <!-- 会冒泡 -->
            <button @click="childClick">btn-1</button>
            <!-- 不会冒泡 利用修饰符 stop -->
            <button @click.stop="childClick">btn-2</button>
            <hr>

            <!-- 会有默认行为 -->
            <a  @click.stop="childClick" href="www.baidu.com">跳转到百度</a>
            <!-- 阻止默认行为 -->
            <a  @click.prevent="childClick" href="www.baidu.com">跳转到百度</a>
            <hr>

            <!-- 会多次触发 -->
            <button @click="childClick">btn-3</button>
            <!-- 单次触发 -->
            <button @click.once="childClick">btn-4</button>

            <hr>
            <!-- 混合使用 -->
            <!-- 阻止冒泡和单次绑定 -->
            <button @click.once.stop="childClick">btn-5</button>
            <!-- 阻止默认行为和单次绑定 -->
            <a @click.prevent.once="childClick" href="www.baidu.com">跳转到百度</a>
        </div>

        <!-- 鼠标键修饰符
            left：点击鼠标左键	right：点击鼠标右键	 middle：点击鼠标中间件
        -->
        <div>
            <button @click="childClick">btn-6</button>
            <button @click.left="childClick">btn-7</button>
            <button @click.right="childClick">btn-8</button>
            <button @click.middle="childClick">btn-9</button>
        </div>
        <hr>

        <!-- 辅助键修饰符
            ctrl：点击ctrl辅助键	shift：点击shift辅助键
            alt：点击alt辅助键		meta：点击window|command辅助键
        -->
        <div>
            <button @click.ctrl="childClick">btn-10</button>
            <button @click.shift="childClick">btn-11</button>
            <button @click.alt="childClick">btn-12</button>
            <button @click.meta="childClick">btn-13</button>
        </div>


        <!-- 键盘事件修饰符（键盘事件：keydown，keyup，keypress（输入有效键））
            当我们绑定键盘事件的时候，可以使用键盘事件修饰符。
            有效修饰符：esc， tab， space， enter， delete（delete|backspace），up, down, left, right, 以及所有字母键。 
        -->
        <div>
            <input type="text" @keydown="childClick">
            <input type="text" @keydown.esc="childClick">
            <input type="text" @keydown.tab="childClick">
            <input type="text" @keydown.space="childClick">
            <!-- enter常用的 -->
            <input type="text" @keydown.enter="childClick">
            <!-- 所有字母键 -->
            <input type="text" @keydown.z="childClick">
        </div>
    </div>