Vue基础使用

一、前期准备工作

1、指令自动提示

指令自动提示
添加如下指令

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n9" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;">v-text
v-html
v-once
v-if
v-show
v-else
v-for
v-on
v-bind
v-model
v-ref
v-el
v-pre
v-cloak
v-on:click
v-on:keyup.enter
v-on:keyup
@click
@change
number
debounce
transition
:is</pre>

2、消除未知指令的错误

使用 alt + 回车
在工具总设置

image

3、chrome游览器的调试插件

直接从谷歌市场

搜索 vue-devtools 然后添加插件(注意自备梯子)
从本地安装

二、基础使用

1、引入Vue

1.1、直接引入Vue

独立安装

Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入

开发版

生产环境
使用 CDN 方法推荐使用官方

最新版本

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n36" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;"><script src="https://cdn.jsdelivr.net/npm/vue"></script></pre>

指定版本的

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n38" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;"><script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script></pre>

1.2、命令行工具搭建脚手架

入门时不推荐使用具体查看单独的教程

2、引入Vue

2、基础实例

html

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n48" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{title}}</h1>
<p>姓名: {{ name }}</p>
<p>年龄: {{ age }}</p>
<p>方法使用: {{test()}}</p>
</div>
</body>
</html></pre>
js代码

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" cid="n51" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;"><script>
let app = new Vue({
//作用的元素
el: "#app",
//数据绑定区
data: {
title: "Vue案例",
name: "Vue",
age: 15,
},
// 用于存储各种方法
methods: {
test: function () {
return "我劝你善良!!!"
}
}
});
</script></pre>
显示效果

image