Vue中的指令
Vue中以带有前缀V-的属性被称为指令(带有v表示他们是Vue提供的特殊attribute)
一个v-bind的例子
<div id="app" v-bind:title="message">
texttexttext
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'helloworld!'
}
})
这其中 v-bind表明将div元素的title属性与message保持一致
v-if v-for
v-if 可以控制一个元素是否显示(当然 v-show也可以 看名字就可以看出)
<div id="app" v-if="seen" v-on:click="handleOnClick">
{{message}}
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'helloworld!',
seen:true
},
methods:{
handleOnClick:function(){
this.seen=!this.seen;
}
}
})
这里用到了Vue中的v-if来控制元素的显示 v-on进行时间绑定 还有Vue中的methods属性
改变seen的值 即可改变元素的显示(与v-show的区别之后会写)
v-for 用来遍历一个数组来循环渲染项目
<div id="app">
<ul>
<li v-for="item in lists">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
lists:['学编程死路一条','我嬲你妈妈憋类','妙啊~~~']
},
})
</script>
当我们改变lists的内容时 ul标签中内容也会发生改变
v-on 事件绑定
<div id="app">
{{message}}
<button v-on:click="handleOnClick">helloworld</button>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'helloworld!',
seen:true
},
methods:{
handleOnClick:function(){
alert("helloworld");
}
}
})
</script>
通过v-on可以绑定各种事件
v-model 双向绑定
v-model 可以实现输入框和数据的双向绑定(一个改变,另一个也发生改变)
<div id="app">
<input v-model="message"></input>
<button v-on:click="handleOnClick">giaogiaogiao</button>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'helloworld!',
seen:true
},
methods:{
handleOnClick:function(){
this.message="giaogiaogiao"
}
}
})
</script>
点击改变message的值后 input框中的数据也发生了改变
组件化的思想
Vue中很重要的一个思想就是组件化
试着想想 一个网页 可以拆成各个组件 比如 顶部 底部 侧边栏 内容主题
创建组件和使用的方式非常简单
<div id="app">
{{message}}
<new-component></new-component>
</div>
<script type="text/javascript">
Vue.component('newComponent',{
template:'<div>一个组件</div>'
})
var app=new Vue({
el:'#app',
data:{
message:'helloworld!'
}
})
</script>
需要注意的是 Vue中 我们声明组件的方式是驼峰命名 但是html不区分大小写 所以写成标签时要用-来区别
父子组件传值
现在我们已经可以将页面划分成各个组件了
但是子组件(myComponent)是无法使用父组件(app)的值 因此 我们需要一种方式将值传入子组件
<div id="app">
{{message}}
<new-component v-bind:value="text"></new-component>
</div>
<script type="text/javascript">
Vue.component('newComponent',{
props:['value'],
template:'<div>{{value}}</div>'
})
var app=new Vue({
el:'#app',
data:{
message:'helloworld!',
text:"Father-value"
}
})
</script>
当我们使用v-bind 传值时候 需要再子组件中添加 props属性去接收这个值