Vue的第一天的学习

vue简介

1.什么是vue

官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。

2.vue的特性

• 数据驱动视图

  在使用了 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构。

  好处：当页面数据发生变化时，页面会自动重新渲染！

  注意：数据驱动视图是单向的数据绑定。

• 双向数据绑定

  在网页中form表单负责采集数据，Ajax负责提交数据

  在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源

  中。

  好处：开发者不再需要手动操作 DOM 元素，来获取表单元素最新的值！

2.3 MVVM

MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。MVVM 指的是 Model、View 和 ViewModel

在 MVVM 概念中：

• Model 表示当前页面渲染时所依赖的数据源。
• View 表示当前页面所渲染的 DOM 结构。
• ViewModel 表示 vue 的实例，它是 MVVM 的核心。

vue 的基本使用

① 导入 vue.js 的 script 脚本文件

② 在页面中声明一个将要被 vue 所控制的 DOM 区域

③ 创建 vm 实例对象（vue 实例对象）

<div id="app">
        {{username}}
</div>
    <!-- 导入Vue的库文件 -->
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
        //创建Vue实例对象
        const vm = new Vue({
            //el属性是固定的写法，表示当前VM要控制页面的哪个区域，接收的值是一个选择器
            el: '#app',
            //data对象就是要渲染到页面的数据
            data: {
                username: 'zs'
            }
        })
    </script>

vue 的指令与过滤器

1. 指令的概念

指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。

vue 中的指令按照不同的用途可以分为如下 6 大类：

① 内容渲染指令

② 属性绑定指令

③ 事件绑定指令

④ 双向绑定指令

⑤ 条件渲染指令

⑥ 列表渲染指令

1.1内容渲染指令

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下 3 个：

• v-text

  缺点：会覆盖元素内部原有的内容，实际开发用得不多

• 插值表达式 {{ }} 专门用来解决v-text会覆盖默认文本内容的问题

  只是内容的占位符，不会覆盖原有的内容

  在 vue 提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持 Javascript 表达式的运算，例如：

  <div>1+2的结果是：{{1+2}}</div>
  
  <div>{{tips}}反转的结果是：{{tips.split('').reverse().join('')}}</div>
  
  

• v-html 将带有标签的字符串渲染成真正的html内容

<div id="app">
        <p v-text='username'></p>
        <!--性别会被覆盖-->
        <p v-text="gender">性别</p> 
    <hr>
        <p>姓名：{{username }}</p>
        <p>性别：{{gender}}</p>
    <hr>
        <!-- 结果：<h4 style="color:red;font-weight:bold;">欢迎<h4> -->
        <div v-text="info"></div>
        <!-- 结果：<h4 style="color:red;font-weight:bold;">欢迎<h4> -->
        <div>{{info}}</div>
        <div v-html="info"></div>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script> 
        const vm = new Vue({
            el: '#app',
            data: {
                username: 'zs',
                gender: '女',
                info:'<h4 style="color:red;font-weight:bold;">欢迎<h4>'
            }
        })
    </script>

1.2属性绑定指令

如果需要为元素的属性动态绑定属性值，则需要用到 v-bind 属性绑定指令。

注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中

<div id="app">
    <input type="text" :placeholder="tips">

    <hr>
    <!-- vue规定v-bind:可以简写为冒号: -->
    <img v-bind:src="photo" style="width:150px">
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
    //创建Vue实例对象
    const vm = new Vue({
        el: '#app',
        data: {
            tips: '请输入用户名',
            photo: 'https://cn.vuejs.org/images/logo.svg'
        }
    })
</script>

1.3 事件绑定指令

vue提供了v-on事件绑定指令，用来辅助程序员为DOM元素绑定事件监听。

注意：原生 DOM 对象有 onclick、oninput、onkeyup 等原生事件，替换为 vue 的事件绑定形式后，

分别为：v-on:click、v-on:input、v-on:keyup

<div id="app">
    <p>count的值为：{{count}}</p>
    <button v-on:click='count++'>+1</button>
    #由于 v-on 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的 @ ）
    <button @click='addCount'>+2</button>
    <!-- 在绑定事件处理函数的时候，可以通过（）传递参数 -->
    <button @click='addCount1(3)'>+3</button>
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
    const vm = new Vue({ 
        el: '#app',
        data: {
            count: 0
        },
        //在methods处理函数中，this就是new出来的VM实例对象
        methods: {
            // addCount: function () {
            //     this.count += 2
            // }
            //上面的简写
            #如果在方法中需要修改data中的数据，可以通过this访问
            addCount() {
                this.count += 2
            },
            addCount1(n) {
                this.count += n
            }
        },
    })
</script>

$event(开发中不常用)

$event是vue提供的特殊变量，用来表示原生的事件参数对象event。$event 可以解决事件参数对象 event

