AllinToyou

这个屌丝很懒，什么也没留下！

热门标签

Vue---Vue基础_vue 频繁切换index.html的charset 有影响吗

作者：AllinToyou | 2024-05-01 07:01:55

踩

vue 频繁切换index.html的charset 有影响吗

一.Vue概述

二.Vue的基本使用

2.1Vue.js之hello world 基本实例


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
</head>
 
<body>
    <div id="app">
        <span>{{message}}</span>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            message: 'hello Vue'
        }
    });
</script>
 
</html>

2.2Vue.js之hello world 细节分析

1.实例参数分析

* el : 元素的挂载位置（值可以是CSS选择器或者DOM元素）

* data : 模型数据（值是一个对象）

2.插值表达式（{{}}）的用法

* 将数据填充到HTML标签中

* 插值表达式支持基本的计算操作

3.Vue代码运行原理分析

* 概述编译过程的概念（Vue语法--->原生语法）

三.Vue模板语法

3.1.模板语法概述

1.如何理解前端渲染

2.前端渲染方式

原生js拼接字符串

使用前端模板引擎

使用Vue特有的模板语法

3.2.指令

1.什么是指令

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

2.v-cloak指令用法

插值表达式（{{}}）存在的问题：“闪动”
如何解决该问题：使用v-cloak指令
原理：先隐藏，替换好值之后再显示最终的值

官网：https://cn.vuejs.org/v2/api/

3.数据绑定指令

* v-text 填充纯文本

①相比插值表达式更加简洁

* v-html 填充Html片段

①存在安全问题

②本网站内部数据可以使用，来自第三方的数据不可以用

* v-pre 填充原始信息

①显示原始信息，跳过编译过程（分析编译过程）

！注意：v-text没有闪动问题

4.数据响应式

* 如何理解响应式

① html5中的响应式（屏幕尺寸的变化导致样式的变化）

② 数据的响应式（数据的变化导致页面内容的变化）

* 什么是数据绑定

① 数据绑定：将数据填充到标签中

* v-once 只编译一次

① 显示内容之后不再具有响应式功能

v-once的应用场景：如果显示的信息后续不需要再修改，可以使用v- once，这样可以提高性能

3.3.双向数据绑定

1.什么是双向数据绑定

* v-model指令

2.双向数据绑定分析


<body>
    <div id="app">
        <input type="text" v-model="message"> {{message}}
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            message: 'hello Vue'
        }
    });
</script>

双向数据绑定（（页面渲染的数据改变会影响vue代码里面的数据，反过来，vue代码的数据改变也会影响页面数据的改变））
双向数据绑定主要用于输入框

3.MVVM设计思想

①M(model)

②V(view)

③VM(View-Model)

M（data里面的数据）（提供数据）

V（页面展示效果）

* Model（模板数据）通过ViewModel的数据绑定（data binding）把数据绑定到View（视图）

* View（视图）通过ViewModel的事件监听（DOM listeners）修改Model（模板数据）

3.4事件绑定

1.Vue如何处理事件

* v-on指令用法

<input type="button" v-on:click="num++">

* v-on简写形式

  <input type="button" @click="num++">

2.事件函数的调用方式

* 直接绑定函数名称

<button v-on:click="say"></button>

* 调用函数

   <button v-on:click="say()"></button>

3.事件函数参数传递

* 普通参数和事件对象

     <button v-on:click="say('hi',$event)"></button>

1.事件绑定-参数传递

①如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数

②如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

2.事件绑定-自定义按键修饰符

规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode的值

3.5.属性绑定

1.Vue如何动态处理属性

* v-bind指令用法

<a v-bind:href="url">跳转</a>

* 缩写形式

<a :href="url">跳转</a>

2.v-model的底层实现原理分析

 <input type="text" v-bind:value="msg" v-on:input="$event.target.value">

3.6.样式绑定

1.class样式处理

* 对象语法

<span v-bind:class="{类名:布尔值}">hello</span>

例子：


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>
        .active {
            color: red;
        }
        
        .bing {
            font-size: 100px;
        }
    </style>
</head>
 
<body>
    <div id="app">
        <span v-bind:class="{active:isActive,bing:isBing}">hello</span>
</body>
<script src="./js/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            message: 'hello Vue',
            isActive: true,
            isBing: true
        }
    });
</script>
 
</html>

* 数组语法

<span v-bind:class="['类名']">hello</span>

例子：


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>
        .active {
            color: red;
        }
        
        .bing {
            font-size: 100px;
        }
    </style>
</head>
 
<body>
    <div id="app">
        <span v-bind:class="['active','bing']">hello</span>
</body>
<script src="./js/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            message: 'hello Vue'
        }
    });
</script>
 
</html>

注意：样式绑定相关语法细节

①对象绑定和数组绑定可以结合使用

②class绑定的值可以简化操作

③默认的class会保留，当给class样式绑定时，相当于给元素新添加一个classl类名

2.style样式处理

* 对象语法


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>
 
    </style>
</head>
 
<body>
    <div id="app">
        <span v-bind:style="{color:activeColor,fontSize:size}">hello</span>
</body>
<script src="./js/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            message: 'hello Vue',
            activeColor: 'red',
            size: '100px'
        }
    });
</script>
 
</html>

注意：样式中属性名需要驼峰命名

数组语法


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>
 
    </style>
</head>
 
<body>
    <div id="app">
        <span v-bind:style="[activeColor,size]">hello</span>
</body>
<script src="./js/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            message: 'hello Vue',
            activeColor: {
                color: 'red'
            },
            size: {
                fontSize: '100px'
            }
        }
    });
</script>
 
</html>

3.7.分支循环结构

1.分支结构

①v-if

②v-else

③v-else-if

④v-show

2.v-if与v-show的区别

①v-if控制元素是否渲染到页面

②v-show控制元素是否显示（已经渲染到了页面）

注意：当我们需要频繁切换显示组件时，为了考虑页面性能，应该采用v-show，反正则使用v-if

3.循环结构（数组）

* v-for遍历数组

<li v-for="item in arr">{{item}}</li>

  <li v-for="(item,index) in arr">{{item}}{{index}}</li>

*key的作用：帮助Vue区分不同的元素，从而提供性能

<li v-for="(item,index) in arr" :key="index">{{item}}{{index}}</li>

3.循环结构（对象）

* v-for遍历对象

<li v-for="(value,key,index) in obj" :key="index">{{value}}{{key}}{{index}}</li>

* v-if和v-for结合使用

<li v-for="(value,key,index) in obj" :key="index" v-if="value=1">{{value}}{{key}}{{index}}</li>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/517608