Vue.js核心概念与实践-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42886494/article/details/84593017

要点注意：首先要导VUE的js

标准案例： id要对应
<div id = "app"></div>

*********************************************************************************
点击事件：

   v-on:click="fun1('good')"



*********************************************************************************
键盘事件：(只能输入数字)

   v-on:keydown="fun2($event)"


   fun2:function(msg,event){
   if(!
   ((event.keyCode>=48&&event.keyCode<=57)||event.keyCode==8||event.keyCode==46)){
event.preventDefault();
           }
       }
   }
});
*********************************************************************************

阻止事件传播：这里一个div嵌套另一个div，
   鼠标放置在小的div上会触发大的div事件，这里的event.stopPropagation()就是停止事件传播
   各做各的（v-on:mouseover鼠标放置事件）
       <div id="app">
       <div v-on:mouseover="fun1" id="div">
       <textarea v-on:mouseover="fun2($event)">这是一个文件域</textarea>
   </div>
   </div>
<script>
   new Vue({
           el:'#app', //表示当前vue对象接管了div区域
           methods:{
           fun1:function(){
           alert("div");
       },
           fun2:function(event){
           alert("textarea");
           event.stopPropagation();//阻止冒泡
   }
   }
});
*********************************************************************************

事件修饰符：
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或
event.stopPropagation()。
Vue.js通过由点(.)表示的指令后缀来调用修饰符。
.stop
.prevent
.capture
.self
.once

按键修饰符：
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符例如 v-on:keydown.enter="fun()"
全部的按键别名：
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

********************************** v-text与v-html区别 ***********************************************
v-text与v-html区别：
   都是给div内赋值
   v-text不识别标签
   v-html 识别标签
   <div id="app">
       <div v-text="message"></div>
       <div v-html="message"></div>
</div>

**************************************** 插值问题 v-bind *****************************************

插值问题 v-bind:

       <div id="app">
           <font size="5" v-bind:color="ys1">xxx</font>
       <font size="5" :color="ys2">xxx</font>
       <hr>
       <a v-bind={href:"http://www.itcast.cn/index/"+id}>itcast</a>
       </div>
       <script>
               new Vue({
                       el:'#app', //表示当前vue对象接管了div区域
                       data:{
                           ys1:"red",
                           ys2:"green",
                               id:1
       }
});
</script>

**************************************** v-model(类似ng-model) *****************************************
v-model(类似ng-model)：

   姓名:<input type="text" id="username" v-model="user.username"><br>
   密码:<input type="password" id="password" v-model="user.password"><br>



   data:{
       user:{username:"",password:""}
   },

**************************************** v-for 遍历 *****************************************
       item：值
       index：索引
       操作数组：
       <li v-for="(item,index) in list">{{item+" "+index}}</li>


       data:{
               list:[1,2,3,4,5,6]
       }

       操作对象：
       <li v-for="(value,key) in product">{{key}}--{{value}}</li>
       data:{
           product:{id:1,pname:"电视机",price:6000}
           }

       操作对象数组：

       <tr v-for="p in products">
           <td>
               {{p.id}}
           </td>
           <td>
               {{p.pname}}
           </td>
           <td>
           {{p.price}}
           </td>
       </tr>

       data:{
               products:[{id:1,pname:"电视机",price:6000},{id:2,pname:"电冰箱",price:8000},
           {id:3,pname:"电风扇",price:600}]
           }

**************************************** v-if与v-show判断 *****************************************

       v-if是根据表达式的值来决定是否渲染元素
       v-show是根据表达式的值来切换元素的display css属性



       <span v-if="flag">xxxxx</span>
       <span v-show="flag">itcast</span>
       <button @click="toggle">切换</button>

       data:{
           flag:false
       },
       methods:{
               toggle:function(){

               this.flag=!this.flag;
       }
   }



**************************************** 异步请求axios 看user.js案例 *****************************************

   导入axios .js


   案例封装数据：
               var vue = new Vue({
                   el: "#app",
               data: {
               user: {id:"",username:"aaa",password:"",age:"",sex:"",email:""},
               userList: []
               },
   methods: {
           findAll: function () {
           var _this = this;
           axios.get("/vuejsDemo/user/findAll.do").then(function (response) {
           _this.userList = response.data;
           console.log(_this.userList);
           }).catch(function (err) {
           console.log(err);
           });
           },
       findById: function (userid) {
           var _this = this;
           axios.get("/vuejsDemo/user/findById.do", {
           params: {
           id: userid
       }
       }).then(function (response) {
           _this.user = response.data;
           $('#myModal').modal("show");
       }).catch(function (err) {
       });
       },
       update: function (user) {
       var _this = this;
       axios.post("/vuejsDemo/user/update.do",_this.user).then(function (response) {
       _this.findAll();
       }).catch(function (err) {
       });
       }
   },
       created(){
   this.findAll();
}
});