2022-03-20 Vue简介

2022-03-22 本文已影响0人 93岁卧床开发

1 概述

1.1 MVVM模型

image.png

Model-View-ViewModel 的缩写，它是一种软件架构风格
Model 模型数据对象（data选项）
View 视图模板页面（用于渲染数据）
ViewModel 视图模型其实本质上就是Vue实例

通过数据驱动视图
把需要改变视图的数据初始化到 Vue中
再通过修改 Vue 中的数据
从而实现对视图的更新

声明式编程
按照Vue特定语法进行声明开发就可以实现功能，不需要我们直接操作Dom元素
命令式编程
Jquery它就是需要手动去操作Dom才能实现对应功能

2 要点

2.1 HelloWorld

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- {{}} 用于标签体内显示数据 可以写表达式 如加减乘除 -->
        Hello, {{ msg }}
        <br/>
        <!-- v-model 进行数据双向绑定 -->
        <input type="text" v-model="msg">
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            // el指定被Vue管理的入口 不可以指定body和html
            el: '#app', 
            // data初始化数据 可在被vue管理的节点下使用
            data: {
                msg: 'Vue.js'
            },
        })
    </script>
</body>
</html>

2.2 v-once

通过使用 v-once 指令，执行一次性地插值，当数据改变时插值处的内容不会更新

2.3 v-html

如果是HTML格式数据，双大括号会将数据解释为普通文本。
输出真正的 HTML需要使用 v-html指令。
Vue 为了防止 XSS 攻击在此指令上做了安全处理，当发现输出内容有 script 标签时，则不渲染。XSS 攻击主要利用 JS 脚本注入到网页中，读取 Cookie 值（Cookie一般存储了登录身份信息），读取到了发送到黑客服务器，从而黑客可以使用你的帐户做非法操作。XSS 攻击还可以在你进入到支付时，跳转到钓鱼网站。

2.4 v-bind

<!-- 红色字体是正常的 --> 
<img v-bind:src="imgUrl" alt="VueLogo"> 
<!-- 缩写 --> 
<img :src="imgUrl" alt="VueLogo">

2.5 v-on

<body>
    <div id="app">
        <h2>1. 事件处理方法</h2> 
        <button @click="say">Say {{msg}}</button> 
        <!-- 多个参数将$event作为实参传入DOM原生事件 -->
        <button @click="warn('hello', $event)">Warn</button>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript"> 
        var vm = new Vue({
            el: '#app', 
            data: { 
                msg: 'Hello, Vue.js' 
            }, 
            methods: {
                // 单个参数默认传入DOM原生事件
                say: function (event) {
                    alert(this.msg) 
                    alert(event.target.innerHTML)
                },
                // 多个参数将$event作为实参传入DOM原生事件
                warn: function (msg, event) { 
                    alert(msg + "," + event.target.tagName) 
                }
            }
        }) 
    </script>
</body>

2.6 v-if

v-if 是否渲染当前元素 v-else v-else-if
v-show 与 v-if 类似，但始终会被渲染，通过切换元素的display属性控制显示/隐藏

什么时候元素被渲染
v-if 如果在初始条件为假，则什么也不做，每当条件为真时，都会重新渲染条件元素
v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换
使用场景选择
v-if 有更高的切换开销，v-show 有更高的初始渲染开销
频繁地切换使用 v-show 较好；如果在运行后条件很少改变则使用 v-if 较好

<body>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
    <div id="app">
        <h2>v-if 条件渲染</h2> <input v-model="seen" type="checkbox">勾选后显示红色小块
        <!-- v-if 为 true则显示渲染当前元素, -->
        <div v-if="seen" class="box"></div>
        <p v-else>红块已隐藏</p>
        <h2>v-show 条件渲染</h2> <!-- v-show 的元素始终会被渲染并保留在 DOM 中,只是简单切换元素的 CSS 属性 display 显示隐藏,而不是重新加载div-->
        <div v-show="seen" class="box"></div>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript"> 
        var vm = new Vue({ 
            el: '#app', 
            data: { 
                seen: false 
            } 
        }) 
    </script>
</body>

2.7 v-for

// 迭代数组
<div v-for="item in items" :key="item.id"></div> 
<div v-for="(item, index) in items" :key="item.id"></div>
// 迭代对象的属性
<div v-for="value in object" ></div> 
<div v-for="(value, key) in object"></div> 
<div v-for="(value, key, index) in object"></div>

<body>
    <div id="app">
        <h2>1. 迭代数组</h2>
        <ul>
            <!-- e 为当前对象别名，index 数组下标0开始-->
            <li v-for="(e, index) of emps" :key="index"> 
                编号：{{index+1}}，姓名：{{e.name}}，工资：{{e.salary}} 
            </li>
        </ul> <br>
        <h2>2. 迭代对象</h2>
        <ul>
            <!-- value是属性值，key是属性名，index索引值-->
            <li v-for="(value, key, index) in emps[0]"> 
                第{{index+1}}个属性为：{{key}} = {{value}}
            </li>
        </ul>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript"> 
        var vm = new Vue({ 
            el: '#app', 
            data: { 
                emps: [
                    { name: '马云', salary: '20000' }, 
                    { name: '马化腾', salary: '18000' }, 
                    { name: '刘强东', salary: '13000' }
                ] 
            } 
        }) 
    </script>
</body>

2.8 v-pre

可以用来显示原始插入值标签 {{}}
也可以让标签不需要vue的管理，加快编译速度

<span v-pre>{{Hello World}}</span>

2.9 v-text

等价于 {{}} 用于显示内容，但区别在于{{}} 会造成闪烁问题， v-text 不会闪烁

2.10 v-cloak

默认一开始被 Vue 管理的模板是隐藏着的
当 Vue 解析处理完 DOM 模板之后会自动把这个样式去除
然后就显示出来

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>指令</title>
        <style>
            /*将带有 v-clock 属性的标签隐藏*/
            [v-cloak] {
                display: none;
            }
        </style>
    </head>

    <body>
        <!-- 在被 Vue 管理的模板入口节点上作用 v-cloak 指令-->
        <div id="app" v-cloak>
            <!-- 
                用QQ浏览器刷新页面时, {{}} 会有明显闪烁现象
                浏览器从上往下依次解析, 会先把 {{ message }} 当作标签体直接先渲染
                然后 Vue 再进行解析 {{ message }} 变成了 message 的值: 'hello mengxuegu' 
            -->
            <h3>{{ message }}</h3>
            <h3>{{ message }}</h3>
            <h3 v-text="message"></h3>
        </div>
        <script src="./node_modules/vue/dist/vue.js"></script>
        <script type="text/javascript"> 
            new Vue({ 
                el: '#app', 
                data: { 
                    message: 'hello mengxuegu' 
                }
            }) 
        </script>
    </body>

</html>