Vue.js基礎(chǔ)知識小結(jié)
更新時間：2017年01月13日 15:16:34 作者：Myshero
本文主要介紹了Vue.js的相關(guān)知識。具有一定的參考價值，下面跟著小編一起來看下吧
數(shù)據(jù)綁定
1.單向綁定
<div id="app">
{{massage}}
</div>
var app = new Vue({
el:"#app",
data:{
message:"Hello,vue.js!"
}
2.雙向綁定
<div id="app">
<p>{{message}}</p>
<input v-model="message" />
</div>
var app = new Vue({
el:"#app",
data:{
message:"Hello,vue.js!"
}
3.v-for列表渲染
<div id="app">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>
new Vue({
el:"#app",
data:{
todos:[
{text:"abcdef"},
{text:"123456"},
{text:"qwerta"}
] }
})
3.處理用戶輸入
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
new Vue({
el: "#app",
data:{
message:"Hello Vue.js!"
},
methods:{
reverseMessage:function()
{
this .message = this.message.split('').revserse().join('');
}
}
})
4.綜合
<div id="app">
<input v-model="newTodo" v-on:keyup.enter="addTodo" />
<ul>
<li v-for = "todo in todos">
<span>{{ todo.text }}</span>
<button v-on:click="removeTodo($index)">X</button>
</li>
</ul>
</div>
<script type="text/javascript" src="js/vue.min.js"></script>
<script>
new Vue({
el:"#app",
data:{
newTodo:"",
todos:[
{
text:'Add some todos 1'
},
{
text:'Add some todos 2'
},{
text:'Add some todos 3'
}
]
},
methods:{
addTodo: function(){
//去除首尾的空格
var text = this.newTodo.trim();
//去除后非空的話
if(text){
this.todos.push({ text: text })
this.newTodo = ''
}
},
removeTodo: function(index){
this.todos.splice( index, 1 )
}
}
})
</script>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
這篇文章，我們通過實現(xiàn)一個簡單版的和Vue中computed具有相同功能的函數(shù)來了解computed是如何工作的。對Vue.js中的computed工作原理感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-03-03
本文主要介紹了vue高德地圖JS API實現(xiàn)海量點標記示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue3+ts如何通過lodash實現(xiàn)防抖節(jié)流詳解
loadsh是一個工具庫，我們通常使用loadsh的debounce函數(shù)處理防抖,下面這篇文章主要給大家介紹了關(guān)于vue3+ts如何通過lodash實現(xiàn)防抖節(jié)流的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
vue中watch的實際開發(fā)學(xué)習(xí)筆記
watch是Vue實例的一個屬性是用來響應(yīng)數(shù)據(jù)的變化,需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時,這個方式是最有用的,下面這篇文章主要給大家介紹了關(guān)于vue中watch的實際開發(fā)筆記,需要的朋友可以參考下2022-11-11
相信現(xiàn)在很多人都是用Vue做過了各種項目,但是項目代碼做完和上線并不代表這結(jié)束,還有上線以后的優(yōu)化也是很重要的一點,這篇文章主要給大家介紹了關(guān)于Vue項目優(yōu)化打包的相關(guān)資料,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了Vue 實現(xiàn)簡易多行滾動“彈幕”效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了Vue監(jiān)聽使用方法和過濾器實現(xiàn)，過濾器為頁面中數(shù)據(jù)進行強化，具有局部過濾器和全局過濾器2022-06-06
這篇文章主要為大家學(xué)習(xí)介紹了Vue3如何使用echarts實現(xiàn)繪制折線圖,文中有詳細的示例代碼供大家參考,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-07-07
這篇文章主要介紹了解決Antd Table組件表頭不對齊的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了使用vue實現(xiàn)HTML頁面生成圖片的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03