记录第二天 -Vue 起步

作者：默默的成长

2022-10-12
山东
本文字数：816 字
阅读完需：约 3 分钟

前言

美好的一天从写代码开始，今天继续整理 vue 起步知识点。

1.VUE 数据驱动视图

今天整理的分为 MVC 与 MVVN 下面将会以图片的形式展现出来

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’`

3.双向数据绑定 (v-model)

双向数据绑定的体现只体现在 UI 控件中只能体现在 UI 控件中只能应用在有 value 属性的
语法糖

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>      `    });

复制代码

发布于: 刚刚阅读数: 5

默默的成长

关注

还未添加个人签名 2022-10-11 加入

还未添加个人简介

发布

暂无评论

创作场景

记录第二天 -Vue 起步

前言

1.VUE 数据驱动视图

2.指令系统(以 V-XXX 开头)

3.双向数据绑定 (v-model)

4.全局-局部组件

全局组件的创建：第一个参数是组件的名字,第一个参数是 options

局部组建的使用： 打油诗: 声子 挂子 用子

默默的成长

评论

局部组建的使用：打油诗: 声子挂子用子