2023學年完整公開課版認識Vue框架

移動應用開發(fā)專業(yè)資源庫移動應用開發(fā)專業(yè)資源庫實訓項目：手機通訊錄

-認識Vue框架學習目標1234重點難點學習方法實踐過程目錄5課后思考移動應用開發(fā)專業(yè)資源庫學習方法重點難點實踐過程課后思考學習目標本次實訓完成的目標任務01了解Vue作用與導入方式02了解Vue常用指令03掌握Vue模板語法04掌握Vue文本顯示指令學習方法重點難點實踐過程課后思考學習目標重點Vue模板語法難點文本顯示指令學習方法重點難點實踐過程課后思考學習目標教引導演示學自學與討論做任務驅動動手實踐1:開發(fā)軟件HBuilder學習方法重點難點實踐過程課后思考學習目標查看項目分析技術Vue的應用Vue基本格式素材準備模板語法2:Vue.js1:新建MyVue項目2:添加Vue.html文件學習方法重點難點實踐過程課后思考學習目標素材準備查看項目3:導入Vue.jsVue的應用素材準備分析技術Vue基本格式模板語法學習方法重點難點實踐過程課后思考學習目標查看項目分析技術Vue的應用Vue基本格式1:創(chuàng)建Vue實例素材準備每個Vue應用都是通過

Vue

函數創(chuàng)建一個新的

Vue實例開始的：varvm=newVue({//選項})其中選項格式采用JavaScript對象的格式。模板語法學習方法重點難點實踐過程課后思考學習目標查看項目Vue的應用2:Vue常用選項說明素材準備varvm=newVue({el:‘#example’,data:data，methods:，ready:，})el提供一個在頁面上已存在的DOM元素?？梢允荂SS選擇器，也可以是一個元素的ID號。template一個字符串模板作為Vue實例的標識使用。render字符串模板的代替方案，允許使用JavaScript編程。dataVue實例的數據對象。computed計算屬性。所有getter和setter的this上下文自動地綁定為Vue實例。method可以直接訪問的方法。watch一個對象，鍵是需要觀察的表達式，值是對應回調函數。分析技術Vue基本格式模板語法學習方法重點難點實踐過程課后思考學習目標

Vue的應用1:v-常用指令v-text文本指令，更新元有素的

textContentv-html更新元素的

innerHTMLv-bind動態(tài)地綁定一個或多個特性，或一個組件prop到表達式。v-model在表單控件或者組件上創(chuàng)建雙向綁定v-show根據表達式之真假值，切換元素的displayCSS屬性。v-if根據表達式的值的真假條件渲染元素。v-else為

v-if

或者

v-else-if

添加“else塊”。v-else-if前一兄弟元素必須有v-if或v-else-ifv-for基于源數據多次渲染元素或模板塊。v-on綁定事件監(jiān)聽器素材準備分析技術Vue基本格式Vue指令語法學習方法重點難點實踐過程課后思考學習目標查看項目

Vue的應用2:v-text文本綁定<divid="app">

<!--<pv-text="message"></p>-->

<p>{{message}}</p> </div> <scriptsrc="js/vue.js"></script> <script>

newVue({ el:'#app', data:{ message:'HelloVue.js!'

} })

</script>分析技術Vue基本格式Vue指令語法素材準備學習方法重點難點實踐過程課后思考學習目標查看項目

Vue的應用3:v-html綁定<divid="app">

<pv-html="message"></p></div> <scriptsrc="js/vue.js"></script> <script>

newVue({ el:'#app', data:{ message:'<h1>HelloVue.js!</h1>‘

} })