vue学习02
1.
声明app 方便调用 console.log(app.message)
el 用于绑定dom，可以使用id选择器，也可以是class选择器，也可以是其他选择器，必须是dom对象，不能是html元素
data 赋值
methods 声明函数,两种方法都可以声明，推荐第一种
var app = new Vue({
el:"#app",
data:{
message:'hello world'
},
methods:{
reverseMessage:function(){
this.message = this.message.split('').reverse().join('')
},
reserveMessage2(){
this.message = this.message.split('').reverse().join('')
}
}
})2.部分demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h1 v-bind:title="message">我是h1</h1>
</div>
<div id="app2">
<span v-if="showspan">i'm coming</span>
</div>
<div id="app3">
<ul>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ul>
</div>
<div id="app4">
<p>{{message}}</p>
<button v-on:click="reverseMessage">翻转消息</button>
</div>
<div id="app5">
<p>{{message}}</p>
<input type="text" v-model="message" />
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data:{
message:'hello vue!'
}
})
var app2 = new Vue({
el:"#app2",
data:{
showspan:true
}
})
var app3 = new Vue({
el:"#app3",
data:{
todos:[
{text:'a'},
{text:'b'},
{text:'v'}
]
}
})
var app4 = new Vue({
el:"#app4",
data:{
message:"hello vue.js"
},
methods:{
reverseMessage:function(){
this.message = this.message.split('').reverse().join('')
}
}
})
var app5 = new Vue({
el:"#app5",
data:{
message:'hellow world!'
}
})
</script>
</html>3.动态参数
<a v-bind:[attributeName]="url"> ... </a>
attributeName 也是表达式的值，如果attributeName = href 则等同于 v-bind:href="url"
4.缩写
v-bind:href ="url" ===== :href="url"
v-on:click="show1" ==== @click="show1"
本文为看恩吧原创文章,转载无需和我联系,但请注明来自knsay.com
网站不承担任何有关评论的责任
- 最新评论
- 总共条评论
