<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue</title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
https://cn.vuejs.org/v2/guide/
一、Vue介紹
1.什麼是Vue?
a.Vue是一套用於構建用戶界面的漸進式框架;
b.需要了解關於 HTML、CSS 和 JavaScript 的知識;
2.如何使用Vue?
a.直接使用script引入;
3.聲明式渲染
1.使用模板語法來聲明式地將數據渲染;
2.綁定元素 attribute
2.1通過指令綁定元素的attribute;
v-bind:attribute
注意事項:
1.對應js不能放到head標籤裏面,因爲代碼從下網上執行,
頁面沒有加載完成就進行渲染,導致找不到DOM元素;
4.條件和循環
1.v-if
2.v-else
3.v-else-if
3.v-for
5.處理用戶輸入
5.1用 v-on 指令添加一個事件監聽器,
通過它調用在 Vue 實例中定義的方法;
5.2v-model指令,它能輕鬆實現表單輸入
和應用狀態之間的雙向綁定。
6.組件化應用構建
6.1在 Vue 裏,一個組件本質上是一個擁有預定義選項的
一個 Vue 實例;
二、Vue實例
1.創建Vue實例
a.選項:
1.data
1.)類型:Object|Function
2.)限制:組件的定義只接受 function
2.el
1.)類型:string | Element
2.)限制:只在用 new 創建實例時生效
3.methods:
1.)類型:{ [key: string]: Function }
var vm = new Vue({選項});
三、模板語法
1.插值
a.文本
1.)使用“Mustache”語法 (雙大括號) 的文本插值
<div id="app">{{returnResult.name}}</div>
注意事項:
a. Mustache 標籤將會被替代爲對應數據對象上 msg 屬性的值。
無論何時,綁定的數據對象上 msg 屬性發生了改變,
插值處的內容都會更新。
b.通過使用 v-once 指令,你也能執行一次性地插值,
當數據改變時,插值處的內容不會更新。
但請留心這會影響到該節點上的其它數據綁定;
<span v-once>這個將不會改變: {{ msg }}</span>
b.原始的html
v-html
3.發送Ajax請求
https://www.cnblogs.com/EricZLin/p/9380406.html
</body>
</html>