1.渲染
数据写在data里面,用插值表达式{{ }}展示数据
<div id="#app">
{{message}}
</div>
<script>
const vm = new Vue({
el:"#app",
data:{
message:"《送你一朵小红花》"
}
})
</script>
《送你一朵小红花》
2.条件渲染 v-if v-else /v-if v-if-else v-else
<div id="#app">
<div v-if="sure == 1">老大<div>
<div v-if-else="sure == 2">老二<div>
<div v-else>老小<div>
</div>
<script>
const vm = new Vue({
el:"#app",
data:{
sure:2
}
})
</script>
老二
内容显示与隐藏 v-if v-show
<div id="#app">
<div v-if="flag">显示<div>
</div>
<script>
const vm = new Vue({
el:"#app",
data:{
flag:true
}
})
</script>
显示
<div id="#app">
<div v-show="sure == 2">哈哈<div>
</div>
<script>
const vm = new Vue({
el:"#app",
data:{
sure:2
}
})
</script>
哈哈
v-if 和 v-show区别:v-if会重新创建元素,但v-show控制的是元素的display,不会反复创建元素
3.动态绑定属性 v-bind
<div id="#app">
<a v-bind="url">点我跳转</a>
<!--v-bind可以简写为冒号:-->
<img :src="imgUrl"/>
</div>
<script>
const vm = new Vue({
el:"#app",
data:{
url:"http://www.baidu.com",
imgUrl:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3455184204,2524748306&fm=26&gp=0.jpg"
}
})
</script>
点击a标签可以跳转到百度首页,
img会显示图片,这是热巴的图片哟
4.实现数据双向绑定 ,多用于表单 v-model
<div id="#app">
<input v-model="message" type="text"/>
</div>
<script>
const vm = new Vue({
el:"#app",
data:{
message:"半生浮名只是虚妄"
}
})
</script>
什么叫数据双向绑定呢?
可以在浏览器下载一个vue的纱插件,控制台便会有一个vue的选项。,打开vue可以看到你写的代码和数据。
你会看到,用v-model的input文本框,当你在文本框中随便输入东西,data中的数据也会改变成所输入的东西。
5.v-on 事件绑定
v-on可用@符号代替
v-on:+事件类型 引号中可以写方法体,也可以写一个事件函数
methods的方法中访问data中的数据的时候,要用this获取访问
<div id="#app">
{{count}}
<button v-on:click="count+=1">+</button>
<button @click="jian">-</button>
</div>
<script>
const vm = new Vue({
el:"#app",
data:{
count:0
},
methods:{
jian(){
this.count = this.count - 1
}
}
})
</script>
点击加号按钮数字就会加1,点击减号按钮数字就会减1
6.计算属性
我的理解,对数据进行实时监测并处理,比如要把获取到的数据在展示之前都要进行*3的处理在展示,如果用methods里定义方法,代码显得过于复杂。此时可以考虑计算属性。
<div id="#app">
{{count}}
<button v-on:click="count+=1">+</button>
<button @click="jian">-</button>
<!--计算属性-->
<input type="text" v-model="sum" />
</div>
<script>
const vm = new Vue({
el:"#app",
data:{
count:0
},
methods:{
jian(){
this.count = this.count - 1
}
},
//计算属性
computed:{
sum(){
return this.count * 3
}
}
})
当点击加号时数字+1,在经过计算属性的方法sum()处理后,文本框就会显示处理后的值 3
7.循环遍历 v-for
数组循环
item就是遍历到的数组的元素,index是元素下标位置,arr是data里的数组。这是数组有几个元素就会创建几个li
<div id="#app">
<ul>
<li v-for="(item,index) in arr" :key="index">位置:{{index}}--元素:{{item}}</li>
</ul>
</div>
<script>
const vm = new Vue({
el:"#app",
data:{
arr:['他大舅','他二舅','他三舅','他妈']
}
})
</script>
位置:0 -- 元素:他大舅
位置:1 -- 元素:他二舅
位置:2 -- 元素:他三舅
位置:3 -- 元素:他娘
对象循环
key是对象中的属性名,val是对象中的属性值,index是属性的角标 user就是对象
<div id="#app">
<ul>
<li v-for="(val,key,index) in user" :key="index">键:{{key}} -- 值:{{val}} -- 索引:{{index}}</li>
</ul>
</div>
<script>
const vm = new Vue({
el:"#app",
data:{
user:{
name:"空空",
age:18,
sex:"公"
},
}
})
</script>
结果:
8.组件注册 + 父传子传值
Vue.component注册子组件,son是子组件的名字,template是子组件模板,props用来子组件接受父组件。自定义变量名myarr来接收父组件传来的数据,Array是接收数据的类型是数组;
在父组件的模板(id为app)里以标签的方式引用这个子组件;
子组件的变量绑定父组件的数据:myarr=“arr”
<div id="#app">
<son :myarr="arr"></son>
</div>
<script>
Vue.component('son',{
template:`
<div>
<ul>
<li v-for"(item,index) in myarr" :key="index">位置:{{index}}---内容:{{item}}</li>
</ul>
<div>
`,
props:{
myarr:Array
}
})
const vm = new Vue({
el:"#app",
data:{
arr:['他大舅','他二舅','他三舅','他妈']
},
})