1.Vue学习笔记—Vue特点、基础实例、计算属性与监视、class与style绑定、渲染_vue基础计算属性、监视属性、样式绑定知识点-CSDN博客

本文链接：https://blog.csdn.net/affluent6/article/details/91544048

本文目录如下：

注意: 撰写本文目的主要是为了给自己做一个备忘录，如果你学过vue并且希望从本文中找到一些忘记的知识点，那么你可以阅读本文章。由于文章内讲解并不是很多，因此此文章并不适合小白入门使用。

1.Vue特点

1.1.Vue的特点

遵循 MVVM 模式
编码简洁，体积小，运行效率高，适合移动 / PC 端
它本身只关注UI，可以轻松引入 Vue插件 或其它 第三方库开发。

1.2.与其他前端JS框架的关联

借鉴 angular 的模板和 数据绑定 技术。
借鉴 react 的 组件化 和 虚拟DOM 技术。

1.3.Vue扩展插件

vue-cli: vue脚手架
vue-resource(axios): ajax请求
vue-router: 路由
vuex: 状态管理
vue-scroller: 页面滑动相关
mint-ui: 基于vue的UI组件库（移动端）
element-ui: 基于vue的UI组件库（PC端）

2.基础实例(动态显示)

2.1.使用Vue

引入Vue.js
创建 Vue对象
el: 指定根element（选择器）
data: 初始化数据（页面可以访问）
双向数据绑定: v-model
显示数据: {{xxx}}
理解 Vue 的 mvvm 实现

实例展示效果:
简单实例

示例代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script type="text/javascript" src="js/vue.js"></script>
    <div id="app">
        <h1>1.双大括号表达式</h1>
        <input type="text" v-model="username"><br>
        当前时间:<div>{{date}}</div>
        <p>hello {{username}}</p>
        <p v-text="msg"></p>
        <p v-html="msg"></p>

        <!-- <h2>2.指令一:强制数据绑定</h2> -->
        <!-- <img v-bind:src="imgUrl"> -->
        <!--强制数据绑定语法-->
        <!-- <img :src="imgUrl"> -->
        <!--更简洁的强制数据绑定语法-->

        <h2>3.指令二:绑定事件监听</h2>
        <!--传输参数非必需,需要时传入-->
        <button v-on:click="test">test1</button>
        <!--绑定事件监听语法-->
        <button @click="test2(msg)">test2</button>
        <!--更简洁的绑定事件监听语法-->

    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                username: 'wsswss',
                msg: '<a href="http://www.xztywss.top">逍遥子</a>',
                imgUrl: 'https://cn.vuejs.org/images/logo.png',
                date: new Date()
            },
            methods: {
                //所有事件函数都写在这个配置里面
                test() {
                    alert("信鸽")
                },
                test2(content) {
                    alert(content)
                }
            }
        })
    </script>
</body>

</html>

id=app 的 <div>标签 内前两行是用于动态显示的代码，其余为vue其他的一些知识点的练习，读者可先不必了解。
注意: 这里为了展示了Vue的基本使用方法，这是最简单的一种使用方法: 直接在html文件中引入vue.js。后面会介绍其他使用方法。并且，在后面给出的代码中，博主会选择性的将**<html>、<head>**等标签省略掉。

vue基本结构

<script type="text/javascript">
// Vue是一个vue.js库提供的构建函数
      const app = new Vue({  //配置对象（属性名称必须是指定的一些名称）
          el: '#test',  //element: 选择器字符串   表明将表面哪个元素交给vue管理
          data: {
              name: 'xztywss',
          }
      })
</script>

Js错误注意点

一个可能遇到的错误

一个可能遇到的错误解决方案

3.计算属性和监视

3.1.计算属性

前端页面预览:

在姓和名输入框内输入信息，下方的三个输入框会通过姓和名两个输入框内的内容改变自己的值，但其中它们有的输入框可以通过改变自己的值去影响姓和名输入框内信息。
单向: 即只能通过改变一端去改变另外一端。
双向: 即改变任何一方，另一方都会跟着改变。

前端页面代码:

<div id="demo">
        姓: <input type="text" placeholder="First Name" v-model='firstName'><br>
        名: <input type="text" placeholder="Last Name" v-model='lastName'><br>
        姓名1(单向): <input type="text" placeholder="Fullt Name1" v-model='fullName1'><br>
        姓名2(单向): <input type="text" placeholder="Fullt Name2" v-model='fullName2'><br>
        姓名3(双向): <input type="text" placeholder="Fullt Name3" v-model='fullName3'><br>
</div>

输入框：姓名1（单向）计算代码

computed: {
    // 什么时候执行：初始化显示/相关的data属性数据发生改变
    fullName1() {  //计算属性中的一个方法，方法的返回值作为属性值
        console.log("fullName1()")
        return this.firstName + ' ' + this.lastName
    },
}

计算属性: 必须放在**computed块内才会起作用。就像方法函数必须放在methods**那样。

计算属性

输入框：姓名3（双向）计算代码

fullName3: {
    // 1.你定义的   2.你没有调用   3.但最终它执行了
    // 2.什么时候调用？  2.用来作什么
    // 回调函数  但需要读取当前属性值时回调， 根据相关的数据计算并返回当前属性的值
    get() {
        return this.firstName + ' ' + this.lastName
    },
    // 回调函数，监视当前属性值的变化，当属性值发生改变时回调，更新相关的属性数据
    set(value) {  // value就是fullName3的最新属性值
        const names = value.split(' ')
        this.firstName = names[0]
        this.lastName = names[1]
    }
}

3.2.监视

使用方法1:

