vue复习(一)_v-bind:class indexof-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45783437/article/details/129307639

vue.js使用流程

1.导入 vue.js

  <!-- 导入vue.js -->
  <script src="./vue.js"></script>

2.准备好界面（容器）

    <!-- {{}}就是在输出某个变量的值 -->
    <div id="A">
        <p>{{ msg }}</p>
    </div>

3.实例化一个对象

// 实例化一个vue
        new Vue({
            // 找到某个盒子，并把这个盒子里的内容交给vue来管理
            // 它可以传入任何选择器，但是一般只用id选择器
            // el:''
            el: '#A',
            // 可以理解为在下面声明的都是vue里的变量
            data: {
                msg: '非主流'
            }
        })

Vue.js遵循MVVM模式，因此使用Vue.js的核心工作就是创建一个“视图模型（ViewModel）”对象，作为视图层和模型层的桥梁。
Vue.js的做法就是提供Vue类型，开发者可通过创建一个Vue类型的实例来实现视图模型的定义。（即创建Vue实例）
通常一个应用中只能有一个唯一处于最上层的Vue实例，这个Vue实例就称为“Vue根实例”。（一般称之Vue实例即可）
在这个实例对象中，可以设定很多选项（el、data），这些选项指定了这个对象的行为，即它与页面如何配合工作。

插值语法

语法：{{ 表达式 }}

表达式：变量名。

或任意表达式；算数表达式，比较表达式，逻辑表达式，三元表达式...

作用：输出表达式的结果注意：不能写语句

（分支语句、循环语句）

补充：插值语法，也被叫做胡子语法。

插入HTML片段/v-text、v-html

v-text相当于原生的innerText
v-html类似于原生的innerHTML ·语法：

<标签 v-text=“数据”></标签>

<标签 v-html=“数据”></标签>

特点：

会把数据内容放到双标签里展示,，但是v-text遇到标签不会解析，只是当纯文本，v-html遇到标签会解析，他们都会覆盖标签内原有的内容。

Eg：

什么是v-model指令？

这个指令一般是给表单元素使用的。（输入框、密码框、单选框、文本框、下拉框...)

作用：可以获取表单元素的值，也可以设置表单元素的值。

语法：<表单元素 v-model=“变量”></表单元素>

补充：交互，双向奔赴❥

Eg:

Vue的生命周期分为几个阶段?

:分为8个阶段,分别是:创建前/后,挂载前/后,更新前/后,销毁前/后

1、beforeCreate（创建前）

表示实例完全被创建出来之前，vue 实例的挂载元素$el和数据对象 data 都为 undefined，还未初始化。

2、created（创建后）

数据对象 data 已存在，可以调用 methods 中的方法，操作 data 中的数据，但 dom 未生成，$el 未存在。

3、beforeMount（挂载前）

vue 实例的 $el 和 data 都已初始化，挂载之前为虚拟的 dom节点，模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。data.message 未替换。

4、mounted（挂载后）

vue 实例挂载完成，data.message 成功渲染。内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，DOM 渲染在 mounted 中就已经完成了。

5、beforeUpdate（更新前）

当 data 变化时，会触发beforeUpdate方法。data 数据尚未和最新的数据保持同步。

6、updated（更新后）

当 data 变化时，会触发 updated 方法。页面和 data 数据已经保持同步了。

7、beforeDestory（销毁前）

组件销毁之前调用，在这一步，实例仍然完全可用。

8、destoryed（销毁后）

组件销毁之后调用，对 data 的改变不会再触发周期函数，vue 实例已解除事件监听和 dom绑定，但 dom 结构依然存在

什么是挂载?

让Vue实例控制页面中的某个区域的过程,称为挂载.

虚拟DOM : 一堆对象储存了一堆数据,然后这些数据用JS的API,比如createElement,创造出DOM,这个过程是挂载前的动作.

此时创造出的DOM还没有被使用,仅仅在内存中,需要挂载

2. 当最外层有一个叫app的id的DOM,挂载就是document.querySelector(“app”).appendChild(dom)

即完成挂载.

<body>
    <div id="d1">{{message}}</div>
    <script src="./vue.js"></script>
    <script>
        var zt = new Vue({
            el: '#d1',
            data: {
                message: 'match'
            },
            beforeCreate() {
                console.log('beforeCreate');
            },
            created() {
                console.log('created');
            },
            beforeMount() {
                console.log('beforeMount');
            },
            mounted() {
                console.log('mounted');
            },
            beforeUpdated() {
                console.log('brforeUpdate');
            },
            updated() {
                console.log('updated');
                //组件更新后调用$destoryed函数,进行销毁
                //this.$destory();
            },
            beforeDestory() {
                console.log('beforeDestory');
            },
            destoryed() {
                console.log('destoryed');
            },
        })
    </script>

基础语法

1. 单向绑定数据v-bind

v-bind用于绑定数据和元素属性
除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）
v-bind后面是：属性名=，我的理解是表示绑定这个属性，绑定之后，对应的值要去vue的数据里面找,当然也可以等于一个常数，这样就不用去data里找了。
当我们在控制台改变url时，对应也会变化。相同的，我们还可以绑定图片src属性、超链接的class

用法:

绑定HTML Class

对象语法：

我们可以给v-bind:class 一个对象，以动态地切换class。注意：v-bind:class指令可以与普通的class特性共存

