VueJs的简单使用

一、VueJs的概述

1、什么是VueJs?

VueJs是【数据驱动】的【渐进式】前端框架。

               渐进式:1、可以只是用部分功能,而不用全部实现

2、与第三方很好的兼容

2、VueJs的模型  : MVVM 模型

M  model          模型 (数据)

V   view              视图   (页面)

VM  controller  控制   (控制数据到页面的流程)

               本质上就是【MVC】,分离数据与视图

二、VueJs的使用

1、创建vue对象
new Vue({
 //挂载,相当于Jquery的选择器 $("#app")
 el:"#app",
 //数据
 data:{},
 //定义方法
 methods:{}
});
2、插值表达式:
在页面上显示data中的数据,可以用插值表达式 {{message}}。
插值表达式中可以是: 三元表达式,基本运算符
如:{{istrue?"ok":"not ok"}} {{message+1}}
不是表达式如:if 、var n = 1

三、VueJs的指令集

1、v-on : 监听DOM事件
    (1)、v-on:click     鼠标点击事件
   (2)、v-on:keydown   键盘按下事件
   (3)、v-on:mouseover 鼠标悬浮事件
   (4)、事件修饰符      .stop .prevent .capture .self .once
   (5)、按键修饰符      .enter
   可以用@可以代替 v-on:
2、v-text 、v-html
v-text 以文本方式显示
v-html 以html方式显示,会解析标签
3、v-bind
因为插值表达式不能作用于html属性,所以需要时用v-bind 来渲染数据
4、v-model
双向绑定。可以给html赋值,也可以用html的值来修改vue的数据
5、v-for
循环。要循环谁,就写在那个标签里
6、v-if 、v-show
v-if   如果是false,标签都不会出现在dom里
v-show css的显示与否 ,dom中有标签

四、Vue的生命周期

框架提供的钩子方法(回调函数)
beforeCreate 创建前
created      创建后
beforeMount  挂载前
mounted      挂载后
beforeUpdate 更新前
upated       更新后
beforeDestroy销毁前
destroyed    销毁后

五、VueJs的ajax插件

axios插件
地址: https://github.com/axios/axios

六、查询数据库数据,显示在页面上

user.js

new Vue({
   el:"#app",
   data:{
       userlist:[],
       userinfo:{}
   },
   created: function(){
       this.findAll();
   },
   methods:{
       findAll:function(){
           var url = "/user/findAll";
           var _this = this;
           axios.get(url).then(
               function(result){
               console.log(result);
               _this.userlist = result.data;
           }).catch(function(err){
               console.log(err);
           });
       },
       findByUserId:function(userid){
           var url = "/user/findByUserId/"+userid;
           var _this = this;
           axios.get(url).then(
               function(result){
                   console.log(result);
                   _this.userinfo = result.data;
                   $("#myModal").modal("show");
               }).catch(function(err){
               console.log(err);
           });
       },
       updateUser:function(){
           var url = "/user/updateUser";
           var _this = this;
           axios.post(url,_this.userinfo).then(
               function(result){
                   console.log(result);
                   _this.findAll();
               }).catch(function(err){
               console.log(err);
           });
       }
   }
});
<tr v-for="user in userlist">
   <td><input name="ids" type="checkbox"></td>
   <td>{{user.id}}</td>
   <td>{{user.userName}}</td>
   <td>{{user.passWord}}</td>
</tr>

<input type="text" class="form-control" v-model="userinfo.id">

发表评论