[TOC]
### 首先我們在我們頭部引入我們的鏈接下面有兩個版本供我們選擇
~~~
<!-- 開發環境版本,包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
~~~
~~~
<!-- 生產環境版本,優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
~~~
Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統
```
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>{{ message }}</ul>
</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
</html>
//vue.js
var app = new Vue({
el:'#app',
data:{
message:'hellow'
}
})
```
我們可以在控制臺上調試一下代碼

可以看見我們的內容馬上就渲染到了頁面上去
### `v-if`屬性 類似于JavaScript的if判斷
```
<div id="app">
<ul v-if = 'seen'>{{ message }}</ul>
</div>
var app = new Vue({
el:'#app',
data:{
message:'hellow'
seen : true // true 為可視 false 為不可視
}
})
```
### `v-for` 屬性類似與JavaScript的for循環
```
<div id="app">
<ul>
<li v-for='todo in todos'>{{todo.text}}</li>
</ul>
</div>
var app = new Vue({
el:'#app',
data:{
todos:[
{ text: 'name' }
{ text: 'number' }
]
}
})
//渲染效果
1. name
2. number
```
### `v-on:click` 類似與給標簽綁定了點擊事件`on`和jquery的綁定相像
```
<div id="app" >
<p>{{message}}</p>
<button v-on:click='reverse'>點我</button>
</div>
var app = new Vue({
el:'#app',
data:{
message: "hellow bb!"
},
methods: {
reverse:function(){
this.message = this.message.split('').reverse().join('');
}
}
})
```
### `v-model` 可以指向使用在input中傳入輸入數據
此處的`v-model`直接指向p標簽的message所以會同步修改內容
```
<div id="app" >
<p>{{message}}</p>
<input v-model='message'>
</div>
var app = new Vue({
el:'#app',
data:{
message:'hellow'
}
})
```
### `component` 組件
組件是可復用的 Vue 實例,且帶有一個名字:在這個例子中是`<button-counter>`。我們可以在一個通過`new Vue`創建的 Vue 根實例中,把這個組件作為自定義元素來使用:
```
<div id="app" >
<ul>
<todo-item></todo-item>
</ul>
</div>
??Vue注意大寫
Vue.component('todo-item', {
template: '<li>This is a todo</li>'
})
var app = new Vue({
el: '#app'
})
```
### 注冊組件及構建模版
```
// 定義名為 todo-item 的新組件
Vue.component('todo-item', {
template: '<li>這是個待辦項</li>'
})
//組件模版<todo-item></todo-item>
```
### `v-bind`綁定元素特性`props`類似于一個自定義特性
```
<div id="app" >
<ol>
<todo-item
v-for='item in groceryList'
v-bind:todo = 'item'
v-bind:key = 'item.id'
></todo-item>
</ol>
<div v-for='item in groceryList'>{{item}}</div>
</div>
Vue.component('todo-item', {
props:['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app = new Vue({
el: '#app',
data:{
groceryList:[
{ id: 0 , text: 'you'},
{ id: 1 , text: 'me'},
{ id: 2 , text: 'he'},
{ id: 3 , text: 'she'}
]
}
})
```
這里我們遇到了一點新東西。你看到的`v-bind`特性被稱為**指令**。指令帶有前綴`v-`,以表示它們是 Vue 提供的特殊特性。可能你已經猜到了,它們會在渲染的 DOM 上應用特殊的響應式行為。在這里,該指令的意思是:“將這個元素節點的`title`特性和 Vue 實例的`message`屬性保持一致”。
- 前言
- 你真的懂This嗎?
- 對象和對象構造函數
- 工廠功能和模塊模式
- API的使用
- async and await
- 關于async的很棒的一篇文章
- 掘金:關于forEach,map,fiter循環操作
- Node.js 實例與基礎
- 原創: Express 學習使用筆記
- 零碎知識點方法
- 關于滾動吸頂的方法
- Vue學習筆記
- Vue向導
- vuex是啥?
- vue代碼風格指南
- 關于vue的初體驗
- 超詳細解毒Vue
- Vue實例
- 模版語言
- 組件基礎
- 條件渲染、列表渲染、Class與style綁定
- Todolist的制作超詳細
- vue-router
- Vue基礎2.0x 筆記
- 搭建vuepress
- JavaScript之ES6
- 箭頭函數
- 這就是This