Vue晋级 方法 this关键字 event事件 prevent stop keyup修饰符 计算属性 监听器 过滤器 全局组件 局部组件

1、vue中方法的使用

vue的方法除了可以相互调用，还可以直接在插值表达式中调用。

    <div id="app">
        <!--使用插件表达式调用函数-->
        <p>{{show()}}</p>
    </div>
<script>
    let vue=new Vue({
       el:"#app",//挂载点
       data(){
           return {
​
           }
       } ,methods:{
           //所有的函数都在此处创建
            show(){
                return "我是曹意，曹操是我的兄弟。";
            }
       }
    });
</script>

vue的方法中如果需要使用形参，可以使用[]表示要将哪个形参给方法中的某个代码块使用

    <div id="app">
        <!--使用插件表达式调用函数-->
        <p>{{show(0)}}</p>
    </div>
<script>
    let vue=new Vue({
       el:"#app",//挂载点
       data(){
           return {
​
           }
       } ,methods:{
           //所有的函数都在此处创建
            show(id){
                //根据id判断
                const aa={
                    0:'我是曹意',
                    1:'我是曹操',
                    2:'我是曹冲'
                }[id]; //将参数id的值，传递给aa使用
                return aa;
            }
       }
    });
</script>

2、this关键字

在vue的方法中要可以使用this关键字来调用已声明的方法，或data中的变量。

在方法中，this 指向该方法所属的组件。可以使用 this 访问 data 对象的属性和其它方法。

 

二、vue中的事件

1、事件

在vue中使用v-on指令为标签绑定事件

语法:
v-on:事件名="函数名"
​
示例：
    <div id="app">
        <button type="button" v-on:click="btnClick">我是按钮</button>
        <a href="javascript:void(0)" v-on:click="btnClick">我是超链接</a>
        <p>点击了:{{count}}次</p>
    </div>
<script>
    let vue=new Vue({
       el:"#app",//挂载点
       data(){
           return {
               count:0
           }
       } ,methods:{
            /**
             * 在事件中，事件绑定的方法有一个默认的参数
             * event参数表示当前事件的对象
             * event在绑定事件方法时不能有()否则报错
             */
            btnClick(event){
                //点击按钮次数+
                if(event.target.tagName=="BUTTON"){
                    this.count++;
                }
​
                //点击超链接次数-
                if(event.target.tagName=="A"){
                    this.count--;
                }
                this.count++;
            }
       }
    });
</script>

<font color=red>提示：事件有一个简写方式：@事件名="方法名"</font>

<button type="button" @click="btnClick">我是按钮</button>

2、事件的修饰符

事件的修饰符是用来配置事件的默认行为

• prevent【常用】

  让超链接不执行href跳转，只执行事件

  
   <a href="http://www.hao123.com" @click.prevent="acl">我是链接</a>

• stop【常用】

  stop是用来阻止事件冒泡的。

  
   <div id="dv1" @click.stop="d1">
              DV1
              <div id="dv2" @click.stop="d2">
                  DV2
                  <div id="dv3" @click.stop="d3">
                      DV3
                  </div>
              </div>
          </div>

• once

  如果想要只在第一次触发事件的时候触发事件监听器，可以使用 .once 修饰符

  
  <div id="dv1" @click.once="d1">

• capture

  如果想要使用捕获模式，可以使用 .capture 修饰符

​ 捕获模式是指事件会在传递到当前元素的下级元素前先出发，这和冒泡模式的事件传播顺序时相反的

• self

  如果只想监听（父）元素本身而不是它的子元素上触发的事件，可以使用 .self 修饰符

3、键盘修饰符

除了上述事件修饰符，还有一些按键修饰符。它们用在键盘事件上，只有在特定按键按下时才会触发事件。

    <div id="app" v-cloak>
​
        <form v-on:keyup="btnDown">
           <button type="button">我是按钮</button>
           <input type="text" v-model="tx">
        </form>
    </div>
<script>
    let vue=new Vue({
       el:"#app",//挂载点
       data(){
           return {
               tx:''
           }
       } ,methods:{
            btnDown(event){
               console.log(event.keyCode);
               //回车键
                if(event.keyCode==32){
                    alert("执行了按钮");
                }
                //esc键
                if(event.keyCode==27){
                   this.tx='';
                }
            }
       }
    });
</script>

 

三、vue计算属性

计算属性实际上是一个方法，只要条件改变会自动执行计算，计算属性不能在data中声明

