一、前期準(zhǔn)備工作
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 + 回車
-
在工具總設(shè)置
image
3、chrome游覽器的調(diào)試插件
-
直接從谷歌市場
搜索 vue-devtools 然后添加插件(注意自備梯子)
從本地安裝
二、基礎(chǔ)使用
1、引入Vue
1.1、直接引入Vue
-
獨立安裝
Vue.js 的官網(wǎng)上直接下載 vue.min.js 并用
<script>標(biāo)簽引入 -
使用 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、基礎(chǔ)實例
-
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",
//數(shù)據(jù)綁定區(qū)
data: {
title: "Vue案例",
name: "Vue",
age: 15,
},
// 用于存儲各種方法
methods: {
test: function () {
return "我勸你善良!!!"
}
}
});
</script></pre> -
顯示效果
image
