當前位置：首頁 > 前端技术 > vue >内容正文

vue

vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍

發布時間：2025/3/8 vue 16 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

這是我的vue.js 2.0的學習筆記，采取了將官方文檔中的代碼集中到一個文件的形式。目的是保存下來，方便自己查閱。

!官方文檔：https://cn.vuejs.org/v2/guide/

01. vue 介紹

<html> <head><meta charset="utf-8"/><title>vue 介紹</title><script src="https://unpkg.com/vue"></script> </head> <body><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><span v-bind:title="message">鼠標懸停幾秒鐘查看此處動態綁定的提示信息！</span><p v-if="seen">現在你看到我了</p><ol><li v-for="todo in todos">{{ todo.text }}</li></ol><button v-on:click="reverseMessage">逆轉消息</button></br><input v-model="info"><ol><todo-itemv-for="item in groceryList"v-bind:todo="item"v-bind:key="item.id"></todo-item></ol></div><script>var data = {info : "Hello world", // ①⑥message: '頁面加載于 ' + new Date().toLocaleString(), // ②seen: true, // ③todos: [ // ④{ text: '學習 JavaScript' },{ text: '學習 Vue' },{ text: '整個牛項目' }],groceryList: [ // ⑦{ id: 0, text: '蔬菜' },{ id: 1, text: '奶酪' },{ id: 2, text: '隨便其它什么人吃的東西' }]}// 注冊組件（全局）// ⑦Vue.component('todo-item', {props: ['todo'],template: '<li>{{ todo.text }}</li>'})// 創建根實例var vm = new Vue({el: '#app',data: data,methods: {reverseMessage: function () { // ⑤this.message = this.message.split('').reverse().join('')}}})</script></body> </html>

總結

以上是生活随笔為你收集整理的vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。