语法：
computed:{
    areg(){  //计算属性
       return this.wh*this.he;
    }
}

计算属性可以被方法或插件表达式直接调用

    <div id="app">
        <p>
            宽:<input type="text" v-model="wh">
            高:<input type="text" v-model="he">
        </p>
        <p>结果是：{{areg}}</p>
    </div>
​
<script type="text/javascript">
    let vue=new Vue({
        el:"#app",
        data(){
            return {
                wh:0,
                he:0
            }
        },computed:{
            areg(){//计算属性
                return this.wh*this.he;
            }
        }
    })
</script>

 

四、监听器

监听器的作用和计算属性类似，监听器会监听指定的变量是否发生改变，如果发生改变自动执行预设的逻辑代码

• 基本写法

  
      <div id="app">
          <p>
              宽:<input type="text" v-model="wh">
              高:<input type="text" v-model="he">
          </p>
      </div>
  ​
  <script type="text/javascript">
      let vue=new Vue({
          el:"#app",
          data(){
              return {
                  wh:0,
                  he:0
              }
          },watch:{
              wh(){
                  alert("wh发生了改变");
              },he(){
                  alert("he发生了改变");
              }
          }
      })
  </script>

• 监听对象中指定的属性

  
      <div id="app">
          <p>
              姓名:<input type="text" v-model="user.uname">
              性别:<input type="text" v-model="user.sex">
          </p>
      </div>
  ​
  <script type="text/javascript">
      let vue=new Vue({
          el:"#app",
          data(){
              return {
                 user:{
                     uname:'',
                     sex:''
                 }
              }
          },watch:{
            'user.uname'(){
                alert("uname发生了改变");
            },'user.sex'(){
                  alert("sex发生了改变");
              }
          }
      })
  </script>

• 深度监听（监听对象或数组中的每个元素）

      <div id="app">
          <p>
              姓名:<input type="text" v-model="user.uname">
              性别:<input type="text" v-model="user.sex">
          </p>
      </div>
  ​
  <script type="text/javascript">
      let vue=new Vue({
          el:"#app",
          data(){
              return {
                 user:{
                     uname:'',
                     sex:''
                 }
              }
          },watch: {
              user:{
                  handler(us){
                      alert(us.uname+"  "+us.sex);
                  },deep:true  //深度监听，相当于递归
              }
          }
      })
  </script>

• 监听器参数

  当监听器的属性发生变化时，监听器会传入两个参数：所监听属性的当前值

  原来的旧值。

  
      <div id="app">
          <p>
              姓名:<input type="text" v-model="user.uname">
              性别:<input type="text" v-model="user.sex">
          </p>
      </div>
  ​
  <script type="text/javascript">
      let vue=new Vue({
          el:"#app",
          data(){
              return {
                 user:{
                     uname:'',
                     sex:''
                 }
              }
          },watch:{
              //参数一：改变后的值  参数二：改变前的值
            'user.uname'(val,oldVal){
                alert("改变前的值:"+oldVal+"\t"+"改变后的值:"+val);
            }
          }
      })
  </script>

五、过滤器

过滤器可以用来对显示数据的格式进行批量处理。

<font color=red>注意：过滤器『只可以』在插值表达式和 v-bind 指令中使用。通过管道符 | 调用过滤器</font>

<div id="app">
    <p>单价一：{{price1 | pricceTxt}}</p>
    <p>单价一：{{price2 | pricceTxt}}</p>
    <p>单价一：{{price3 | pricceTxt}}</p>
</div>
​
<script type="text/javascript">
    let vue = new Vue({
        el: "#app",
        data() {
            return {
                price1: 12345,
                price2: 23456,
                price3: 45678,
            }
        },filters:{//编写过滤器
            pricceTxt(value){
                return '￥'+(value/100).toFixed(2);
            }
        }
    })
</script>

<font color=red>提示：过滤器方法默认会将管道符左边的参数传到方法中</font>

 

六、VUE组件

<font color=red>在vue项目中，一般都是单页面项目(一个项目中只有一个html页面)</font>

什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。

vue中的组件分两种：全局组件，局部组件

 

<font color=red>重要提示：</font>

1、全局组件

全局组件定义好了以后，可以给多个vue实例进行调用

语法：
    <div id="app">
        <a href="">登录</a>
        <a href="">注册</a>
​
        <!--调用组件  标签的名称要和定义的全局组件名称一致-->
        <Login></Login>
    </div>