绑定内联样式

对象语法:

v-bind:style 的对象语法十分直观–非常像CSS，其实它是一个Javascript对象，CSS属性名必须用驼峰命名法（官方文档写的是既可以用驼峰也可以用短横分隔命名法），用短横分隔会报错

数组语法:

可将多个样式对象应用到一个元素上

添加图片SRC地址

给img标签的src属性赋值时，按照传统的方法{{url}}：

2. 双向绑定数据v-model

v-model 是Vue框架的一种内置的API指令。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理；
表单提交是开发中非常常见的功能，也是和用户交互的重要手段：比如用户在登录、注册时需要提交账号密码；比如用户在检索、创建、更新信息时，需要提交一些数据；这些都要求我们可以在代码逻辑中获取到用户提交的数据，我们通常会使用v-model指令来完成

3. v-if 和 v-show 条件渲染

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

4. v-for 列表循环指令

例1：简单的列表渲染

<!-- 1、简单的列表渲染 -->
<ul>
    <li v-for="n in 10">{{ n }} </li>
</ul>
<ul>
    <!-- 如果想获取索引，则使用index关键字，注意，圆括号中的index必须放在后面 -->
    <li v-for="(n, index) in 5">{{ n }} - {{ index }} </li>
</ul>

例2：遍历数据列表

<!-- 2、遍历数据列表 -->
<table border="1">
    <!-- <tr v-for="item in userList"></tr> -->
    <tr v-for="(item, index) in userList">
        <td>{{index}}</td>
        <td>{{item.id}}</td>
        <td>{{item.username}}</td>
        <td>{{item.age}}</td>
    </tr>
</table>

data: {
    userList: [
        { id: 1, username: 'helen', age: 18 },
        { id: 2, username: 'peter', age: 28 },
        { id: 3, username: 'andy', age: 38 }
    ]
}

watch侦听器

语法:

  new Vue({
            el:'',
            data:{
                要监听的值:''
            },
            methods:{},
            wathch:{
                //参数一:改变后的值.
                //参数二:改变前的值.
                要监听的值(newValue,oldValue){
                    
                }
            }
        })

示例:

<!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">
        <button @click="msg = '你好' ">修改msg</button>
        <p>{{msg}}</p>
    </div>

    <script src="../../../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'hi'
            },
            //写侦听器的地方
            watch:{
                //侦听的数据变化
                //基本数据类型,这两个参数有意义
                msg(newVal,oldVal){
                    //侦听到数据变化之后,需要完成的行为
                    console.log('数据改变了',newVal,oldVal);
                    
                }
            }
        })
    </script>
</body>
</html>

特点

特点1: 所有的侦听器要定义在watch节点下

特点2:侦听器本质为函数，要监视哪个数据的变化就把数据名作为方法名即可

特点3:侦听器的参数，新值在前，旧值在后

侦听数组

数组是应用类型,存在比较复杂的侦听规则。
从理论上说,修改一个数组的内容,比如修改数组中某个元素的值,或者给数组添加新的元素,都不会修改数组本身的地址。为此, Vue.js对数组做了特殊处理,使得使用标准的数组操作方法对数组所做的修改,都可以被侦听到。
特点1:Vue不能检测以下数组的变动

利用索引值直接设置一个数组时,例如:vm.items[indexOfItem] = newValueb.
直接修改数组的长度时,例如:vm.items. length = newLength

特点2:使用标准方法修改数组可以被侦听到
①push()尾部添加 ②pop()尾部删除 ③unshift()头部添加 ④shift(）头部删除
⑤splice()删除、添加、替换 ⑥sort()排序 ⑦reverse(）逆序
(Vue将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新。)

示例:

    <div id="app">
        <ul>
            <li v-for="item in list">
                {{item}}
            </li>
        </ul>
        <button @click="list.push('666')">添加</button>
        <button @click="list.pop()">删除</button>
        <button @click="list[0] = '777' ">修改第一个项</button>
        <button @click="list.splice(1,0,'888') ">在第二个项添加</button>
    </div>
    <script src="../../../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                list:[1,2,3]
            },
            watch:{
              list(newVal,oldVal){
                console.log('数组改变了',newVal,oldVal);
              }  
  
            }
        })
    </script>

侦听对象

侦听对象指向的变化

        new Vue({
            el:'#app',
            data:{
                obj:{
                     name:'leo',
                     age:22,
                     sex:male
                }
            },
            watch:{
                obj(){
                      console.log('obj有变化');
                    }
                    
                }
            }
        })

侦听对象属性的变化

        new Vue({
            el:'#app',
            data:{
                obj:{
                     name:'leo',
                     age:22,
                     sex:male
                }
            },
            watch:{
               //记得加引号
                "obj.name"(){
                      console.log('obj有变化');
                    },
                    
                }
            }
        })

当对象变化时会调用函数/打开页面时自动调用函数/开启深度监听

        new Vue({
            el:'#app',
            data:{
                obj:{
                     name:'leo',
                     age:22,
                     sex:male
                }
            },
            watch:{
                obj(){
                      handler(){
                          console.log('obj有变化');
                    },

                    //开启深度监听
                    deep:true,

                    //是否开启打开页面时立即调用handler函数
                    immediate:true
                  }  
                }
            }
        })