【vue】基础

一、vi-if

1.1基本使用

必须绑定大盒子包住的代码，使用id或者class都可以进行绑定

new Vue({

el:"#id"  el:".class"

})

1.2v-if和v-show的区别

 v-show会渲染，但是不显示，v-if不渲染不显示

1.3vue实例的作用范围

必须包裹在实例化的id或者class中，用{{}}进行引用

二、v-for

2.1 基本使用

数据写在script中的data部分，v-for写在代码区

语法：v-for="item in 数组名" 

使用：{{item}}

2.2for循环渲染

v-for="(i,j) in 数组名/对象名"  先内容后索引

使用：{{j+":"+i}}

效果：下标：内容

三、模版语法

3.1v-html

v-html:可以渲染html代码

在js代码中定义了带css或者html的内容

在内容代码中使用v-html=“带html代码的内容”

3.2 v-bind

如果需要使用js代码中data的内容来渲染页面

可以使用：样式名   的方式来实现

原型是v-bind

例如：v-bind：href   简写：  ：href

四、v-on指令

4.1基本使用

如果在点击某个按钮时切换样式，可以用v-on和点击事件完成

在内容区：button v-on：click=“函数名”

所有函数或者方法都写在methods区

在js区：methods:{

函数名：function（）{

实现方法}

}

4.2v-on简写

@需要的操作

例如：@click