<script>
​
    //定义全局组件
    /**
     * 定义全局组件Login
     *   Login为组件的名称
     */
    Vue.component("Login",{
        /*组件中的模板，要显示的html内容*/
        template: '<div><p>帐号：<input type="text">' +
            '</p><p>密码:<input type="text"></p></div>'
    })
​
    //vue实例
    let vue=new Vue({
        el:"#app"
    });
​
</script>

<font color=red>提示：在vue中组件的名称都会识别为小写，如果组件名称为小驼峰，在调用组件时，组件标签的名称要以-隔开且全小写如下写法：</font>

 /**
     * 定义全局注册组件
     */
    Vue.component("regFrom",{
        template: '<h1>我是注册组件</h1>'
    })
​
<!--调用注册组件-->
<reg-from></reg-from>

• 注意事项:

  组件与组件之间，组件与挂载点之间的数据是完全独立的不会相互影响

  
      <div id="app">
          <a href="">登录</a>
          <a href="">注册</a>
  ​
          <!--调用组件  标签的名称要和定义的全局组件名称一致-->
          <Login></Login>
  ​
          <!--调用注册组件-->
          <reg-from></reg-from>
      </div>
  ​
  <script>
  ​
      //定义全局组件
      /**
       * 定义全局组件Login
       *   Login为组件的名称
       */
      Vue.component("Login",{
          /*组件中的模板，要显示的html内容*/
          template: '<div><p>帐号：<input type="text" v-model="account">' +
              '</p><p>密码:<input type="text" v-model="password"></p></div>',
          data(){
              return {
                  account:'',
                  password:''
              }
          },methods:{
              
          },created(){
              
          }
      })
  ​
      Vue.component("regFrom",{
          template: '<h1>我是注册组件</h1>'
      })
  ​
      //vue实例
      let vue=new Vue({
          el:"#app",
          data(){
              return {
  ​
              }
          }
      });
  </script>

上面编写模板的方式太麻烦，容易出错，可以使用template标签在html中定义好组件的模板，进行引用即可。

<font color=red>提示：template标签不能写在挂载点的里面，必须写在挂载点标签外面</font>

    <div id="app">
        <a href="">登录</a>
        <a href="">注册</a>
​
        <!--调用组件  标签的名称要和定义的全局组件名称一致-->
        <Login></Login>
    </div>
​
    <!--编写登录组件的模板-->
    <template id="lg">
        <div>
            <p>帐号：<input type="text" v-model="account">
            <p>密码:<input type="text" v-model="password"></p>
​
            <p>{{account}}  {{password}}</p>
        </div>
    </template>
<script>
​
    //定义全局组件
    /**
     * 定义全局组件Login
     *   Login为组件的名称
     */
    Vue.component("Login",{
        /*组件中的模板，要显示的html内容*/
        template:'#lg',
        data(){
            return {
                account:'',
                password:''
            }
        },methods:{
​
        },created(){
​
        }
    })
​
    //vue实例
    let vue=new Vue({
        el:"#app",
        data(){
            return {
​
            }
        }
    });
</script>

 

2、局部组件

• 写法一

  
      <div id="app">
          <a href="">登录</a>
          <a href="">注册</a>
  ​
          <!--调用组件-->
          <login></login>
      </div>
  ​
      <!--编写登录组件的模板-->
      <template id="lg">
          <div>
              <p>帐号：<input type="text" v-model="account">
              <p>密码:<input type="text" v-model="password"></p>
  ​
              <p>{{account}}  {{password}}</p>
          </div>
      </template>
  <script>
      //vue实例
      let vue=new Vue({
          el:"#app",
          data(){
              return {
  ​
              }
          },components:{
              //定义局部组件
              'login':{
                  template: '#lg',
                  data() {
                      return {
                          account:'',
                          password:''
                      };
                  }
              }
          }
      });
  </script>

• 写法二

• <div id="app">
  <a href="">登录</a>
  <a href="">注册</a>

  <!--调用组件-->
  <login></login>
  </div>

  <!--编写登录组件的模板-->
  <template id="lg">
  <div>
  <p>帐号：<input type="text" v-model="account">
  <p>密码:<input type="text" v-model="password"></p>

  <p>{{account}} {{password}}</p>
  </div>
  </template>
  <script>
  //定义局部组件
  const login={
  template: '#lg',
  data() {
  return {
  account:'',
  password:''
  };
  }
  }

  //vue实例
  let vue=new Vue({
  el:"#app",
  data(){
  return {
  }
  },components:{
  //注册局部组件
  login
  }
  });
  </script>