Vue入门到放弃Day2（上）——文档阅读笔记

最新推荐文章于 2024-04-18 14:41:10 发布

UndeFIned丶

最新推荐文章于 2024-04-18 14:41:10 发布

阅读量249

点赞数

分类专栏： Vue与Node学习文章标签： vue

Atuthor:Chen.orange

本文链接：https://blog.csdn.net/weixin_46313446/article/details/107320501

版权

Vue与Node学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Vue.js

1.创建实例

var vm = new Vue({
    // body
})

2. 数据与方法（小懵）

demo：

<body>
    <div id="app">
        {{ a }} {{ b }}
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        const data = {
            a: 1
        };
        const vm = new Vue({
            el: '#app',
            data: data
        });

        // wathc 方法：观察变量是否变化,记录变化后的 最新的值 和 之前的值
        vm.$watch('a', function(newVal, oldVal) {
            console.log(newVal);
            console.log(oldVal);
        });

        // 可以通过 $ 符号对 a 进行修改
        vm.$data.a = '被修改了';
    </script>
</body>

3.实例生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程 – 例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM···

同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

demo：

<body>
    <script>
        const vm = new Vue({
            data: {
                a: 1
            },
            created: function() {
                // 这里的this指向 vm 实例
                console.log('a is: ' + this.a)// "a is: 1"
            }
        })
    </script>
</body>

也有一些其他的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated和 destroyed。生命周期钩子的 this上下文指向调用它的实例。

注意：不要在 property 或回调上使用 箭头函数 。此时的 this 指向的是 window 或者是其它，导致报错。

4. 生命周期图示（慢慢理解）

模板语法

插值

文本

数据绑定最常见的形式就是使用Mustache 语法（双大括号{{ }}) 的文本插值：

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

带上 {{ }} 的标签将会被绑定，绑定的 msg 一旦变化，也会随着更新。

通过 v-once 指令，可以一次性插值，msg 第二次改变时，不会跟着改变。

<span v-once>这个不会改变： {{ msg }}</span>

原始HTML

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

<body>
    <div id="app">
        <p>1 {{ rawHtml }}</p>
        <p>2 is :<span v-html="rawHtml">this is span</span></p>
    </div>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                rawHtml: "hahah"
            }
        })
    </script>
</body>

注意：你的站点上动态渲染任意 HTML 可能会非常危险，任意导致 XSS 攻击，请对可信内容使用 HTML 插值，绝不要对用户提供的内容插值。

Attribute (不懂)

{{ }} 语法不能作用再 HTML attribute 上，遇到这种情况使用 v-bind 指令：

使用 Javscript 表达式

实际上，对于所有的数据绑定，Vue.js 都提供了完全的 js 表达式支持：

{{ message.split('').reverse().join('') }}

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

 <!-- 这是语句，不是表达式 --> 
{{ var a = 1 }} 
<!-- 流控制也不会生效，请使用三元表达式 --> 
{{ if (ok) { return message } }}

注：不应在模板表达式中试图访问用户定义的全局变量

指令

指令带有 v- 前缀的特殊属性。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式的作用于 DOM （v-for除外）：

<body>
    <div id="app">
        <div v-if='seen'>w w w a</div>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                seen: false
            }
        })
    </script>
</body>

v-if ：seen 的真/假来插入/移除 <p> 元素

参数

一些指令可以接收一个参数，如 v-bind:href ···可以用于响应式更新 html 属性：

v-on 指令用于监听 DOM 事件：

<body>
    <div id="app">
        <!-- <div v-if='seen'>w w w a</div> -->
        <!-- <a v-bind:href="url">点击就跳转</a> -->
        <button v-on:click="click1">点击触发</button>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',

            methods: {
                click1: function() {
                    console.log(1);
                }
            }
        })
    </script>
</body>

动态参数（2.6版本新增）(懵)

2.6开始，可以用方括号括起来的 JS 表达式作为一个指令的参数：

