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