被覆盖的问题。

<div id="app">
        <p>count的值是{{count}}</p>
        <!-- 如果count是偶数，则按钮背景颜色变成红色，否则取消背景颜色 -->
        <!-- <button @click='add'>+n</button> -->
        <button @click='add(1,$event)'>+n</button>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                count: 0
            },
            methods: {
                add(n, e) {
                    this.count += n;
                    console.log(e);
                    if (this.count % 2 === 0) {
                        //偶数
                        e.target.style.backgroundColor = 'red'
                    } else {
                        //奇数
                        e.target.style.backgroundColor = ''
                    }
                }
            }
        })
    </script>

1.4事件修饰符

在事件处理函数中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。因此，

vue 提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。常用的 5 个事件修饰符如下：

.prevent	阻止默认行为（例如：阻止 a 链接的跳转、阻止表单的提交等）
.stop	阻止事件冒泡
.capture	以捕获模式触发当前的事件处理函数
.once	绑定的事件只触发1次
.self	只有在 event.target 是当前元素自身时触发事件处理函数

<a href="http://www.baidu.com" @click.prevent="show">跳转到百度</a>

<div @click='divHandle' style="height:150px;background-color: pink;padding-left: 100px;line-height: 150px;">
            <button @click.stop="btnHandle">按钮</button>
</div>

1.5按键修饰符

<div id="app">
        <input @keyup.esc="clearInput" type="text" @keyup.enter="submit">
</div>
<script src="./lib/vue-2.6.12.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {

            },
            methods: {
                clearInput(e) {
                    console.log(e);
                    e.target.value = ''
                },
                submit(e) {
                    console.log("触发了submit事件");
                }
            }
        })
    </script>

1.6双向绑定指令v-model

vue 提供了 v-model 双向数据绑定指令，用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据

input textarea select

<div id="app">
        <div>{{username}}</div>
        <input type="text" v-model="username">

        <hr>
        <select v-model="city">
            <option value="">请选择城市</option>
            <option value="1">北京</option>
            <option value="3">上海</option>
            <option value="3">广州</option>
        </select>
</div>
<script src="./lib/vue-2.6.12.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                username: 'zs',
                city: ''
            }
        })
</script>

v-model 指令的修饰符

为了方便对用户输入的内容进行处理，vue 为 v-model 指令提供了 3 个修饰符，分别是

修饰符	作用	示例
.number	自动将用户的输入值转为数值类型

1.7条件渲染指令

条件渲染指令用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：

• v-if
• v-show

<div id="app">
        <p v-if="flag">这是被v-if控制的元素</p>
        <p v-show="flag">这是被v-show控制的元素</p>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                //如果为true,显示被控制的元素，false隐藏被控制的元素
                flag: true
            }
        })
    </script>

v-if 和 v-show 的区别

实现原理不同：

• v-if 指令会动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏；
• v-show 指令会动态为元素添加或移除 style=“display: none;” 样式，从而控制元素的显示与隐藏；

性能消耗不同：

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此：

• 如果需要非常频繁地切换，则使用 v-show 较好
• 如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很有可能也不需要被展示出来，则是由v-if效果更好

v-if v-if 可以单独使用，或配合 v-else 指令一起使用

v-else-if v-else-if 指令必须配合 v-if 指令一起使用，否则它将不会被识别！

v-else v-else 指令必须配合 v-if 指令一起使用，否则它将不会被识别！

        <div v-if="type === 'A'">优秀</div>
        <div v-if="type === 'B'">良好</div>
        <div v-if="type === 'C'">一般</div>
        <div v-if="type === 'D'">差</div>

1.8 列表渲染指令

vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for 指令需要使

用 item in items 形式的特殊语法，其中：

• items 是待循环的数组
• item 是被循环的每一项

<div id="app">
        <table class="table table-bordered table-hover table-striped ">
            <thead>
                <th>索引</th>
                <th>id</th>
                <th>姓名</th>
            </thead>
            <tbody>
                <tr :key="id" v-for="(item,index) in list">
                    <td>{{index}}</td>
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                list: [
                    { id: 1, name: '张三' },
                    { id: 2, name: '李四' },
                    { id: 3, name: '王五' }
                ]
            },
        })
   </script>

使用 key 维护列表的状态

当列表的数据变化时，默认情况下，vue 会尽可能的复用已存在的 DOM 元素，从而提升渲染的性能。但这种

默认的性能优化策略，会导致有状态的列表无法被正确更新。

为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲

染的性能。此时，需要为每项提供一个唯一的 key 属性：

<tr :key="item.id" v-for="(item,index) in list">
</tr>

key 的注意事项

① key 的值只能是字符串或数字类型

② key 的值必须具有唯一性（即：key 的值不能重复）

③ 建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）

④ 使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性）

⑤ 建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱）