Vue简单使用

vue可以简化Dom操作

这篇博客的目的是让自己快速回忆起用法，如果完全没接触过，可能会有点云里雾里，不建议看

用法:

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

首先,需要确定一个el挂载点,挂载点可以使用任意css标签选择器选择,建议使用id选择器

视图容器一般使用div,不要把vue挂载到HTML和Body元素上,单标签元素也无法挂载.

el命中元素的内部都归vue管理

data是数据对象,内部格式为json

Vue指令

v-text

<h2 v-text="message">哈哈哈哈</h2>

和{{}}插值表达式效果相同,但是会覆盖原有文本

v-html

对于普通文本来说,和v-text并无差异,一旦文本中有html结构,v-html会自动解析html标签

<div v-html="message"></div>

v-on

为元素绑定事件

<input type="button" v-on:click="doIt" value="click">
<input type="button" @click="doIt" value="click">
<h2 @click="changeFood">{{food}}</h2>

v-on:事件名称

v-on可以简写为@

v-on:click == @ click

事件传参:doIt(arg0,arg1)

doIt:function(arg0,arg1)

事件修饰符:按下回车触发事件

<input type = text @click.entry="change">

方法写在data的methods之中

var  app = new Vue({ 
    el:"#app",   
    data:{ },    
    methods:{       
      changeFood:function () {
             this.food += "好好吃! 
} 
   }})

v-show

//isShow为boolean,通过修改boolean,切换元素显示状态
<img src="./img/张子枫1.jfif" v-show=isShow>

原理是改变标签的display值

v-if

跟v-show一样,根据值的真假,判断是否显示元素

原理:通过观察网页源代码可发现,实质上是注释掉了当前元素,实现隐藏

<p v-if="isShow">为了成为大佬而努力</p>

v-if的性能消耗会比v-show大一些

v-bind

绑定元素的属性,如tytle,class,src

//imgSrc为在data中定义的数据源
<img v-bind:src="imgSrc" style="width: 100px" height="200px">
<img :src="imgSrc" style="width: 100px" height="200px">

简写可以省略v-bind, 直接   :+属性名

v-for

<ul> 
   <li v-for="item in arr">     
   {{item.name}}:{{item.age}}  
  </li>
</ul>

//或者
<ul> 
   <li v-for="(item ,index) in arr">        {{index}}:{{item.name}}:{{item.age}} 
  </li>
</ul>

data:{  
arr:[ 
 {name:"张三",age:25},{name:"李四",age:26},{name:"王五",age:27},  
    ]

},

v-model

配合表单元素使用,双向数据绑定

作用:便捷的获取和设置表单元素的值

<input type="text" v-model="message">

data:{    message:"哦豁！"},