Vue.js学习
<!DOCTYPE html>
<html>
<head><title>xxx</title>
</head>
<body>
<div id="app">{{ message }}
</div><div id="app-2"><span v-bind:title="message">鼠標懸停幾秒鐘查看此處動態綁定的提示信息！</span>
</div><div id="app-3"><p v-if="seen">現在你看到我了</p>
</div><div id="app-4"><ol><li v-for="todo in todos">{{ todo.text }}</li></ol>
</div><div id="app-5"><p>{{ message }}</p><button v-on:click="reverseMessage">逆轉消息</button>
</div><div id="app-6"><p>{{ message }}</p><input v-model="message">
</div><div id="app-7"><ol><!--現在我們為每個 todo-item 提供 todo 對象todo 對象是變量，即其內容可以是動態的。我們也需要為每個組件提供一個“key”，稍后再作詳細解釋。--><todo-itemv-for="item in groceryList"v-bind:todo="item"v-bind:key="item.id"></todo-item></ol>
</div><div id="watch-example"><p>Ask a yes/no question:<input v-model="question"></p><p>{{ answer }}</p>
</div><script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 因為 AJAX 庫和通用工具的生態已經相當豐富，Vue 核心代碼沒有重復 -->
<!-- 提供這些功能以保持精簡。這也可以讓你自由選擇自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script type="text/javascript">var app = new Vue({el: '#app',data: {message: 'Hello Vue!'}
})var app2 = new Vue({el: '#app-2',data: {message: '頁面加載于 ' + new Date().toLocaleString()}
})var app3 = new Vue({el: '#app-3',data: {seen: true}
})var app4 = new Vue({el: '#app-4',data: {todos: [{ text: '學習 JavaScript' },{ text: '學習 Vue' },{ text: '整個牛項目' }]}
})var app5 = new Vue({el: '#app-5',data: {message: 'Hello Vue.js!'},methods: {reverseMessage: function () {this.message = this.message.split('').reverse().join('')}}
})var app6 = new Vue({el: '#app-6',data: {message: 'Hello Vue!'}
})Vue.component('todo-item', {props: ['todo'],template: '<li>{{ todo.text }}</li>'
})var app7 = new Vue({el: '#app-7',data: {groceryList: [{ id: 0, text: '蔬菜' },{ id: 1, text: '奶酪' },{ id: 2, text: '隨便其它什么人吃的東西' }]}
})var watchExampleVM = new Vue({el: '#watch-example',data: {question: '',answer: '你問問題我才會給你答案!'},watch: {// 如果 `question` 發生改變，這個函數就會運行
question: function (newQuestion, oldQuestion) {this.answer = '等你停止輸入...'this.getAnswer()}},methods: {// `_.debounce` 是一個通過 Lodash 限制操作頻率的函數。// 在這個例子中，我們希望限制訪問 yesno.wtf/api 的頻率// AJAX 請求直到用戶輸入完畢才會發出。想要了解更多關于// `_.debounce` 函數 (及其近親 `_.throttle`) 的知識，// 請參考：https://lodash.com/docs#debounce
getAnswer: _.debounce(function () {if (this.question.indexOf('?') === -1) {this.answer = '問題通常需要一個問號. ;-)'return}this.answer = '思考中...'var vm = thisaxios.get('https://yesno.wtf/api').then(function (response) {vm.answer = _.capitalize(response.data.answer)}).catch(function (error) {vm.answer = '錯誤! 不能連接到API. ' + error})},// 這是我們為判定用戶停止輸入等待的毫秒數500)}
})
</script>
</body>
</html>
?
?
轉載于:https://www.cnblogs.com/Erick-L/p/8446629.html
總結
- 上一篇： css—盒子模型理解
- 下一篇： Unity C#基础之 反射反射，程序员