vue.js介绍，常用指令，事件，以及制作简易留言版

一、vue是什么？

　　一个mvvm框架(库)、和angular类似，比较容易上手、小巧，让我们的代码更加专注于业务逻辑，而不是去关注DOM操作

二、vue和angular之间的区别

　　vue——简单易学

　　　　　　指令以v-xx

　　　　　　一片html代码配合上json，再new出来vue实例

　　　　　　个人维护项目

　　　　　　适合：移动端项目，小巧

　　angular——上手难

　　　　　　指令以ng-xxx

　　　　　　所有属性和方法都挂在$scope身上

　　　　　　angular由google维护

　　　　　　适合：pc端项目

　　共同点：不兼容低版本的IE

三、vue的基本使用

1、基本雏形

 1 
 2 "en">
 3 
 4     "UTF-8">
 5     
 6     
 7     
18 
19 
20     "box">
21         {{msg}}
22     
23 
24 

 运行结果：

2、常用指令

　　2.1v-model 一般表单元素(input) 双向数据绑定

　　

 1 
 2 "en">
 3 
 4     "UTF-8">
 5     
 6     
 7     
22 
23 
24 "box">
25     "text" v-model="msg">　　　　　　　　　　　　//当改变input的值时，下面{{msg}}的值也会改变同时下面的input也会同时改变
26     
27     "text" v-model="msg">　　　　　　　　　　
28     

29     {{msg}}
30     

31     {{msg2}}
32     

33     {{msg3}}
34     

35     {{arr}}
36     

37     {{json}}
38 
39 
40 

 

运行结果： 

 

 

2.2、循环：v-for="变量名 in 对象"

 1 
 2 "en">
 3 
 4     "UTF-8">
 5     "viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 6     "apple-mobile-web-app-capable" content="yes">
 7     "apple-mobile-web-app-status-bar-style" content="black">
 8     
 9     
10     
25 
26 
27 
28 
"box">
29     

30         
for="value in arr">
31             {{value}}   {{$index}}　　　　　　　　　　　　//循环遍历出arr数组的值和当前值的索引
32         
33     
34     

35     

36         
for="value in json">
37             {{value}}   {{$index}}  {{$key}}　　　　　　//循环遍历出json文件的值，索引以及当前值的键名
38         
39     
40 
41     

42     

43         
for="(k,v) in json">
44             {{k}}   {{v}}   {{$index}}  {{$key}}　　　　　　//一件键值对的形式进行便利
45         
46     
47 
48 
49 
50 

 

　　运行结果：

 

2.3、事件

　　2.3.1：v-on:click="函数"

　　v-on:click/mouseout/mouseover/dblclick/mousedown.....

　　

 1 
 2 "en">
 3 
 4     "UTF-8">
 5     
 6     
 7     
28 
29 
30 
"box">
31     "button" value="按钮" v-on:click="add()" >　　　　　　//事件
32     

33         
for="vaule in arr">
34             {{vaule}}
35         
36     
37 
38 
39 

 

运行结果：当点击按钮会添加一个tomato在数组里

 

 2.3.2：显示与隐藏：v-show="true/false"

 1 
 2 "en">
 3 
 4     "UTF-8">
 5     
 6     
 7     
24 
25 
26 
"box">
27     "button" value="按钮" v-on:click="a=false">　　　　　　　　　　　　　　　　　　　//点击之后将a的值变为false，设置为隐藏
28     
"width: 100px;height: 100px;background-color: red"  v-show='a' >　　　　　　//设置为显示
29 
30     
31 
32 
33 

 

 运行结果：点击按钮div消失

3、简易留言版：实现添加数据删除数据

  1 
  2 "en">
  3 
  4     "UTF-8">
  5     
  6     "stylesheet" href="lib/bootstrap.min.css">
  7 
  8     
  9     
 10     
 11     
 42 
 43 
 44 
class="container" id="box">
 45     
"form">
 46         
class="form-group">
 47             for="username">用户名：
 48             "text" id="username" v-model="username" class="form-control"  placeholder="输入姓名">
 49         
 50         
class="form-group">
 51             for="age">年 龄：
 52             "text" id="age" v-model="age" class="form-control" placeholder="输入年龄">
 53         
 54         
class="form-group">
 55             "button" value="添加" class="btn btn-primary" v-on:click="add()">　　　　　　//点击添加，触发add()函数，向数组添加数据
 56             "reset" value="重置" class="btn btn-danger">　　　　　　　　　　　　　　　　　　//将input框置为空
 57         
 58     
 59     

 60     class="table table-bordered table-hover">
 61 64 65 66 67 68 69 70class="text-center" v-for="item in myData">
 71 72 73 74 77 78 79"myData.length!=0">　　　　　　　　　　　　　　　　　　　　　　　　　　//如果数组的长度不等于零，”删除全部“显示出来
 80 85 86"myData.length==0">　　　　　　　　　　　　　　　　　　　　//如果数组长度等于零，”暂无数据“显示出来
 87 90 91
         
class="h2 text-info">
 62             用户信息表
 63         
         

             
class="text-center">序号
             
class="text-center">名字
             
class="text-center">年龄
             
class="text-center">操作
         
         
             
{{$index+1}}
             
{{item.name}}
             
{{item.age}}
             

 75                 class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex={{$index}}">删除//点击按钮触发模态框，将当前数组值的索引赋给nowIndex
 76             
         
 
         
             
"4" class="text-right">
 81                 class="btn btn-danger btn-sm"data-toggle="modal" data-target="#layer" v-on:click="nowIndex=-2">
 82                     删除全部
 83                 
 84             
         
         
             
"4" class="text-center text-muted" >
 88                 
暂无数据....
 89             
         
     
 92     
 93     
"dialog" class="modal" id="layer">　　　　　　　　　　//模态声明
 94 
 95         
class="modal-dialog">　　　　　　　　　　　　　　　　　　//窗口声明
 96             
class="modal-content">　　　　　　　　　　　　　　　//内容声明
 97                 
class="modal-header">　　　　　　　　　　　　　　//声明标题
 98                     "button" class="close" data-dismiss="modal">　　　　//data-dismiss表示点击X这个模态框消失
 99                         ×
100                     
101                     
class="modal-title">
102                         确认删除吗？
103                     
104                 
105                 
class="modal-body text-right">
106                     class="btn btn-primary btn-sm" data-dismiss="modal">取消　　　　　　//点击取消，模态框消失
107                     class="btn btn-danger btn-sm" data-dismiss="modal" v-on:click="deleteMsg(nowIndex)">确认　　//点击确定删除当前数据，并且模态框消失
108                 
109             
110         
111     
112 
113 
114 
115 

 

 

 运行结果：

 

转载于:https://www.cnblogs.com/15fj/p/8046137.html