vueJs的简单入门以及基础语法
生活随笔
收集整理的這篇文章主要介紹了
vueJs的简单入门以及基础语法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
vue的api vue官網API
1基礎語法
1-1基本數據綁定
<div id="app">{{ msg }} </div> //script new Vue({el:"#app",//代表vue的范圍 data:{msg:'hello Vue' //數據 } })?
在這個例子中我們可以進行賦值
var app = new Vue(...); app.msg = '初探vue'; //那么頁面的值就被改變了?
1-2 v-html命令
?
<div id="app" v-html="msg"></div> //script new Vue({el:"#app",//代表vue的范圍 data:{msg:'<h1>你好，世界</h1>' //這里就不會是文本了 而是會被當成是html標簽了 } })?
1-3 v-on:click||@click指令
<div id="app"> <button v-on:clikc="clickHead">事件</button> <button @click="clickHead">事件</button> </div>//js new Vue({el:"#app",methods:{clickHead:functoin(){alert('vue的事件綁定')}} })//在es6語法中 對象中的函數可以 const json={clickHead(){//do something } } json.clickHead()調用方法//和一樣的 const json={clickHead:function(){//do something } }1-4 v-bind 屬性綁定指令
例如綁定class 和id 已經已經存在的屬性 和自定義屬性
綁定類名
<div id="app"><p v-bind:class="className">{{msg}}</p> </div> /* v-bind 自定義名字 v-bind:id="..." 綁定id名字 v-bind:title="..."綁定title屬性 v-bind:style="..." 綁定樣式屬性 v-bind:...="..."綁定自定義屬性 、、、 *///js new Vue({el:"#app",data:{msg:'這是v-bind綁定數據',className:'contatiner'}, }) const Name = document.querySelector('.contatiner'); console.log(Name) //能正常的獲取這個元素?
1-5 v-show
根據值的真假 控制元素的display的屬性
<div id="app"><p v-show="msg"> 可以看到啊 </p><p v-show="msg1"> 不可以看到啊 </p> </div>//js new Vue({el:"#app",data:{msg:1+1==2,msg1:1+1!=2} })?
1-6 v-text
賦予文本值
<div id="app"><p v-text="msg"> 可以看到啊 </p> <!-- 最終會被替換掉 1+1==2 --> </div>//js new Vue({el:"#app",data:{msg:'你好哈 v-text'} })?
1-7 v-for
循環
<div id="app"><ol><li v-for="module in modules">{{module.msg}}</li></ol> </div>//js new Vue({el:"#app",data:{modules:[{msg:'第一個'},{msg:'第二個'},{msg:'第三個'},{msg:'第四個'}]} })?
<div id="app"><ol><input type="text" v-model ="val" @keydown.enter="list.push(val);val=''"><ul><li v-for="(item,index) in list">{{item}}<button @click="list.splice(index,1)">x</button></li></ul></ol> </div><script>new Vue({el:"#app",data:{list:[],val:''}}) </script>如果遍歷對象:
<div id="app"><div v-for="item in list"><button @click="flag=!flag" >{{item.name}}</button><div v-show="flag" v-for="(value,key,index) in item">{{key}}:{{value}}</div></div> </div><script>new Vue({el:"#app",data:{flag:false,list:[{name:'R730',BIOS:'2.5.2',idrac:'2.60.60'},{name:'R830',BIOS:'2.6.2',idrac:'2.70.60'},{name:'R930',BIOS:'2.7.2',idrac:'2.80.60'},{name:'R630',BIOS:'2.8.2',idrac:'2.90.60'},],val:''}}) </script>?
1-7.2?綁定key?值的作用和原理：
不綁定key值時，當數據變化時，檢查被遍歷對象數據對應位置數據的變化，如果對應位置的值變化，數據將進行變化；
綁定key值后，當數據變化時，?會檢查被遍歷對象每一位dom?的變化，如果只是其中位置變化了，頁面刷新局部dom，這樣有利于提高頁面性能，
測試如下：
<div id="app"><div v-for="i in list" :key="i">{{i}}</div><button @click="list=[2,3,6,4,5]">change</button><button @click="list=[1,2,3,4,5]">change</button> </div> <script>new Vue({el:'#app',data:{list:[1,2,3,4,5]}}) </script>當第一次點擊左邊change時，index：0、1、2全變了
而點擊右邊change時，只有index：0變化，其他沒有變化：
?
?如果想利用methods?的方法修改date中的數據：
<div id="app"><div v-for="(i,index) in list" :key="index">{{i}}</div>
<button @click="list=[2,3,6,4,5]">change</button>
<button @click="list=[1,2,3,4,5]">change</button>
<button @click="change">change</button>
</div>
<script>
new Vue({
el:'#app',
data:{
list:[1,2,3,4,5]
},
methods:{
change(){
this.$set(this.list,4,3)//把list中的第4位改成3
}
}
})
</script> ?
?
?
1-8 v-model 雙向數據綁定
<div id="app"><input type="text" v-model="msg"><p>{{msg}}</p> </div>//js new Vue({el:"#app",data:{msg:''} })?
1-9 template屬性
<div id="app"><span>你好啊</span> </div>//js new Vue({el:"#app",data:{msg:'這是數據'},template:"<div>模板div</div>" })?
最終的效果是把id為app的div直接替換成template里面的元素
注意在template的值中不能含有兄弟根節點
new Vue({el:"#app",template:"<div>1<div><div>2<div>" })?
這樣是錯誤的
在template 可以把團蘇片段放在script標簽內
?1-10?v-if?用來設置?決定一個元素顯示或不顯示
<div id="app"><p v-if = "flag">now you see me {{ msg }} </p>
<p v-else>now you dont see me</p>
<button @click = "flag = !flag">{{ change }}</button>
</div>
<script>
new Vue({
el:"#app",
data:{
msg: 'hello',
flag: false,
change: 'change'
},
})
</script>
?
2）vue實例中的屬性
2-1 el
el表示在vue的實例中的作用范圍
new Vue({el:"#app" //作用在id名為app的div上 })?
2-2 data
data的屬性就是數據綁定
new Vue({data:{msg:'數據的值' arrayData:[{title:'這是1'}]} })?
2-3 methods
methods綁定事件
new Vue({el:"#app",methods:{mouseClick(){alert('綁定事件')}} })?
2-3 template
template模板的綁定
new Vue({el:"#app",template:'<div>這是模板屬性</div>' })2-4 render
render模板的綁定
new Vue({el:"#app",render(createElement){return createElement("ol",{ //新創建的元素身上綁定屬性 style:{fontSize:'30px',border:'1px solid red',fontWeight:'bold'},attrs:{title:'你好啊',coundNum:'01',id:'ls',class:'bg'}},[createElement("li",'這是第一個文本'),createElement("li",'這是第二個文本'),createElement("li",'這是第三個文本'),])} })?
?3）vue的自定義指令
在vue中除了內置的指令如v-for、v-if...,用戶可以自定義指令 官網
1 //這里定義v-focus 2 directives: { 3 focus: { 4 // 指令的定義 5 inserted: function (el) { 6 el.focus() 7 } 8 } 9 }?
一個指令定義對象可以提供如下幾個鉤子函數 (均為可選)：
- bind：只調用一次，指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置。
- inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。
- update：所在組件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細的鉤子函數參數見下)。
- componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調用。
- unbind：只調用一次，指令與元素解綁時調用。
4）vue的擴展
4-1 v-bind根據條件綁定類名
案例 比如現在在true的情況下綁定red類名
1 <div id="app"> 2 <span :class="{red:addClass}">{{msg}}</span> <!--可以利用簡單的表達式--> 3 <!--這是v-bind指令可以省略--> 4 </div> 5 <script src="js/vue.min.js"></script> 6 <script> 7 new Vue({ 8 el:"#app", 9 data:{ 10 msg:'條件綁定類名', 11 addClass:true 12 } 13 }) 14 </script>?
4-2 v-on || @eventName 事件綁定 有一個事件修飾符
//阻止事件冒泡 <div v-on:click.stop="eventHadles"></div> //阻止默認事件 <div v-on:click.prevent="eventHadles"></div> //事件只能觸發一次 <div v-on:click.once="eventHadles"></div> //只能回車觸發事件 <div @keyup.enter="eventHadles"></div> //只能指定keyCode的值觸發事件 <div @keyup.13="eventHadles"></div>?
5）vue的計算屬性 -computed
例如一個案例需要過濾一些列表
image.png
而我們需要利用v-for進行循環出來列表
需要用到我們的實例的屬性
computed 說透點就是過濾你的數據根據你的條件進行過濾
?
這里的hash的值可以參考我的另一片文章前端hash
6）vue的組件
6-1 底層學習組件
組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能。在有些情況下，組件也可以表現為用 is 特性進行了擴展的原生 HTML 元素。
1 //html 2 <div id="app"> 3 <my-test></my-test> <!--自定義標簽--> 4 </div> 5 6 //js 7 Vue.component('my-test',{ //注冊組件 8 template:'<div>初學組件</div>' 9 }); 10 11 new Vue({ 12 el:"#app" 13 })?
6-2 父子組件通信
利用props進行傳值
1 //局部組件 2 <div id="app"> 3 <my-test msg="你好"></my-test> 4 <my-test msg="傳值2"></my-test> 5 </div> 6 //js 7 new Vue({ 8 el:"#app", 9 components:{ 10 'my-test':{ 11 props:['msg'], 12 template:'<div>{{msg}}</div>' 13 } 14 } 15 }) 16 //全局組件 17 <div id="app"> 18 <my-test msg="你好"></my-test> 19 <my-test msg="傳值2"></my-test> 20 </div> 21 22 //js 23 Vue.component('my-test',{ 24 props:['msg'], 25 template:'<div>{{msg}}</div>' 26 })?
如果需要傳的值在vue的實例中
//html <div id="app"><my-test v-bind:listData="list"></my-test> </div>//js new Vue({el:"#app",data:{list:[{title:'這是數據'},{title:'這是數據22'}]},components:{'my-test':{props:['listData'],template:`<select name="" id=""><option v-for="item in listData">{{item.title}}</option></select> `}} })?
7）vue獲取dom元素
在想獲取的元素身上 <div class="container" rel="getDom"> //js new Vue({el:"#app",methods:{_someDo(){this.dom = this.$refs.getDom;}},mounted(){this._someDo(); //vue完成掛載 調用函數 } })?
8）vue渲染dom是異步$.nextTick()函數
因為vue渲染dom是異步的所以直接操作dom是會出錯的
案例 例如 創建vue實例的時候請求接口數據，然后要進行dom元素操作
?
轉載于:https://www.cnblogs.com/Anderson-An/p/10063950.html
總結
以上是生活随笔為你收集整理的vueJs的简单入门以及基础语法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： fread()
- 下一篇： html5倒计时秒杀怎么做,vue 设