• <tt id="4ayss"><strong id="4ayss"></strong></tt>
  • <xmp id="4ayss"><menu id="4ayss"></menu><nav id="4ayss"><strong id="4ayss"></strong></nav>
    <nav id="4ayss"><strong id="4ayss"></strong></nav>
  • <nav id="4ayss"></nav>

    卓象程序員 | 哈爾濱IT培訓 | 品質教育,口碑傳承 | 為做出口口相傳,好口碑的教育品牌而奮斗!

    卓象程序員讓每一位學員高薪就業 聯系我們13101507057

    加微信,了解詳情
    您所在的位置:首頁 > 文章 >Vue.js

    「Vue.js開發連載二」Vue.js定義
    時間: 2018-11-09 10:26:07     來源: 卓象IT實訓基地【原創】

    上一篇文章講解“Vue.js的簡介”,本篇文章講解“Vue.js定義”。


    開發工具

    1. 在線代碼預覽平臺

    「Vue.js開發連載二」Vue.js定義


    2. 編輯器——vscode

    微**軟出品的編輯器, 通過vetur插件可以支持vue的語法提示和語法校驗, 他也vue官網推薦的插件, 由于從2.5版本vue已經開始親ts語法, ts又是微軟的開發語言, 所以未來vscode一定是寫 vue體驗最好的編輯器, 建議大家從現在開始就用vscode來寫前端代碼。


    每個Vue應用都是通過Vue函數創建一個新的Vue實例開始的:

    「Vue.js開發連載二」Vue.js定義


    Vue實例中的參數:el、data、methods。


    1. el

    綁定某個元素,只操作元素中的內容。

    【例】新建一個div標簽,并用el進行綁定。

    ①HTML內容

    「Vue.js開發連載二」Vue.js定義


    ②Vue內容

    「Vue.js開發連載二」Vue.js定義


    以上即是對html中id=app的標簽進行綁定。

    注意:

    1. 在Vue.js中,所綁定的標簽id的值,一般均為app,因此為了統一,我們都把id設置為app。

    2. el:'#app'中,#app遵循的規則為css選擇器規則。

    3. 如果使用JSRUN在線編輯器,需要選擇Vue的版本;如果使用vscode編輯器,要引入vue文件,引入開發版本(遇到錯誤會給出警告)。


    2. data

    我們在開發中定義的變量,需要統一在data上定義,這樣代碼中我們可以直接通過this.xxx來獲取數據。data為對象,要使用對象的形式定義。對象必須是純粹的對象(含有零個或多個的key/value對)。

    【例】data對象中定義數據,并在html中展示輸出。

    ①vue對象

    「Vue.js開發連載二」Vue.js定義


    ②html內容

    「Vue.js開發連載二」Vue.js定義


    注意:

    1. " {{}} "是vue模板插值的邊界符,通過他把變量插入模板中。

    2. 當然vue做的不僅僅是一個模板引擎,更重要的是插入的數據是響應的。

    ③瀏覽器訪問

    「Vue.js開發連載二」Vue.js定義



    3. methods

    methods里可以定義一些方法,方法可在vue實例中訪問,或者在指令中調用。定義方法可以通過在元素上加v-on:event="xxx"來觸發,這里的"v-on"代表要對所在綁定事件,":"后面是事件名稱,比如"click/touchstart等等","="后面的就是我們定義的方法名。

    【例】創建一個方法,點擊按鈕時將“hello word”變為“hello china”。

    ①html內容

    「Vue.js開發連載二」Vue.js定義


    注意:

    1. v-on:click="changeText"即通過v-on指令在button標簽上綁定一個click事件,調用的方法為changeText。

    2. v-on指令會在后續講解。

    ②vue內容

    「Vue.js開發連載二」Vue.js定義


    注意:

    1. this.text = 'hello china';中this指向vue實例,使用this.text獲取data數據對象中的text變量內容。

    ③瀏覽器訪問

    「Vue.js開發連載二」Vue.js定義


    點擊“改變”按鈕。

    「Vue.js開發連載二」Vue.js定義



    4. 操作數據注意事項

    變量在操作前必須在data上定義。

    我們想要vue響應我們的數據操作,那么就必須提前在data上定義變量,讓他提前幫我們做好數據的響應準備。

    【例】不定義數據,對數據操作

    「Vue.js開發連載二」Vue.js定義


    沒有定義num,但在setNum方法中進行了操作。

    「Vue.js開發連載二」Vue.js定義


    由于num未定義,所以vue并沒有對num進行監聽,所以也就沒有dom的變化,盡管你的數據已經改變了。

    正確方法:

    「Vue.js開發連載二」Vue.js定義



    5. $set

    有些時候,如果某些字段在初始化vue的時候不確定,沒辦法在data上定義,那么我們就需要借助$set()方法來對數據的自動響應進行顯示聲明,也就是告訴vue,我有一個新字段需要你進行響應。

    「Vue.js開發連載二」Vue.js定義


    注意

    1. 新自定義數據只能向已定義的數據對象中插入。

    2. undefined未定義的。

    3. v-if指令后續會學習,判斷作用。

    Vue.js連載為卓象程序員原創,轉載請聯系卓象程序員

    「Vue.js開發連載二」Vue.js定義


    關注卓象程序員,定期發布技術文章

    下一篇講解“vue.js指定 - v-text+v-bind”

    「Vue.js開發連載二」Vue.js定義
    热99re久久精品|天天综合网久久综合免费人成|91久久久久久久精品青草| 亚洲AV无码无一区二区Ⅰ久久|
  • <tt id="4ayss"><strong id="4ayss"></strong></tt>
  • <xmp id="4ayss"><menu id="4ayss"></menu><nav id="4ayss"><strong id="4ayss"></strong></nav>
    <nav id="4ayss"><strong id="4ayss"></strong></nav>
  • <nav id="4ayss"></nav>