1。创建项目,在项目中引入vue的资源库,

     Vue的基本操作及案例

2.创建一个html文件进行一个简单的案例:

   Vue的基本操作及案例

3.Vue中基于属性、以及时间的绑定方式

   属性的话使用 ---------------> :属性名,如本案例中的<img   :src="img1">

       事件绑定的话使用-------------> @事件名=“vue对象中的事件函数名()”

Vue的基本操作及案例

4.使用v-for来循环遍历值

  Vue的基本操作及案例

5.条件展示:

  v-if

  v-else if

  v-else

 不存在的不展示,存在的使用格式加以控制使其不显示。

   Vue的基本操作及案例

6.v-show

 Vue的基本操作及案例

Vue的基本操作及案例

7.表单

  input框中绑定的值

Vue的基本操作及案例

Vue的基本操作及案例

也可以先给输入框设置默认值:

Vue的基本操作及案例

其前台页面展示如下图所示:

Vue的基本操作及案例

清空默认值,重新输入新值:

Vue的基本操作及案例

8.关于checkbox、、、、radio的:

  给多选框赋值的时候必须为数组

Vue的基本操作及案例

Vue的基本操作及案例

如果想设置默认值,直接在声明的cb的数组中加入值:

Vue的基本操作及案例

关于radio的:

Vue的基本操作及案例

相关文章: