vue基礎學習

vue.js基礎知識學習

vue.js起步

每個vue應用都需要通過例項化vue來實現。

語法格式如下：

var vm = new vue(,

methods:{}

data 用於定義屬性

methods 用於定義的函式

}用於輸出物件屬性的函式返回值,及資料繫結

指令是帶有v-字首的特殊屬性。

例如：v-if v-bind v-on

引數在指令後以冒號指明

例如：

html屬性中值應使用v-bind指令。

例如：以下例項判斷use的值，如果為true使用class1類的養生，否則不使用該類

//v-bind:class指令

修飾符是以半形句號.指明的特殊字尾，用於指出乙個指令應該以特殊方式繫結

使用者輸入

在input輸入框中我們可以使用v-model指令來實現雙向資料繫結

v-model指令用來在input，select，textarea，checkbox，radio等表單控制項元素上建立雙向資料繫結，根據表單上的值，自動更新繫結的元素的值。

修飾符.lazyv-model在input事件中同步輸入框的值與資料，加修飾符lazy，從而轉變為change事件中同步

例如：.number如果想自動將使用者輸入值轉變為number型別，可以新增修飾符number

例如：.trim 如果要自動過濾使用者輸入的首尾空格，可以使用修飾符trim

例如：縮寫 v-bind，v-on

v-show也可以根據條件展示元素。

v-for 迴圈語句

v-for指令需要以site in sites形式的特殊語法

例如：}

vue.js計算屬性 關鍵字 computed

vue.js監聽屬性 watch

vue.js樣式繫結 class 

vue.js style(內聯樣式) 

vue.js事情處理器 v-on指令 增加 1

vue.js元件

元件（component）是vue.js最強大的功能之一

元件可以擴充套件html元素，封裝可重用的**

®️乙個全域性元件語法格式如下：

vue.component(taname,options)   taname為元件名稱，options為配置選項

註冊後可以 形式呼叫

全域性元件

例如：

區域性元件

例如：

prop 是子元件用來接受父元件傳遞過來的資料的乙個自定義屬性。

父元件的資料需要通過props把資料傳給子元件，子元件需要顯式的用props選項宣告「prop」

例如：

vue.js元件-自定義事件

使用$on(eventname)監聽事件

使用$emit(eventname)觸發事件

Vue基礎學習

到公司第一天，把快遺忘的vue再看一遍官網的文件。vue.js是什麼？vue.js是一套用於構建使用者介面的漸進式框架。宣告式渲染 下面展示一些 new vue 結果hello vue 繫結元素attribute message 滑鼠懸停幾秒鐘檢視此處動態繫結的提示資訊 介紹 v bind attr...

vue學習筆記 vue基礎（一）

vue框架提供了乙個vue的建構函式 類 我們通過例項化vue，產生乙個vue物件，來構建應用 例如 new vue 在例項化vue的時候，傳入一些配置引數這些配置引數在vue官網的api中可以找到 選項 new vue 使用者看到的介面 產生頁面檢視的基礎結構 html 插值表示式 new vue...

Vue學習01 Vue基礎

lang en charset utf 8 name viewport content width device width,initial scale 1.0 vue學習title head div src script newvue script body html vue例項的作用範圍是什麼呢...