【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法

Vue框架常用知识点

文章目录

• Vue框架常用知识点
• 知识点解释
• 第一个vue应用
• 模板语法
• 计算属性与侦听器
• 条件渲染、列表渲染、Class与Style绑定

知识点解释

vue框架知识体系

【1】基本概念（条件渲染、列表渲染、时间绑定、声明周期、模块化思想）

【2】组件的使用思想及使用方式（路由组件Vue-router、前后端分离会使用到http请求，而http请求最常用的就是Vue-resource插件（官方不推荐使用，但是它仍然很好用，官方推荐使用的是Axios。）

【3】常用API

先基本概念

第一个vue应用

Vue是什么 https://cn.vuejs.org/v2/guide/index.html

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

https://cn.vuejs.org/v2/guide/

第一个Vue例子

• （Demo）Hello Vue!
• Vue.js CDN使用
• 在线Coding快速验证

直接用 script 引入

直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。

生产环境版本，优化了尺寸和速度

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

一个Vue例子 https://cn.vuejs.org/v2/guide/instance.html

Demo

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bg {
            color: red;
        }
    </style>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script> -->
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>

<body>
    <div class="app">
        <div class="bg">
            Hello World!!!
            {{msg}}
        </div>
        <div class="bg">
            {{msg}}
        </div>
    </div>
    <script>
        new Vue({
            el: '.app',
            data: {
                msg: 'Hello Vue!!!'
            }
        })
    </script>
</body>

</html>

Result

Hello World!!! Hello Vue!!!
Hello Vue!!!

error:

vue.js没有引入进来，new Vue(){} 是大写的V 我小写了 v了。。。等

总结

• 方便集成，灵活小巧
• 语法清晰，便捷强大

模板语法

模板语法 https://cn.vuejs.org/v2/guide/syntax.html

• 认识 Vue 文件结构(template, script, style)

• 插值 {{msg}}

• 指令(指令缩写) v-html(不转义), v-text(转义), v-bind:, v-on:, v-model(双向绑定), v-if(真则显示, 假则元素删除), v-show(真则显示, 假则隐藏)

• 使用 v-html 来实现输出 data 中 html 代码, {{html}} 将被转义

• 使用 v-bind: 来实现数据绑定, 可将各元素的 id 在 vue 实例中进行绑定, 统一管理, 可缩写为 :属性

• 使用 v-on: 来实现事件绑定, 在methods 进行实现, 可缩写为 @事件

模板语法 https://cn.vuejs.org/v2/api/index.html#template

• 认识Vue文件结构（template，script，style）
• 模板语法包含插值、指令（指令缩写）；

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值

<span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令。

Demo

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bg {
            color: red;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head>

<body>
    <div class="app">
        <div class="bg" v-blid:id="bg1">
            Hello World!!!
            {{msg}}
        </div>
        <div class="bg">
            {{msg}}
        </div>
        {{(count + 1) * 10 }}
        {{ count + 1 }}
        <div v-html="template">
        </div>
        <a v-bind:href="url">百度</a>
        <a :href="url">百度</a>
        <button type="button" v-on:click="submit()">加数字</button>
        <button type="button" @click="submit()">加数字</button>
    </div>
    <script>
        new Vue({
            el: '.app',
            data: {
                bg1:"app-blind",
                msg: 'Hello Vue!!!',
                count:0,
                template:'<div >Hello template</div>',
                url:'http://www.baidu.com'
            },
            methods: {
                submit:function(){
                    this.count ++
                }
            },
        })
    </script>
</body>

</html>

总结

• Vue文件结构;
• 插值语法{{msg}},数据、JS表达式;
• 指令(指令缩写) @click,v-if,:href

计算属性与侦听器

计算属性与监听器

• 监听器：https://cn.vuejs.org/v2/api/index.html#watch

• 计算属性：https://cn.vuejs.org/v2/api/index.html#computed

• 使用场景介绍

Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app">
  {{msg}}
  <p>
    {{msg1}}
  </p>
</div>
<script>
  var arr = 'new test'
  var app = new Vue({
    el: '#app',
    data: {
      msg: 'Hello Vue!',
      another: 'another Hello Vue!!'
    },
    watch: {
      msg: function (newval, oldval) {
        console.log('newval is:'+newval)
        console.log('oldval is:'+oldval)
      }
    },
    computed: {
      msg1: function () {
        return 'computed:' + this.msg + ',' + this.another + arr
      }
    }
  })
</script>
</body>
</html>

arr并不在data中，arr的值发生改变不会影响computed，只有data中的值发生改变的时候，computed才会重新计算，然后渲染页面，所有显示出来的arr

的值是在控制台中改变后的值。

举个最简单的例子，watch里面监听了data里面的单一变量的变化，而computed可以监听多个本vue实例里面data变量的变化。从我们的例子里面可以看出来！！

PS: 如果有一个全局，非vue实例里面的变量发生了变化，是不会触发computed计算属性的。watch只是监听一个对象或者一组对象，computed可以监听当前vue实例内的所有对象，当computed监听到Vue实例内变量有变化时会重新渲染括号里的所有变量，不管是局部变量还是全局变量。

1、watch：当监测的属性变化时会自动执行对应的回调函数

2、computed：计算的属性只有在它的相关依赖发生改变时才会重新求值

官方的例子也写的非常的清楚，https://cn.vuejs.org/v2/guide/computed.html

https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7-vs-%E4%BE%A6%E5%90%AC%E5%B1%9E%E6%80%A7

vue的computed计算属性，会监听自己所管理的data中的属性的变化，而在自己管理以外的变量的变化是不会去监听的。

参考 ：计算属性和侦听器

computed更适合Vue中的多个变量需要同时监听的场景

总结

计算属性：computed

侦听器：watch

使用场景介绍，watch(异步场景)，computed（数据联动）

条件渲染、列表渲染、Class与Style绑定

条件渲染

列表渲染

Class与Style绑定

常用指令

条件渲染 https://cn.vuejs.org/v2/guide/conditional.html

v-if

v-if 指令用于条件性地渲染一块内容。

v-else,v-else-if

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用

v-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

Demo

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <div v-if="count < 0">
            判断1：count大于0，count的值是：{{count}}
        </div>
        <div v-else-if="count < 0 && count > -5">
            判断2：count的值是：{{count}}
        </div>
        <div v-else>
            判断3：count的值是：{{count}}
        </div>
        <div v-show="count == -1">show:{{count}}</div>
        {{msg}}
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue!',
                count: 0
            }
        })
    </script>

</body>

</html>

Result

判断3：count的值是：0
Hello Vue!

列表渲染 https://cn.vuejs.org/v2/guide/list.html

v-for

v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

v-for与v-if结合使用

v-for高阶用法

Class与Style绑定 https://cn.vuejs.org/v2/guide/class-and-style.html

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head>

<body>
    <div id="app">
        {{msg}}
        <div v-for="item in list">
            <div v-show="item.age > 20" :class="['active','add','more',{'another': item.age < 30}]" :style="styleMsg">
                {{item.name}}
            </div>
        </div>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue!',
                styleMsg: {
                    color: 'red',
                    textShadow: '0 0 5px green'
                },
                list: [{
                    name: '小林',
                    age: 18
                }, {
                    name: '小蚂蚁',
                    age: 24
                }]
            }
        })
    </script>

</body>

</html>

Result

Hello Vue!
小蚂蚁

总结

模板语法

计算属性与侦听器

常用指令（列表、条件、class与样式绑定）

如何工程化呢

如何写出优雅的vue代码？

如何调试vue？