2020-12-16 Vue的入门学习1

最新推荐文章于 2024-08-22 16:04:37 发布

hubertbb3

最新推荐文章于 2024-08-22 16:04:37 发布

阅读量57

点赞数

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

原文链接：https://cn.vuejs.org/v2/guide/syntax.html

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js的两种安装方式：通过CDN和使用npm。讲解了如何创建Vue实例，展示了Vue的生命周期和指令系统，包括v-if、v-bind和v-on等。此外，还提到了指令的缩写形式，帮助开发者更高效地编写Vue代码。

摘要由CSDN通过智能技术生成

1 vue的入门

安装方式
1.直接用 <script> 引入

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

通过cdn提供的地址可以直接从网上获取vue.js文件，会在网页加载时自动被加载，前提是必须要有网络支持。
2.npm安装
在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

# 最新稳定版
$ npm install vue

使用方式
创建一个vue实例

<body>
<div id="app">
    {{msg}}  //插值表达式,可以获取data属性中定义的变量值，将其渲染到浏览器上
</div>
<script>
    var app = new Vue({
        el: "#app",  //id选择器
        data: {
            msg: "hello vue" //信息
        }
    })
</script>
</body>

VUE的生命周期
生命周期图

VUE中的指令
指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

<p v-if="seen">现在你看到我了</p>

这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML attribute：

<a v-bind:href="url">...</a>

在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。

另一个例子是 v-on 指令，它用于监听 DOM 事件：

<a v-on:click="doSomething">...</a>

在这里参数是监听的事件名。我们也会更详细地讨论事件处理。

缩写
以v-作为前缀的属性可以缩写
如：
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>