<a v-bind:[attributeName]="url"> ... </a>
<a v-on:[eventName]="doSomething"> ... </a>

对动态参数的值的约束

动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

对动态表达式的约束

如果 [ ]里的值在vue实例中没有，则会报错。

<!--
在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
除非在实例中有一个名为“someattr”的 property，否则代码不会工作。
-->
<a v-bind:[someAttr]="value"> ... </a>

修饰符

修饰符以半角句号 . 指明的特殊后缀，用于指出指令特殊方式绑定：

.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent='click1'>
    测试
</form>

缩写

v- 前缀作为一种视觉提示，我们会经常用到，因此 Vue为 v-bind 和 v-on 这两个最常用的命令提供特定简写：

v-bind:

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on:

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

计算属性和侦听器

计算属性

<body>
    <div id="example">
        <p>原来字符串: "{{ message }}"</p>
        <p>方法后字符串: "{{ reversedMessage }}"</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#example',
            data: {
                message: 'this is test...'
            },
            computed: {
                // 计算属性的 getter
                reversedMessage: function() {
                    // `this` 指向 vm 实例
                    return this.message.split('').reverse().join('')
                }
            }
        })
    </script>

</body>

这里有一个计算属性 reversedMessage

// 控制台输出
>  vm.reversedMessage
<· "...tset si siht"

计算属性 vs 侦听属性

watch ：观察和相应 vue 实例上的数据变动

<body>
    <div id="example">
        <p>{{ fullname }}</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#example',
            data: {
                firstName: 'Foo',
                lastName: 'Bar'
            },
            computed: {
                fullname: function() {
                    return this.firstName + ' ' + this.lastName
                }
            }
        })
    </script>

</body>

侦听器（懵）

watch

Class 与 Style 绑定

绑定 HTML Class

<div v-bind:class="{ active: isActive }">
    
</div>

这样就给 v-bind:class 了一个对象，以动态地切换 class：

<div class = 'test' v-bind:class="{ newClass1: isStare, newClass2: hasError }">
    
</div>
<script>
	const vm = new Vue({
        data :{
            isStare: true,
            hasError: false
	}
})
</script>

结果为：

<div class='test newClass1'>
    
</div>

当data里的布尔值变化时，div 加上/减少相应的类。

如果你也想根据条件切换列表中的 class，可以用三元表达式：

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

数组语法

v-bind:style 可以将多个样式对象应用到同一个元素上

自动添加前缀

v-bind:style 使用需要添加 浏览器引擎前缀 的 CSS property。

多重值

2.3 开始可以提供多个值的数组，常用于提供多个带前缀的值：

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

这样写只会渲染数组中最后一个被浏览器支持的值： display:flex

条件渲染

`v-if`

用于条件性的渲染一块内容。这块内容只有在指令的表达式返回 truthy 值的时候被渲染。

`v-else`

必须紧跟着 v-if 或者 v-else-if 后面，否则它不会识别

`v-else-if`

类似 v-else

    <div id="app">
        <div v-if='type === "A"'> 我是 A</div>
        <div v-else-if='type === "b"'> 我是 b</div>
        <div v-else-if='type === "c"'> 我是 c</div>
        <div v-else='type === ""'> 我是 空</div>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                type: 'c'
            }
        })
    </script>

`v-show`

注意：它不支持 <template> 标签，也不支持 v-else

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

列表渲染

用 `v-for` 把一个数组、对象对应为一组元素

<body>
    <div id="app">
        <ul>
            <!-- 这里的index 为每个列表的索引，唯一。 item为列表的值 -->
            <li v-for="item,index in items" :key="item.message">
                {{ item.message }} {{ index }}
            </li>
            <div v-for="(value, name, index) in object">
                {{ index }}. {{ name }}: {{ value }}
            </div>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                items: [{
                    message: 'foo'
                }, {
                    message: 'bar'
                }],
                object: {
                    title: 'top',
                    author: 'lll',
                    publishedAt: '2020-07'
                }
            }
        })
    </script>
</body>