vue

最新推荐文章于 2024-11-28 07:15:00 发布

517号刺猬

最新推荐文章于 2024-11-28 07:15:00 发布

阅读量210

点赞数

CC 4.0 BY-SA版权

分类专栏： vue.js

本文链接：https://blog.youkuaiyun.com/Lyj1010/article/details/82902301

vue.js 专栏收录该内容

4 篇文章

订阅专栏

本文深入解析Vue.js框架中的MVC与MVVM模式，探讨methods、computed属性及watch监听的功能与区别。通过实例演示组件定义、props传参、自定义指令的使用，以及数组操作技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

mvc: m:可以理解为data部分；v:{{ }}中的内容；c:new Vue({...})中的部分

mvvm: 模型->视图，视图->模型

methods:data中的任意值的变化，都会触发methods中的所有方法，无论有关无关，这样效率低。所以可以将一些方法放在computed中。

computed:计算属性，注意是属性，虽然在其中写的是方法，但是调用的时候和调用data中的方法一样，不用带“（）”。此时执行某些方法时，只会触发与之相关的数据。当方法或属性要依赖某些值的时候，要用computed而非methods。

watch:监听属性的变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script  type="text/javascript" src="vue.js"></script>
</head>
<body>
   <div id="vue1">
      <input type="text" v-model="one" >
      <input type="text" v-model="two">
      {{sum}}
   </div>
  <script type="text/javascript">
      var vue1=new Vue({
          el:"#vue1",
          data:{
              one:0,
              two:0,
              sum:0
          },
          // methods:{
          //     add:function () {
          //         return this.one*1+this.two*1;
          //     }
          // },
          // computed:{
          //     add:function(){
          //         return this.one*1+this.two*1;
          //     }
          // },
          watch:{
              //监听两个输入框的值，值改变的时候进行运算
              one(val,oldVal){
                  this.sum=val*1+this.two*1;
              },
              two(val,oldVal){
                  this.sum=val*1+this.one*1;
              }
          }

      });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script  type="text/javascript" src="vue.js"></script>
</head>
<body>
   <div id="vue1">
      <input type="text" v-model="message" v-on:keyup.enter="addData">
       <ul>
           <li v-for="i in arr">{{i.val}}</li>
       </ul>
   </div>
  <script type="text/javascript">
     var vue1=new Vue({
         el:"#vue1",
         data:{
             message:'',
             arr:[]
         },
         computed:{
             addData(){
                 this.arr.push({'val':this.message,isFinished:false});
                 this.message='';
             }
         }
     });
  </script>
</body>
</html>

定义组件，当需要某个功能时，直接可以使用定义的模板。

