记录第二天-Vue起步
前言
美好的一天从写代码开始，今天继续整理vue起步知识点。
1.VUE 数据驱动视图
今天整理的分为 MVC 与MVVN 下面将会以图片的形式展现出来
image.png
2.指令系统(以 V-XXX开头)
v-text → innerText
v-html → innerHtml
v-if → 数据属性对应的值 如果为假 则不在页面渲染，反之亦然
v-show → 控制dom元素的显示隐藏 display：none/block;
v-bind → 绑定标签上的属性（内置的属性和自定义的属性）：bind
v-on → 原生事件名=‘函数名’ 简便写法：@
v-for = ‘(item,index) in menuLists’ `
new Vue({
el:'#app',
data:function(){
return{
msg:'指令系统',
msg2:'<h2>指令系统</h2>',
isShow:false,
isGreen:false,
text:'哈哈哈',
menuLists:[
{id:1,name:"大腰子",price:50},
{id:2,name:"排骨",price:60},
{id:3,name:'肘子',price:830},
],
people:{
name:'寇世龙',
age:21,
fav:'AV'
}
}
},
template:`
<div class='app'>
<h2>{{msg}} </h2>
<p v-text='msg'> </p>
<div v-html='msg2'></div>
<div v-text='1+1'></div>
<div v-if='isShow'>我想你也是爱我的</div>
<div v-if='!isShow'>你也舍不得</div>
<div v-if='Math.random()>0.5'>
已显示
</div>
<div v-else>
已隐藏
</div>
<div v-show='isShow'>显示 </div>
<div v-show='!isShow'>隐藏 </div>
<div class='box' :class='{active:isGreen}' :a='text' v-on:click='clickHeadler'> </div>
<ul>
<li v-for='item in menuLists'>
<h5 v-text='item.id'></h5>
<h3>{{item.name}}</h3>
<em>{{item.price}}</em>
</li>
</ul>
<ul>
<li v-for='(value,key) in people'>
{{key}}==={{value}}
</li>
</ul>
</div>`,
methods:{
clickHeadler(e){
// this.isGreen=!this.isGreen
if(this.isGreen =true){
this.isGreen =false
}else{
this.isGreen=true
}
}
}
})`3.双向数据绑定 (v-model)
- 双向数据绑定的体现 只体现在UI控件中 只能体现在UI控件中 只能应用在有value属性的
- 语法糖
image.png
4.全局-局部组件
全局组件的创建：第一个参数是组件的名字,第一个参数是options
`
Vue.component('Vbtn',{
template:`
<button>按钮<button>
`
});
var vm =new Vue({
el:"#app",
data(){
return{
}
},
//用子
template:`
<div>
<Vbtn/>
</div>
`
});`
局部组建的使用： 打油诗: 声子 挂子 用子
`
var Vheader ={
template:`
<div> 我是头部组件</div>
`
};
var App={
data(){
return{
}
},
methods:{
clickHanlder(){
console.log(this);
}
},
template:`
<div>
<button @click='clickHanlder'></button>
我是入口组件
</div>
`
};
console.log(this)
var vm =new Vue({
el:"#app",
data(){
return{
}
},
//挂子
components:{
App,
Vheader
},
//用子
template:`
<div>
<Vheader></Vheader>
<App></App>
</div>
`
});`
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-06-08，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录