watch: {  // 配置监视
    firstName: function (value) {  // firstName发生了变化
        console.log(this)  // 就是vm对象
        this.fullName2 = value + ' ' + this.lastName
    },
}

使用方法2

vm.$watch('lastName', function (value) {
    this.fullName2 = this.firstName + ' ' + value
})

4.class与style绑定

理解
在应用中，某个（些）元素的样式是变化的
class/style绑定就是专门用来实现动态样式效果的技术
class绑定：class=‘xxx’
xxx可以是字符串
xxx可以是对象
xxx可以是数组
style绑定
:style=“{color: activeColor, fontSize: fontSize + ‘px’}”
其中activeColor/fontSize是data属性

页面展示:

代码示例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .aClass { color: red;  }
        .bClass { color: blue; }
        .cClass { font-size: 30px; }
    </style>
</head>

<body>
    <div id="demo">
        <h1>1.class绑定: :class='xxx'</h1>
        <p class="cClass" :class="a">xxx是字符串</p>
        <p :class="{aClass: isA, bClass: isB}">xxx是对象</p>
        <p :class="['aClass','cClass']">xxx是数组</p>
        <!--用的少-->

        <h1>2.style绑定</h1>
        <p :style="{color: activeColor, fontSize: fontSize + 'px'}">style测试</p>

        <button @click="update">更新</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#demo',
            data: {
                a: 'aClass',
                isA: true,
                isB: false,
                activeColor: 'red',
                fontSize: 20
            },
            methods: {
                update() {
                    this.a = 'bClass'
                    this.isA = false
                    this.isB = true
                    this.activeColor = 'green'
                    this.fontSize = 30
                }
            }
        })
    </script>
</body>

</html>

这是一个可以直接使用的实例，想看明白这段代码并不难，你只需要一点时间来琢磨就可以。

5.渲染

5.1.条件渲染

条件渲染指令
v-if
v-else
v-show
比较v-if与v-show
在需要频繁切换的场景下 v-show较好

前端代码:

<div id="demo">
      <p v-if="ok">成功了</p>
      <p v-else>失败了</p>

      <p v-show="ok">表白成功</p>
      <p v-show="!ok">表白失败</p>

      <button @click="ok=!ok">切换</button>
</div>

js代码:

<script>
      new Vue({
          el: '#demo',
          data: {
              ok: false
          }
      })
</script>

5.2.列表渲染

5.2.1.列表更改、更新与遍历

前端页面展示:

前端页面代码:

<div id="demo">
    <h2>测试: v-for 遍历数组</h2>
    <ul>
        <li v-for="(p, index) in persons" :key="index">
            {{index}}---{{p.name}}---{{p.age}}
            ---<button @click="deletep(index)">删除</button>
            ---<button @click="updatep(index,{name: 'cat',age: 20})">更新</button>
        </li>
    </ul>

    <h2>测试: v-for 遍历对象</h2>
    <ul>
        <li v-for="(value,key) in persons[1]">
            {{value}}---{{key}}
        </li>
    </ul>

</div>

js代码:

    <script>
        //Vue本身只是监视了persons的改变，没有监视数组的改变
        //Vue重写了数组中的一系列改变数组内部数据的方法(先调用原生，更新界面)-->数组内部改变,界面自动变化
        new Vue({
            el: '#demo',
            data: {
                persons: [
                    {name: 'Tom',age: 18},
                    {name: 'Wss',age: 17},
                    {name: 'Bob',age: 16},
                    {name: 'Ros',age: 15},
                ]
            },
            methods: {
                deletep(index) {
                    //删除persons中指定index的p
                    this.persons.splice(index,1)
                },
                updatep(index, newP){
                    //并没有改变persons本身，而是改变了内部的数据,但并没有调用编译方法,vue不会更新页面
                    // this.persons[index] = newP 
                    this.persons.splice(index,1,newP)  //替换
                    //splice可以实现增删改,为 0 时增加
                }
            }
        })
    </script>

5.2.2.列表排序与查找

前端页面展示:
列表排序与查找

前端代码:

    <div id="test">
        <input type="text" v-model="searchName">
        <ul>
            <li v-for="(p,index) in filterPersons" :key="index">
                {{index}}---{{p.name}}---{{p.age}}
            </li>
        </ul>

        <button @click="setOrderType(1)">年龄升序</button>
        <button @click="setOrderType(2)">年龄降序</button>
        <button @click="setOrderType(0)">原本顺序</button>
    </div>

js代码:

    <script>
        new Vue({
            el: '#test',
            data: {
                searchName: '',
                orderType: 0, //0代表原本顺序,1代表升序,2代表降序
                persons: [{
                        name: 'Tom',
                        age: 18
                    },
                    {
                        name: 'Wss',
                        age: 20
                    },
                    {
                        name: 'Bob',
                        age: 17
                    },
                    {
                        name: 'Ros',
                        age: 19
                    },
                ]
            },
            computed: {
                filterPersons() {
                    //取出相关数据
                    const {
                        searchName,
                        persons,
                        orderType
                    } = this
                    //过滤后最终需要显示的数组
                    let fPersons; //let为定义块级作用域，对外部无影响

                    //对persons进行过滤
                    fPersons = persons.filter(p => p.name.indexOf(searchName) != -1)

                    if (orderType != 0) {
                        fPersons.sort(function (p1, p2) { //如果返回负数,p1在前,返回正数,p2在前
                            //1代表升序,2代表降序
                            if (orderType === 2) {
                                return p2.age - p1.age
                            } else {
                                return p1.age - p2.age
                            }
                        })
                    }
                    return fPersons
                }
            },
            methods: {
                setOrderType(orderType) {
                    this.orderType = orderType
                }
            }
        })
    </script>