vue2.x笔记1

最新推荐文章于 2024-07-26 15:01:08 发布

notChange

最新推荐文章于 2024-07-26 15:01:08 发布

阅读量526

点赞数

分类专栏： vue 文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/notChange/article/details/122088577

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Vue中的MVVM

View层
- 视图层
- 在我们前端开发中，通常就是DOM层
- 主要的作用是给用户展示各种信息
Model层
- 数据层
- 数据可能是固定的死数据，更多的是从服务器请求下来的数据
VueModel层
- 视图模型层
- 是View和Model沟通的桥梁
- 一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时反应到View中
- 另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件（点击、滚动、touch等）时，可以监听到，并在需要的情况下改变对应的Data

插值的操作

Mustache语法

Mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式

<div id="app">
  <h2>{{msg}}, 周末</h2>
  <h2>{{firstName + ' ' + lastName}}</h2>
  <h2>{{firstName}} {{lastName}}</h2>
  <h2>{{counter * 2}}</h2>
</div>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      msg: '你好',
      firstName: 'kobe',
      lastName: 'bryant',
      counter: 100
    }
  })
</script>

v-once指令

在某些情况下，我们可能不希望界面随意的跟随改变，可以使用v-once指令，该指令只渲染一次，不会随着数据的改变而改变

<h2 v-once>{{msg}}</h2>

v-html指令

某些情况，我们从服务器请求到的是一段html代码，并且希望按照html格式进行解析，显示对应的内容，可以使用v-html指令

<div id="app">
    <h2>{{url}}</h2>
    <h2 v-html="url"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            msg: '你好',
            url: '<a href="https://www.baidu.com/">百度一下</a>'
        }
    })
</script>

v-text指令

v-text会直接覆盖原有的值，显示结果：你好

<h2 v-text="msg">, 小明</h2>

v-pre指令

将内容原封不动的显示出来，显示结果：{{msg}}

<h2 v-pre>{{msg}}</h2>

v-cloak指令

在某些情况下，浏览器可能会直接显示出未编译的Mustache标签，可以利用v-cloak指令，在未渲染完成之前不显示

<style>
    [v-cloak] {
        display: none;
    }
</style>

<div id="app" v-cloak>
    <h2>{{msg}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    // 在vue解析之前，div中有一个属性 v-cloak
    // 在vue解析之后，div中没有一个属性 v-cloak
    setTimeout(function() {
        let app = new Vue({
            el: '#app',
            data: {
                msg: '你好',
            }
        })
    }, 1000);
</script>

动态绑定属性 v-bind

v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值

<img v-bind:src="imgUrl" alt="">
<a v-bind:href="aHref">百度一下</a>

v-bind有一个对应的语法糖，也就是简写方式

<img :src="imgUrl" alt="">
<a :href="aHref">百度一下</a>

v-bind绑定class

对象语法

对象语法的含义是:class后面跟着的是一个对象

<!-- 用法一：直接通过{}绑定一个类 -->
<h2 :class="{'active': isActive}">Hello World</h2>

<!-- 用法二：也可以通过判断，传入多个值 -->
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>

<!-- 用法三：和普通的类同时存在，并不冲突
注：如果isActive和isLine都为true，那么会有title/active/line三个类 -->
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>

<!-- 用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性 -->
<h2 class="title" :class="classes">Hello World</h2>

数组语法

数组语法的含义是:class后面跟着的是一个数组

<div id="app">
    <!-- 类名直接绑定 -->
    <h2 :class="['active', 'line']">{{msg}}</h2>
    <!-- 变量方式绑定 -->
    <h2 :class="[active, line]">{{msg}}</h2>
    <!-- methods方式绑定 -->
    <h2 :class="getClasses()">{{msg}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            msg: '你好',
            active: 'ad',
            line: 'cb'
        },
        methods: {
            getClasses: function() {
                return [this.active, this.line]
            }
        },
    })
</script>

v-bind绑定style

对象语法

<!-- size当成一个变量使用 -->
<h2 :style="{fontSize: size + 'px'}">{{msg}}</h2>
<!-- 多个值绑定 -->
<h2 :style="{fontSize: size + 'px', color: finalColor}">{{msg}}</h2>
<!-- methods方式绑定 -->
<h2 :style="getStyles()">{{msg}}</h2>

数组语法

<div id="app">
    <h2 :style="[baseStyle, fontStyle]">{{msg}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            msg: '你好',
            baseStyle: {
                backgroundColor: 'red',
                border: '1px solid #000'
            },
            fontStyle: {
                fontSize: '50px'
            }
        }
    })
</script>