官方中文文檔;
- 安裝： 安裝方式有3種
- 對于制作原型或?qū)W習(xí)戒傻，你可以這樣使用最新版本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue導(dǎo)入方式1</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div class="box" id = "app">
{{msg}}
</div>
<script>
// vm實例，會控制id 為app元素中的所有內(nèi)容
// vue 的實例就是MMVM中的VM控制器
let vm = new Vue({
// 需要控制的位置
el:'#app',
// 代碼數(shù)據(jù)肃廓，mvvM中的M
data:{
msg:'Hello Vue學(xué)習(xí)頁面1'
}
})
</script>
<style>
#app{
margin: 50px auto;
background: red;
width: 200px;
height: 30px;
}
</style>
</body>
</html>
- 下載導(dǎo)入
-
點擊下載
image.png
-
- NPM通過命令行安裝(vue_cli腳手架)
> npm install vue
國內(nèi)建議使用淘寶源cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install vue
指令
指令帶有前綴 v-矮瘟，以表示它們是 Vue 提供的特殊特性
- v-bind : 綁定元素
<span v-bind:title="message">ahhshs</span>
- v-if : if判斷
<div id="app3" class="box">
<p v-if='seen'>看見信息</p>
</div>
<script>
let vm = new Vue({
el:'app3',
data:{
seen:'true',
}
}
</script>
- v-for : 循環(huán)
<ul v-for= 'i in todos' >
<li>{{i.text}}</li>
<script>
let vm = new Vue({
el:'#app3',
data:{
seen:'true',
todos:[
{text:'111'},
{text:'111'},
{text:'111'},
]
}
</script>
- v-on ： 事件監(jiān)聽器
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反轉(zhuǎn)消息</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
V-monde:雙向綁定
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
