vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍
生活随笔
收集整理的這篇文章主要介紹了
vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
這是我的vue.js 2.0的學(xué)習(xí)筆記，采取了將官方文檔中的代碼集中到一個(gè)文件的形式。目的是保存下來(lái)，方便自己查閱。
!官方文檔：https://cn.vuejs.org/v2/guide/
01. vue 介紹
<html> <head><meta charset="utf-8"/><title>vue 介紹</title><!-- <script src="js/vue.min.js"></script> --><script src="https://unpkg.com/vue"></script> </head> <body><!-- 官方文檔：https://cn.vuejs.org/v2/guide/ --><!-- 綁定 --><div id="app"><!-- ①聲明式渲染 --><p>{{ info }}</p><p v-text="info"></p><p v-html="info"></p><p v-once>{{ info }}</p><p>{{ info }}</p><p>{{ info.concat("!!!") }}</p><p>{{ info ? "has info" : "no info" }}</p><!-- <p>{{ var info2 = "info2" }}</p> --><!-- <p>{{ if (info) {return "info2"} }}</p> --><!-- ②綁定元素特性 --><span v-bind:title="message">鼠標(biāo)懸停幾秒鐘查看此處動(dòng)態(tài)綁定的提示信息！</span><!-- ③條件：控制切換一個(gè)元素是否顯示 --><p v-if="seen">現(xiàn)在你看到我了</p><!-- ④循環(huán)：綁定數(shù)組的數(shù)據(jù)來(lái)渲染一個(gè)項(xiàng)目列表 --><ol><li v-for="todo in todos">{{ todo.text }}</li></ol><!-- ⑤處理用戶(hù)輸入 --><button v-on:click="reverseMessage">逆轉(zhuǎn)消息</button></br><!-- ⑥表單輸入和應(yīng)用狀態(tài)之間的雙向綁定 --><input v-model="info"><!-- ⑦使用組件 --><ol><todo-itemv-for="item in groceryList"v-bind:todo="item"v-bind:key="item.id"></todo-item></ol><!-- ①②③④⑤⑥⑦⑧⑨⑩ --></div><!-- 數(shù)據(jù) --><script>var data = {info : "Hello world", // ①⑥message: '頁(yè)面加載于 ' + new Date().toLocaleString(), // ②seen: true, // ③todos: [ // ④{ text: '學(xué)習(xí) JavaScript' },{ text: '學(xué)習(xí) Vue' },{ text: '整個(gè)牛項(xiàng)目' }],groceryList: [ // ⑦{ id: 0, text: '蔬菜' },{ id: 1, text: '奶酪' },{ id: 2, text: '隨便其它什么人吃的東西' }]}// 注冊(cè)組件（全局）// ⑦Vue.component('todo-item', {props: ['todo'],template: '<li>{{ todo.text }}</li>'})// 創(chuàng)建根實(shí)例var vm = new Vue({el: '#app',data: data,methods: {reverseMessage: function () { // ⑤this.message = this.message.split('').reverse().join('')}}})</script></body> </html>總結(jié)
以上是生活随笔為你收集整理的vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： iOS对象关联
- 下一篇： vue2.0-axios is defi