您当前的位置： 首页 > 学无止境 > 网站建设 网站首页网站建设
Vue基础-第1天-{Vue基础}-02
发布时间：2020-01-31 17:28:01编辑：雪饮阅读（）
v-model（双向绑定）
<script type="text/javascript">
new Vue({
el:"#app",
template:`
<div>
<input type="text" v-model="msg"/>
<p>{{msg}}</p>
</div>`
,data:function(){
return {
msg:'siege mentality'
}
}
});
</script>
这里当input在用户输入内容后其值会改变，则在p标签中的内容也会跟着改变，即视图数据变动也使得关联的数据也改变也就是mvvm中的vm(v-m)
v-model原理(双向绑定的原生实现)
<script type="text/javascript">
new Vue({
el:"#app",
template:`
<div>
<input type="text" v-bind:value="msg" v-on:input="change"/>
<p>{{msg}}</p>
</div>`
,data:function(){
return {
msg:'siege mentality'
}
},
methods:{
change(e){
this.msg=e.target.value;
}
}
});
</script>
双向绑定在这里相当于单向绑定了input的value并给该input添加了onInput事件监听来实现的。
局部组件
这里所说的局部是当前页面的局部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
//声明局部组件App
var App={
template:`<div>我是局部组件的main</div>`,
data(){
return {}
}
}
new Vue({
el:"#app",
//模板中使用局部组件App
template:`<App></App>`
,data:function(){
return {
msg:'siege mentality'
}
},
//挂载局部组件App(这里用了es6简写，标准应该是App:App)
components:{App}
});
</script>
</body>
</html>
子组件
<script type="text/javascript">
//声明子组件head
var vHeader={
template:`<div class="head">我是main组件中的head子组件</div>`
}
var App={
template:`
<div>
<vHeader></vHeader>
</div>`,
data(){
return {}
},
components:{
vHeader
}
}
new Vue({
el:"#app",
template:`<App></App>`
,data:function(){
return {
msg:'siege mentality'
}
},
components:{App}
});
</script>
组件的单标签与双标签
使用组件时可以是双标签也可以是单标签
<script type="text/javascript">
var vHeader={
template:`<div class="head">我是main组件中的head子组件</div>`
}
var vLeft={
template:`<div class="head">我是main组件中的left子组件</div>`
}
var App={
template:`
<div>
<vHeader/>
<vLeft></vLeft>
</div>`,
data(){
return {}
},
components:{
vHeader,vLeft
}
}
new Vue({
el:"#app",
template:`<App></App>`
,data:function(){
return {
msg:'siege mentality'
}
},
components:{App}
});
</script>
全局组件
这里所谓的全局是当前页面的全局
<script type="text/javascript">
//声明全局组件
Vue.component('Vbtn',{
template:
`<button>我是全局组件Vbtn</button>
`
})
var vHeader={
template:`<div class="head">我是main组件中的head子组件</div>`
}
var vLeft={
template:`<div class="head">我是main组件中的left子组件</div>`
}
//全局组件不用挂载，直接使用
var rightBody={
template:`<div class="head">我是main组件中的rightBody子组件<Vbtn></Vbtn>
</div>`
}
var App={
template:`
<div>
<vHeader/>
<vLeft></vLeft>
<rightBody></rightBody>
</div>`,
data(){
return {}
},
components:{
vHeader,vLeft,rightBody
}
}
new Vue({
el:"#app",
template:`<App></App>`
,data:function(){
return {
msg:'siege mentality'
}
},
components:{App}
});
</script>
v-bind与v-on的简写
原v-bind
<p v-bind:class="{red:isRed}">{{msg}}</p>
简写v-bind
<p :class="{red:isRed}">{{msg}}</p>
原v-on
<input type="text" v-bind:value="msg" v-on:input="change"/>
简写v-on
<input type="text" v-bind:value="msg" @input="change"/>
关键字词：vue,v-model,双向绑定,components,组件,v-bind,v-on,简写
下一篇：常用flex布局参考