-
單項綁定是指的，數(shù)據(jù)可以決定頁面顯示內(nèi)容，而頁面顯示內(nèi)容無法修改數(shù)據(jù)。
雙向數(shù)據(jù)綁定是指的，數(shù)據(jù)可以用于頁面顯示，同時頁面顯示和相關(guān)控件操作值也可以修改內(nèi)存數(shù)據(jù)。
查看全部 -
指令v-on縮寫是 " @ "
指令v-bind縮寫是 " : "
查看全部 -
使用模板指令v-bind之后所被綁定的屬性就變成了js表達式了。
查看全部 -
模板也可以在vue實例中template屬性中書寫。
查看全部 -
掛載點內(nèi)部的html代碼，都可以稱之為模板。
查看全部 -
掛載點就是vue新建實例參數(shù)中的el屬性的值。
查看全部 -
掛載點：vue只會處理相應掛載點下面的子元素相關(guān)操作。
查看全部 -
模板 就是掛載點里的內(nèi)容
查看全部 -
<div id="root">
<div id="">
<input type="" v-model='input' />
<button type="button" @click="handclick">提交</button></div>
<ul>
<li v-for="(item ,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el: "#root",
data: {
input: '',
list: []
},
methods: {
handclick: function() {
if (this.input == "") {alert("內(nèi)容不能為空")
} else {?
this.list.push(this.input),
this.input = ""
}
}
}})
</script>查看全部 -
每一個組件都是一個VUE的實例
查看全部 -
全局安裝vue-cli
????npm install --global ?vue-cli
創(chuàng)建一個基于webpack 的項目?my-project
????vue init webpack my-project
安裝項目依賴
????cd my-project
????npm run
查看全部 -
子組件定義、接收參數(shù)、向父組件傳遞事件
查看全部 -
父組件刪除元素
查看全部 -
父組件向子組件傳參
父組件監(jiān)聽子組件事件
查看全部 -
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>Vue</title>
????<script?src="./vue.js"></script>
</head>
<body>
????<div?id="root">
????????<div>
????????????<input?v-model="inputValue"/>
????????????<button?@click="handleClick">提交</button>
????????</div>
????????<ul>
????????????<todo-list?
????????????????v-for="(item,index)?of?list"
????????????????:key="index"
????????????????:content="item"
????????????????:index="index"
????????????????@delete="handleDelete"
????????????></todo-list>
????????</ul>
????</div>
????
????<script>
????????Vue.component('todo-list',{
????????????props:['content','index'],
????????????template:'<li?@click="handleClick">{{content}}</li>',
????????????methods:{
????????????????handleClick:function(){
????????????????????this.$emit('delete',this.index)
????????????????}
????????????}????
????????})
????????//?var?TodoItem={
????????//?????template:'<li>item</li>'
????????//?}
????????new?Vue({
????????????el:"#root",
????????????data:{
????????????????inputValue:"hello",
????????????????list:[]
????????????},
????????????methods:{
????????????????handleClick:function(){
????????????????????this.list.push(this.inputValue);
????????????????????this.inputValue="";
????????????????},
????????????????handleDelete:function(index){?
????????????????????this.list.splice(index,1)
????????????????}
????????????}
????????})
????</script>
</body>
</html>
查看全部
舉報