-
知識體系：
官方推薦其他插件：Axios
查看全部 -
環(huán)境和工具的準備
ide==>webstorm vscode
node.js==>node? nvm->node version manager
調(diào)試環(huán)境： chrome 下載 vue.js.devtools插件（應該是chrome中的擴展工具）
工程環(huán)境: vue-cli
查看全部 -
vue的優(yōu)點：
學習方法：
核心知識點：
查看全部 -
1、條件渲染 v-if、v-else、v-else-if，用于判斷條件，其用法類似java條件判斷用法
2、v-show 其值為boolean類型，值為true時顯示，值為false時隱藏
3、v-for 列表渲染 v-for="變量 in 列表"?
4、條件渲染與列表渲染組合
5、v-bind綁定style?
查看全部 -
1、v-on:click用于綁定事件，可在new Vue({})中的methods中編寫function事件
2、偵聽器：watch（異步場景） computed（數(shù)據(jù)聯(lián)動）
查看全部 -
一、Vue環(huán)境
????1. npm --version, node --version? ?vue --version
????2. vue cli安裝? ? npm i -g vue-cli
????3.vue Chrome插件??Vue.js devtools
?????????
查看全部 -
1、vue create hello-world
1-default默認選擇
2-Manually select features手動選擇
Babel
Router
Vuex
CSS Pre-processors
Lintter/Formatter
2、
查看全部 -
使用npm run build打包vue cli的工程化項目；
把dist目錄下的文件上傳到線上服務器的網(wǎng)站目錄：
a. 可以使用nginx或者apache作為網(wǎng)站的http服務；
b. 一般使用linux服務器，/var/html/www為網(wǎng)站目錄；
c. 你需要一個域名，或者使用服務器IP進行訪問；
d. 關閉防火墻，或者使用非80端口，因為一般電信對于沒有備案的用戶會封禁80端口；
查看全部 -
v-bind:? ?#綁定url
@click? ?#綁定事件
通過id進行Vue綁定
<button type ='button' @click=“submit()”></button>
<script>
new Vue({
el:'#app',
data:{
bg1:' app-bind',
msg:'helle vue!',
url:''
}
methods:{
submit:function(){
this.count++
}
}
})</script>
查看全部 -
watch:
監(jiān)聽一個變量的變化
computed：
監(jiān)聽多個變量的變化
監(jiān)聽的變量一定是Vue實例中的屬性
查看全部 -
new Vue({
????el:? '#app',
????data:? {
????????bg1:? 'app-bind',
????????msg:? 'hello vue!!',
????????count:? 0,
????????template:? '<div>hello template</div>'，
????????url:? 'http://www.baidu.com'
????},
????methods:? {
????????submit:? function(){
????????????this.count ++
????????}
????}? ? ????????
})
知識點1
{{(count + 1) * 10}}
可以引用Vue對象data中的屬性進行運算
知識點2
<div v-html="template"></div>
輸出原始的html代碼
知識點3
綁定元素v-bind:? ? ? ? 縮寫：
例1
修改：<a v-bind:href="url">百度</a>
例2
<div class="bg" v-bind:id="bg1">
知識點4
綁定事件v-on:? ? ? 縮寫@
<button type="button" v-on:click="submit()"></button>
查看全部 -
知識點1
把Vue庫引入到html中
知識點2
把新建立的Vue對象綁定到div標簽中
如果是類就是用點號+類名
如果是id就是用#
知識點3
在標簽使用綁定到標簽的Vue對象的值，
使用兩個括號{{msg}}
查看全部 -
Vue 知識體系
查看全部 -
放松放松發(fā)生過
查看全部 -
computed：計算屬性，屬性中的每個元素發(fā)生變化都會觸發(fā)其方法；一般在數(shù)據(jù)聯(lián)動場景中使用
watch：偵聽器，其方法這的所寫的元素發(fā)生變化才會觸發(fā)，一般用于異步場景
查看全部
舉報