-
安裝VUE.js
查看全部 -
nodeJs git cnpm(淘寶鏡像) this指定 雙向數據綁定查看全部
-
v-text 會把內容當作字符串輸出
v-html 會識別html標簽，并輸出標簽里內容
查看全部 -
components:將引入的組件注冊放入本頁面
props:傳遞信息,子組件向父組件傳遞信息
headerA.vue? 子組件
{{msg}}//可以顯示
props:['msg'],//字符串,注冊
methods:{
????? doThis(){
????????????console.log(this.msg)
????}
}
App.vue
<header-a msg='app.vue'></header-a>//駝峰法,將每個大寫變為小寫,并加上' - '
import headerA form './headerA'
components:{ headerA, }//注冊組件,可以放多個
查看全部 -
export?default{ ????fetch:function(){ ????return?JSON.parse(window.localStroage.getItem(STORAGE_KEY)||'[]'),???? ????}, ????save:function(items){ ????window.localStorage.setItem(STORAGE_KEY,JSON.stringify(item)) ????} } 引入 import?Store?from?'./store.vue' 使用 Store.fetch//顯示 Store.save//存儲,放到瀏覽器的某個頁面上查看全部 -
@key.enter=""? 當按下enter時,數組加上當前輸入的值
addItem(){
this.data.push({
label:this.newItem,
isFinished:false
})
}
查看全部 -
安裝vue
查看全部 -
props: ['msgfromfather']
接收消息從來自父組件的消息
查看全部 -
vue中的組件屬性特殊的地方：
components:? {HelloWorld}
在html上調用這個組件的時候vue規定，換成小寫，并在大寫的地方變成-：
<hello-world></hello-world>
查看全部 -
熱更新：修改app.vue會立馬顯示在view html上，而不同刷新
查看全部 -
vue.js的一個組件
*.vue是vue.js中特有的文件格式，它集合了html（<template></template>），js(<script></script>)，和css(<style></style>)查看全部 -
子組件向父組件傳值，方法1
使用$emit來自定義一個時間
this.$emit('my-event',參數傳遞的值)
查看全部 -
1、data（存放所有的數據）
2、methods（方法，邏輯函數）
methods:{ ????doSomething:function(){ ???????? ????} } 3、watch（監聽函數） ????watch：{ ????????"a":function(val,oldVal){ ????????????console.log(val,oldVal) ????????} ????} ?4、v-text={{}}（不解析帶有<p>屬性的標簽，直接輸出文字）、v-html（先解析查看是否有標簽屬性的，在輸出，安全xxs盡量不要直接輸出標簽） ?5、v-for：?v-for="(value,key,index)?in?items"???value:屬性值??key?：屬性名??index：索引從0開始 ?????<ul> ?????????<li?v-for="(value,key,index)?in?items"> ?????????????<p?v-text="item.label"></p> ?????????</li> ?????</ul> ???6、v-on：click="doThis"?簡寫：@：click="doThis"?事件綁定 ???7、v-bind:src="imagesSrc"?簡寫：??：src="imagesSrc"?動態添加屬性 ??????????[]?這class是否等于規定的，{}class是否有這個的值是否是真的 ???????<div?:class="{red:isRed}"></div> ???????<div?:class="[classA,classB]"></div> ???????<div?:class="[classA,{calssB:isB,calss:isC}]"></div>查看全部 -
# 全局安裝 vue-cli
npm install -g vue-cli
# 創建一個基于‘webpack’ 模板的新項目
vue init webpack my-project
#安裝一來，走你
cd my-project
npm install?
npm run dev
查看全部 -
雙向綁定
<div id="demo">
????<p>{{message}}</p>
<input v-model="message">
</div>
var demo = new Vue({
????el:"#demo",
data:{
????message:'hello vue.js'
}
})
查看全部
舉報