Vue.component({

template:·

//模板里的内容必须是一个父div中

·,

data(){ //data中在此要写成一个方法

return {

属性：属性值

}

});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script  type="text/javascript" src="vue.js"></script>
</head>
<body>
  <div id="div1">
      <demo></demo>
  </div>
  <script type="text/javascript">
      //在一个组件中，必须只能有一个父元素，即要在外围定义一个大的div容器
      Vue.component("demo",{
          template:`
           <div>
            <input type="text" v-model="message" v-on:keyup.enter="addMsg()">
            <ul>
              <li v-for="i in arr">{{i.msg}}</li>
            </ul>
            </div>` ,
          //data在组件中要写成方法
          data(){
              return{
                  message:"",
                  arr:[]
              }
          },
          methods:{
              addMsg(){
                  this.arr.push({msg:this.message,isFinished:false});
                  this.message="";
              }
          }
      });
      new Vue({
          el:'#div1'
      });
  </script>
</body>
</html>

props:传参数。父组件向子组件传值。

需求：根据传的参数不同，placeholder中显示不同的提示内容。

在某个属性前加“：”符号，它会把这段代码当作js来执行。会把后面的值当作变量。

如：“：text='aaa'”此时会把这句当作js来执行，并把aaa看作为变量。

“：”是“v-bind：”的简写。

组件向子组件传值方法:

父组件中定义一个自定义的属性，值为要传的参数。（属性名称最好不要写成大小峰和带“-”的）

在组件中定义props属性（是一个数组），数组中的值为之前定义的属性名。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script  type="text/javascript" src="vue.js"></script>
</head>
<body>
  <div id="div1">
      <demo  send="请输入学号"></demo>
  </div>
  <script type="text/javascript">
      //在一个组件中，必须只能有一个父元素，即要在外围定义一个大的div容器
      Vue.component("demo",{
          props:["send"],
          template:`
           <div>
            <input type="text" v-model="message" v-on:keyup.enter="addMsg()" :placeholder="send">
            <ul>
              <li v-for="i in arr">{{i.msg}}</li>
            </ul>
            </div>` ,
          //data在组件中要写成方法
          data(){
              return{
                  message:"",
                  arr:[]
              }
          },
          methods:{
              addMsg(){
                  this.arr.push({msg:this.message,isFinished:false});
                  this.message="";
              }
          }
      });
      new Vue({
          el:'#div1'
      });
  </script>
</body>
</html>

改进：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script  type="text/javascript" src="vue.js"></script>
</head>
<body>
  <div id="div1">
      <demo  :send="val"></demo> 
  </div>
  <script type="text/javascript">
      //在一个组件中，必须只能有一个父元素，即要在外围定义一个大的div容器
      Vue.component("demo",{
          props:["send"],
          template:`
           <div>
            <input type="text" v-model="message" v-on:keyup.enter="addMsg()" :placeholder="send">
            <ul>
              <li v-for="i in arr">{{i.msg}}</li>
            </ul>
            </div>` ,
          //data在组件中要写成方法
          data(){
              return{
                  message:"",
                  arr:[]
              }
          },
          methods:{
              addMsg(){
                  this.arr.push({msg:this.message,isFinished:false});
                  this.message="";
              }
          }
      });
      new Vue({
          el:'#div1',
          data:{
              val:"请输入学号！"
          }
      });
  </script>
</body>
</html>

指定props传值的数据类型：

// props:["send"],   使用数组，不限制参数传的数据类型。多个参数使用逗号隔开。
props:{  //设置参数的类型时用{}
   "send":[String,Number],  //多个之间使用数组。多个参数使用逗号隔开。
    "age":Number
},

自定义指令 Vue.directive("组件名",{...});

组件名不要用驼峰的形式。

Vue中所有的指令在使用的时候会加上“v-”符号。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script  type="text/javascript" src="vue.js"></script>
</head>
<body>
  <div id="div1">
      <demo  :send="val"></demo>
  </div>
  <script type="text/javascript">
      //自定义指令
      Vue.directive("focus",{
         inserted:function(el){  //a代表当前对象
             el.focus();
         }
      });


      //在一个组件中，必须只能有一个父元素，即要在外围定义一个大的div容器
      Vue.component("demo",{
          // props:["send"],
          props:{
             "send":[String,Number]
          },
          template:`
           <div>
            <input type="text" v-model="message" v-on:keyup.enter="addMsg()" :placeholder="send" v-focus>
            <ul>
              <li v-for="i in arr">{{i.msg}}</li>
            </ul>
            </div>` ,
          //data在组件中要写成方法
          data(){
              return{
                  message:"",
                  arr:[]
              }
          },
          //生命周期
          // mounted(){
          //    document.querySelector("input").focus();  //在页面渲染之前执行，否则会报错。
          // },
          methods:{
              addMsg(){
                  this.arr.push({msg:this.message,isFinished:false});
                  this.message="";
              }
          }
      });
      new Vue({
          el:'#div1',
          data:{
              val:"请输入学号！"
          }
      });
  </script>
</body>
</html>

数组删除某一项： this.arr.splice(k,1);

数组遍历：this.arr.forEach((val,key)=>{...});