《Vue.js項目實戰(zhàn)》第一章

lykops 發(fā)布于2019-08-02 14:06 / 3051人閱讀

摘要：前言今天剛到了一本書項目實戰(zhàn)為了提高自己的技術(shù)水平，想要有空就把書上的內(nèi)容看一遍，再親自寫一遍，順便寫個文章作為自己的學習記錄。是給該實例起一個名字，未來可能會有多個實例，便于區(qū)分。是元素的選擇器，表示該實例會在這個元素上進行的操作。

前言

今天剛到了一本書《Vue.js項目實戰(zhàn)》,為了提高自己的技術(shù)水平，想要有空就把書上的內(nèi)容看一遍，再親自寫一遍，順便寫個文章作為自己的學習記錄。

第一個vue應用
vue.js的下載地址：vue官網(wǎng)下載

新建一個html，創(chuàng)建一個vue應用




    
    Title
    
    



    Is this an hello world?

強烈推薦大家安裝vue.js devtools插件，調(diào)試代碼非常有幫助。

創(chuàng)建vue實例

// 創(chuàng)建vue實例
    let vm = new Vue({
      // 給實例起名字
      name: "myApp",
      // 根DOM元素的CSS選擇器
      el: "#root",
      data() {
        return {
          message: "Hello Vue.js"
        }
      }
    })

new 調(diào)用了vue的構(gòu)造器創(chuàng)建了一個實例，構(gòu)造器中有一個參數(shù)——option對象。該對象可以攜帶多個屬性。name是給該實例起一個名字，未來可能會有多個實例，便于區(qū)分。el是元素的選擇器，表示該實例會在這個元素上進行vue的操作。data是保存當前的數(shù)據(jù)

v-model的使用




    
    Title
    
    


    
        {{message}}

vue的{{}}可以運行javascript表達式，并且最后顯示結(jié)果
效果如下圖：

可以看到p標簽的內(nèi)容隨著input的值的變化而變化
調(diào)試工具也能清楚地看到message值的變化

第一章結(jié)束。

GPU云服務器云服務器云計算第一章項目實戰(zhàn) python實戰(zhàn)項目 python項目實戰(zhàn)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/53573.html

相關(guān)文章

webpack+vue項目實戰(zhàn)（一,搭建運行環(huán)境和相關(guān)配置）

摘要：運行環(huán)境是，其它版本的小小伙伴要注意版本兼容的問題喔好了，首頁在創(chuàng)建項目目錄，下面進行項目的第一步，搭建環(huán)境。附上代碼附上代碼路由控制和接下來就配置入口文件，和入口文件的模板了。 1.前言現(xiàn)在正在開發(fā)一個公司的后臺管理項目，項目是一個單頁面應用。功能上就是管理銷售訂單的各個環(huán)節(jié)，包括物流管理，回款管理，訂單管理等等的功能。這些就不多說了。項目是，基于webpack3,vue2.2.6...

jemygraw 2019-08-20 17:44 評論0 收藏0
2017-10-17 前端日報

摘要：前端日報精選現(xiàn)代瀏覽器性能優(yōu)化篇談談算法第一章學習筆記實現(xiàn)里為什么會有，我們做了一款極客時間中文第期浮點數(shù)陷阱及解法譯調(diào)度器入門掘金譯定位掘金布局說可能是最全的特性及其在實際應用中的表現(xiàn)掘金簡單的繼承眾成翻譯中的正則表達 2017-10-17 前端日報精選現(xiàn)代瀏覽器性能優(yōu)化-JS篇談談 HTTPS《算法》第一章學習筆記js實現(xiàn)JS 里為什么會有 thisHi，我們做了一款極客時間...

CloudwiseAPM 2019-08-21 17:04 評論0 收藏0
《Java8實戰(zhàn)》-讀書筆記第一章（01）

摘要：依舊使用剛剛對蘋果排序的代碼?，F(xiàn)在，要做的是篩選出所有的綠蘋果，也許你會這一個這樣的方法在之前，基本上都是這樣寫的，看起來也沒什么毛病。但是，現(xiàn)在又要篩選一下重量超過克的蘋果。《Java8實戰(zhàn)》-讀書筆記第一章（01）最近一直想寫點什么東西，卻不知該怎么寫，所以就寫寫關(guān)于看《Java8實戰(zhàn)》的筆記吧。第一章內(nèi)容較多，因此打算分幾篇文章來寫。為什么要關(guān)心Java8 自1996年J...

codeGoogle 2019-08-19 10:52 評論0 收藏0
【Vue.js 牛刀小試】：第十二章 - 使用 Vue Router 實現(xiàn) Vue 中的前端路由控制

摘要：而路由則是使用了中新增的事件和事件。總結(jié)這一章主要是介紹了如何使用在中構(gòu)建我們的前端路由。系列目錄地址一、基礎知識概覽第一章 - 一些基礎概念（posted at 2018-10-31）第二章 - 常見的指令的使用（posted at 2018-11-01）第三章 - 事件修飾符的使用（posted at 2018-11-02）第四章 - 頁面元素樣式的設定（posted a...

cpupro 2019-05-22 19:26 評論0 收藏0
學習不一樣的vue實戰(zhàn)(1): 環(huán)境搭建

摘要：淘寶鏡像是一個完整鏡像，你可以用此代替官方版本只讀，同步頻率目前為分鐘一次以保證盡量與官方服務同步。全功能的，包括熱加載，靜態(tài)檢測，單元測試一個簡易的，以便于快速開始。 showImg(https://segmentfault.com/img/bVOBkJ?w=900&h=500); 首先首發(fā)博客: 我的博客項目源碼: 源碼項目預覽: 預覽因為個人的喜好和工作的需要,一直...

BoYang 2019-08-29 12:41 評論0 收藏0