vue的学习使用

最新推荐文章于 2024-08-27 09:28:13 发布

勤奋猪猪

最新推荐文章于 2024-08-27 09:28:13 发布

阅读量839

点赞数 21

文章标签： vue vue.js 前端框架

本文链接：https://blog.csdn.net/weixin_45634096/article/details/135366785

版权

Vue笔记

一、Vue 引言

1. VUE简介

读音：vue 读 vue 类似于 view（界面）

是一套用于构建用户界面的JavaScript框架。封装了原生的DOM操作，无需进行任何手动的DOM编码即可完成页面数据的渲染。

在这里插入图片描述

`渐进式` JavaScript 框架 – 摘自官网

渐进式

易用
有html css javascript基础，即可学习vue框架上手非常容易学习几乎0成本
高效开发前端页面非常高效
vue的体积小，压缩完只有20K的大小
超快的虚拟dom操作 js中非常多的dom操作， vue设计时虚拟dom非常快
设计时vue底层深度优化

灵活开发灵活多样性

总结：Vue 是一个javascript 框架 js 简化页面js操作

后端服务端开发人员:

Vue 渐进式javascript框架: 让我们通过操作很少的DOM，甚至不需要操作页面中任何DOM元素，就很容易的完成特别复杂的功能以及数据和视图绑定（双向绑定机制 MVVM)是完成前后端分离的技术

Vue 作者：尤雨溪

2. Vue的作用

HTML和CSS技术可以构建美观的页面，但是无法实现页面的交互性和页面特效。比如：校验表单并回显提示信息、轮播图等等。这些功能实现时无论技术细节上如何复杂，归根到底需要解决的核心问题如下：

回显数据到页面：比如在页面回显提示信息，需要回显提示信息到页面。
事件绑定：提供一些功能的触发入口，比如表单校验中需要为提交按钮的单击事件中执行
修改标签属性值：比如轮播图就需要不断修改img标签的src属性值

再复杂的问题都是以上3个问题的组合。上面的问题通过JS的原生DOM操作都可以完成，而Vue则能使得我们无需关注底层DOM操作，专注于业务数据操作，提高页面开发效率。

当然Vue在解决这些基本问题的同时，也提供了更多的功能，简化开发。下面就让我们开始学习Vue的具体语法。

二、Vue入门

1. 下载Vue.js

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2 Vue开发步骤

新建页面，并引入vue.js文件
定义一个用于回显数据的标签
准备要回显的数据
使用vue 绑定数据到视图标签

3 Vue第一个入门应用

新建页面，并引入vue.js

 <script src="js/vue.js"></script>

定义一个视图标签

<body>
    <div id="app"></div>
</body>

创建一个Vue实例

<body>
    <!--{{}}插值表达式，可以将vm对象的数据插入到视图中 -->
    <div id="app">
        <h1>{{msg}}</h1>
    </div>
    <script>
        const vm = new Vue({
            el:"#app",//通过选择器，用来给vue示例定义一个作用范围
            data:{//数据
                msg:"Hello VUE"
            }
        })
    </script>
</body>

案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue系列课程</title>
  <!--引入vue.js-->  
  <script src="js/vue.js"></script>
</head>
<body>
    <!--{{msg}}--><!-- 在作用vue示例范围之内获取不到数据 -->
    <div id="app">
        <span>{{msg}}</span>
        <div>{{msg}}<h3><p>{{msg}}<a href="">{{msg}}</a></p></h3></div>

        {{ msg }}  {{username}} {{pwd}}
        <br>
        <span>
            {{ username }}
            <h1>{{ msg }}</h1>
        </span>
        {{age++}}
    </div>
    <!--{{msg}}--><!-- 在作用vue示例范围之内获取不到数据 -->
    </body>
    
    <script>
        const app = new Vue({
            el:"#app",  //element 用来给Vue实例定义一个作用范围
            data:{      //用来给Vue实例定义一些相关数据
                msg:"百知欢迎你,期待你的加入!",
                username:"hello Vue!",
                pwd : "12345",
                age : 20
            },
        });
    </script>	
</html>

总结:

一个页面中只能存在一个Vue实例，不能创建多个vue实例
vue实例(对象)中el属性: 代表Vue的作用范围日后在Vue的作用范围内都可以使用Vue的语法
vue实例(对象)中data属性: 用来给Vue实例绑定一些相关数据，绑定的数据可以通过**{{变量名}}**在Vue作用范围内取出
在使用{{}}进行获取data中数据时，可以在{{}}中书写表达式，运算符，调用相关方法，以及逻辑运算等
el属性中可以书写任意的CSS选择器，但是在使用Vue开发时推荐使用 id选择器，因为一个vue实例只能作用于一个具体的作用范围，注意: el属性值不能指定body或html标签

4 复杂对象、数组

<body>
  <div id="app">
    <h4>{{user.id}}--{{user.name}}--{{user.age}}--{{user.sex}}--{{user.salary}}</h4>
    <h4>
        {{hobbies[0]}}--{{hobbies[1]}}--{{hobbies[2]}}--{{hobbies[3]}}--{{hobbies[4]}}
    </h4>
    <h4>
        {{users[0].id}}--{{users[0].name}}--{{users[0].age}}--
        {{users[0].sex}}-- {{users[0].salary}}
    </h4>
    <h4>
        {{users[1].id}}--{{users[1].name}}--{{users[1].age}}--
        {{users[1].sex}}-- {{users[1].salary}}
    </h4>
    <h4>
        {{users[2].id}}--{{users[2].name}}--{{users[2].age}}--
        {{users[2].sex}}-- {{users[2].salary}}
    </h4>
  </div>
</body>
</html>
<!-- 书写js代码 -->
<script>
  //创建vue实例
  new Vue({
    el:"#app", 
    data:{
      user:{id:1,name:"cpx",age:20,sex:true,salary:2000.0},
      hobbies:["吃饭","喝水","睡觉","游山","玩水"],
      users:[
        {id:1,name:"cpx",age:20,sex:true,salary:2000.0},
        {id:2,name:"zhang3",age:22,sex:false,salary:3000.0},
        {id:3,name:"li4",age:23,sex:true,salary:4000.0},
      ]
    }
  })
</script>

三、v-text和v-html

1 v-text

v-text：用来获取data中数据将数据以文本的形式渲染到指定标签内部

使用语法：哪个标签上需要数据就将v-text定义为此标签的属性，属性值为vue实例中的属性名

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue系列课程</title>
</head>
<body>
  <div id="app">
      <h3>{{msg}} hello vue {{msg}} hello js {{msg}}</h3>

      <!--
        {{}} 取值 和 v-text取值的区别
        1. {{}} 插值表达式 取值时不会将标签原始数据清空
           v-text取值时 先将标签原有数据清空 然后将数据填充在标签内部
        2. {{}} 插值表达式 存在插值闪烁  v-test不存在插值闪烁
      -->
      <h4 v-text="msg"></h4>
      <!-- v-text如果需要保留原有内容
      需要在标签内部再添加新的标签 在新标签内部指定v-text属性 -->
      <h4>呵呵 <span v-text="msg"></span></h4>
  </div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
  //创建vue实例
  let app = new Vue({
    el:"#app", //el:element  元素  代表vue实例的作用范围
    data:{
      msg:"hello cpx"
    }
  })
</script>

{{}}(插值表达式)和v-text获取数据的区别在于

使用v-text取值会将标签中原有的数据覆盖使用插值表达式的形式不会覆盖标签原有的数据
使用v-text可以避免在网络环境较差的情况下出现插值闪烁

如果不考虑插值闪烁的问题，推荐使用{{}} 插值表达式，更加灵活

2 v-html

v-html:用来获取data中数据将数据中含有的html标签先解析在渲染到指定标签的内部

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue系列课程</title>
</head>
<body>
  <div id="app">
      <h3>{{msg}} hello vue {{msg}} hello js {{msg}}</h3>
      
      <h4 v-text="msg"></h4>
      <h4>呵呵 <span v-text="msg"></span></h4>

      <!-- v-text不能解析 html标签 -->
      <h4 v-text="content"></h4>
      <!-- v-text可以解析 html标签 -->
      <h4 v-html="content"></h4>
  </div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
  //创建vue实例
  let app = new Vue({
    el:"#app", //el:element  元素  代表vue实例的作用范围
    data:{
      msg:"hello cpx",
      content:"<a href='https://www.baidu.com'>百度一下</a>"
    }
  })
</script>

v-text与v-html的区别

v-text 只能解析文本不能解析html标签
v-html 既能解析文本又能解析html标签

四、vue中事件绑定(v-on)

0. 事件绑定（event）

事件绑定: 每个标签都有各种各样的事件，我们可以为这些事件绑定回调函数。当网页中因为用户的行为触发了标签的某些事件（比如单击、双击）时，这些回调函数会自动执行。

事件模型的三要素

事件源、事件、监听器

事件源：发生特定动作的html
事件：发生特定动作单击事件、双击事件、鼠标移入事件
监听器：当标签上发生特定事件时处理的程序一般在js中为事件处理函数 function (){}

1. 常见事件

事件名称	含义	补充
click	单击事件	按钮常用
blur	当元素失去焦点事件	表单验证常用
focus	当元素获得焦点事件
change	当元素中的值改变后失去焦点事件	表单验证常用
submit	表单提交时事件，处理事件的函数应返回true或false，表示提交或不提交表单	作用于form标签

2 绑定事件基本语法

在对应标签上使用 v-on:事件名="事件处理函数名"

<div id="app">
    <标签名 v-on:js中事件名="事件处理函数名">vue中的事件处理方式</标签名>
  </div>
<script>
  let app = new Vue({
    el:"#app", //用来指定vue实例的作用范围
    data:{//用来给vue实例绑定数据
    },
    methods:{//用来给vue实例绑定函数
    }
  })
</script>

【案例一】

<div id="app">
    <h4>{{msg}}</h4>
    <!-- vue中的事件处理方式 -->
    <button type="button" v-on:click="test">vue中的事件处理方式</button>
</div>

<script src="js/vue.js"></script>
<script>
  //创建vue实例
  let app = new Vue({
    el:"#app", //用来指定vue实例的作用范围
    data:{//用来给vue实例绑定数据
      msg:"hello cpx"
    },
    methods:{//用来给vue实例绑定函数
        test:function(){
            alert("vue中的事件处理方式");
        }
    }
  })
</script>

vue中this的使用

【案例二】：点击改变data中的属性值并显示在页面

<div id="app">
    <h4>{{msg}}</h4>
    <h4>年龄为：{{age}}</h4>
    <button type="button" v-on:click="test">点击给年龄加1</button>
</div>

<script src="js/vue.js"></script>
<script>
  //创建vue实例
  let app = new Vue({
    el:"#app", //用来指定vue实例的作用范围
    data:{//用来给vue实例绑定数据
      msg:"hello cpx",
      age:20
    },
    methods:{//用来给vue实例绑定函数
        test:function(){
            //alert("vue中的事件处理方式");
            //console.log(age);//不能直接使用属性名 报错：找不到age属性
            //console.log(this);//this：指代的就是vue实例
            /*
            注意：理论上age是data的一个属性 data是vue实例的一个属性 
                 但vue直接将age和msg作为vue的属性
            */     
            //console.log(this.age); //获取data中的age属性
            //this.age = this.age+1;
            this.age++;
            //通过this还可以调用methods中定义的方法 test和test2方法也是作为vue的直接属性
            this.test2();//使用场景：页面增删改之后需要查询所有  调用方法
        },
        test2:function(){
            console.log("hehe");
        }
    }
  })
  console.log(app); //当前vue实例
</script>

总结:

在vue中绑定事件是通过v-on指令来完成的 v-on:事件名如 v-on:click
在v-on:事件名的赋值语句中是当前事件触发调用的函数名
在vue中事件的函数统一定义在Vue实例的methods属性中
在vue定义的事件中this指的就是当前的Vue实例，日后可以在事件中通过使用this获取Vue实例中相关数据调用methods中相关方法

3 Vue事件参数传递

案例：给年龄+1，给年龄+10

<div id="app">
    <h4>{{msg}}</h4>
    <h4>年龄为：{{age}}</h4>
    <button type="button" v-on:click="incrementAge">给年龄加1</button>
    <button type="button" v-on:click="changeAge">给年龄加10</button>
</div>

<script src="js/vue.js"></script>
<script>
  //创建vue实例
  let app = new Vue({
    el:"#app", //用来指定vue实例的作用范围
    data:{//用来给vue实例绑定数据
      msg:"hello ",  
      age:20
    },
    methods:{//用来给vue实例绑定函数
        incrementAge:function(){//给年龄+1
            this.age++;
        },
        changeAge:function(){//给年龄+10
            this.age+=10;
        }
    }
  })
</script>

存在问题：麻烦，解决：将增加的年龄以参数的方式传给函数

带有参数的函数

<div id="app">
    <h4>{{msg}}</h4>
    <h4>年龄为：{{age}}</h4>
    <button type="button" v-on:click="incrementAge">给年龄加1</button>
    <button type="button" v-on:click="changeAge1">给年龄加10</button>
    <button type="button" v-on:click="changeAge(10)">给年龄加任意数</button>
</div>

<script src="js/vue.js"></script>
<script>
  //创建vue实例
  let app = new Vue({
    el:"#app", //用来指定vue实例的作用范围
    data:{//用来给vue实例绑定数据
      msg:"hello ",
      age:20
    },
    methods:{//用来给vue实例绑定函数
        incrementAge:function(){
            this.age++;
        },
        changeAge1:function(){
            this.age+=10;
        },
        changeAge:function(age){
            this.age+=age;
        }
    }
  })
</script>

参数可以为多个

<div id="app">
    <h4>{{msg}}</h4>
    <h4>年龄为：{{age}}</h4>
    <button type="button" v-on:click="incrementAge">给年龄加1</button>
    <button type="button" v-on:click="changeAge1">给年龄加10</button>
    <button type="button" v-on:click="changeAge(10)">给年龄加任意数</button>
    <button type="button" v-on:click="changeAgeAndMsg(10,'cpx')">
        给年龄加任意数,同时msg不固定
    </button>
</div>

<script src="js/vue.js"></script>
<script>
  //创建vue实例
  let app = new Vue({
    el:"#app", //用来指定vue实例的作用范围
    data:{//用来给vue实例绑定数据
      msg:"hello ",
      age:20
    },
    methods:{//用来给vue实例绑定函数
        incrementAge:function(){
            this.age++;
        },
        changeAge1:function(){
            this.age+=10;
        },
        changeAge:function(age){
            this.age+=age;
        },
        changeAgeAndMsg:function(age,msg){
            this.age+=age;
            this.msg = "hello "+msg;
        }
    }
  })
</script>

存在问题：当参数为多个时比较麻烦，可以传递对象类型的参数

参数可以为对象

<div id="app">
    <h4>{{msg}}</h4>
    <h4>年龄为：{{age}}</h4>
    <button type="button" v-on:click="incrementAge">给年龄加1</button>
    <button type="button" v-on:click="changeAge1">给年龄加10</button>
    <button type="button" v-on:click="changeAge(10)">给年龄加任意数</button>
    <button type="button" v-on:click="changeAgeAndMsg(10,'cpx')">
        给年龄加任意数,同时msg不固定
    </button>
    <button type="button" v-on:click="changeObject({name:'cpx',age:10})">
        参数为object类型
    </button>
</div>
<script src="js/vue.js"></script>
<script>
  //创建vue实例
  let app = new Vue({
    el:"#app", //用来指定vue实例的作用范围
    data:{//用来给vue实例绑定数据
      msg:"hello ",
      age:20
    },
    methods:{//用来给vue实例绑定函数
        incrementAge:function(){
            this.age++;
        },
        changeAge1:function(){
            this.age+=10;
        },
        changeAge:function(age){
            this.age+=age;
        },
        changeAgeAndMsg:function(age,name){
            this.age+=age;
            this.msg = "hello "+name;
        },
        changeObject:function(param){
            this.msg="hello "+param.name;
            this.age+=param.age;
        }
    }
  })
</script>

总结

在使用事件时,可以直接在事件调用处给事件进行参数传递,在事件定义处通过定义对应变量接收传递的参数

使用场景

删除（传递id）和修改数据（传递对象）时传递数据

4 Vue中事件的简化语法

存在问题：每次绑定事件时都必须写上v-on:事件名=事件处理程序，麻烦

简化写法：v-on:替换成@ （vue2.x版本提出）

@事件名=事件处理程序

<div id="app">
    <h4>{{msg}}</h4>
    <h4>年龄为：{{age}}</h4>
    <button type="button" v-on:click="incrementAge">给年龄加1</button>
    <button type="button" @click="changeAge">给年龄减1</button>
    <button type="button" @click="changeParam(10)">加年龄</button>
</div>

<script src="js/vue.js"></script>
<script>
  //创建vue实例
  let app = new Vue({
    el:"#app", //用来指定vue实例的作用范围
    data:{//用来给vue实例绑定数据
      msg:"hello ",
      age:20
    },
    methods:{//用来给vue实例绑定函数
        incrementAge:function(){
            this.age++;
        },
        changeAge:function(){
            this.age--;
        },
        //对参数的使用没有影响
        changeParam:function(count){
            this.age+=count;
        }
    }
  })
</script>

4 Vue事件函数简化写法

存在问题：每次定义事件处理程序都必须写成函数名:function(){}，麻烦

简化写法： :function可以省略

methods:{
    函数名(参数表){

    }
}

【案例】

<div id="app">
    <h4>{{msg}}</h4>
    <h4>年龄为：{{age}}</h4>
    <button type="button" v-on:click="incrementAge">给年龄加1</button>
    <button type="button" @click="changeAge">给年龄减1</button>
    <button type="button" @click="changeParam1(10)">加年龄</button>
    <button type="button" @click="changeParam(20)">加年龄</button>
</div>

<script src="js/vue.js"></script>
<script>
  //创建vue实例
  let app = new Vue({
    el:"#app", //用来指定vue实例的作用范围
    data:{//用来给vue实例绑定数据
      msg:"hello ",
      age:20
    },
    methods:{//用来给vue实例绑定函数
        incrementAge:function(){
            this.age++;
        },
        changeAge:function(){
            this.age--;
        },
        //原始写法
        changeParam1:function(count){//对参数没有影响
            this.age+=count;
        },
        changeParam(count){
            this.age+=count;
        }
    }
  })
</script>

在Vue中事件定义存在两种写法

函数名:function(){}
函数名(){} 推荐

总结

在vue中绑定事件是通过v-on指令来完成的 v-on:事件名如 v-on:click
在v-on:事件名的赋值语句中是当前事件触发调用的函数名
在vue中事件的函数统一定义在Vue实例的methods属性中
在vue定义的事件中this指的就是当前的Vue实例，日后可以在事件中通过使用this获取Vue实例中相关数据以及调用methods中相关方法
在使用事件时，可以直接在事件调用处给事件传递参数，参数可以为单个参数、多个参数、对象类型
v-on: 可以被替换成@
Vue中事件中事件处理程序可以简化为：函数名(){}

五、v-show、v-if、v-bind

1. v-show和v-if的使用

v-show和v_if标签的作用

用来控制页面中标签展示及隐藏的

原有方式：展示标签写出来，不展示删掉

语法

<标签名 v-if="true|false|boolean类型的表达式" v-show="true|false|boolean类型的表达式"> 
    {{变量名}}  
</标签名>

<!--  
    true：展示标签   false：不展示标签 
    一般不会写死为true或false  而是写成boolean类型表达式
-->

1.1 v-show和v-if的使用

<div id="app">
    <h4>{{msg}}</h4>

    <h4 v-if="true">{{msg}}</h4>
    <h4 v-show="false">{{msg}}</h4>
    <h4 v-if="1==2">{{msg}}</h4>
    <!-- 交给data属性中的某个参数决定显示还是不显示 -->
    <h4 v-if="isShow">{{msg}}</h4>
    <h4 v-show="isShow">{{msg}}</h4>
    <!-- v-if后可以添加v-else -->
    <h4 v-if="isShow">isShow=true</h4>
    <h4 v-else>isShow=false</h4>
</div>

<script src="js/vue.js"></script>
<script>
  //创建vue实例
  let app = new Vue({
    el:"#app", //用来指定vue实例的作用范围
    data:{//用来给vue实例绑定数据
      msg:"hello ",
      isShow:true
    }
  })
</script>

1.2 v-show和v-if的区别

1. v_if 底层通过控制 dom树的元素节点实现（增加或删除操作）页面元素展示或隐藏

2. v_show 底层通过先创建此标签然后控制标签 css样式的 display属性实现页面原始展示或隐藏

1.3 v-show和v-if的选择

v-if有更高的切换开销，v-show有更高的渲染开销，因此，如果需要非常频繁的切换则使用v-show较好，而如果在运行时条件很少改变，则使用 v-if 较好。

【案例1】：隐藏和显示标签

<div id="app">
    <!-- 状态多变  使用v-show -->
    <h4 v-show="isShow">{{msg}}</h4>
    <button type="button" @click="showTag">用来隐藏标签</button>
    <button type="button" @click="hiddenTag">用来显示标签</button>
    <button type="button" @click="isShowOrHidden">切换标签</button>
    <!-- 对于事件处理程序足够简单可以直接将程序写在事件中 -->
    <button type="button" @click="isShow=!isShow">切换标签</button>
</div>

<script src="js/vue.js"></script>
<script>
  //创建vue实例
  let app = new Vue({
    el:"#app", //用来指定vue实例的作用范围
    data:{//用来给vue实例绑定数据
      msg:"hello ",
      isShow:false
    },
    methods:{
        showTag(){
            this.isShow=false;
        },
        hiddenTag(){
            this.isShow=true;
        },
        isShowOrHidden(){
           /*if(this.isShow){
                this.isShow=false;
            }else{
                this.isShow=true;
            }*/
            this.isShow=!this.isShow;
        }
    }
  })
</script>

【案例2】：鼠标移入 div消失

<div id="app">
    <h4>{{msg}}</h4>
    <!-- 状态多变 使用v-show -->
    <div style="width: 100px;height: 100px;background: red" v-show="isShow" 
         @mouseover="isShowOrHidden">
    </div>
    <div style="width: 100px;height: 100px;background: red" v-show="isShow" 
         @mouseover="isShow=!isShow">
    </div>
</div>

<script src="js/vue.js"></script>
<script>
  //创建vue实例
  let app = new Vue({
    el:"#app", //用来指定vue实例的作用范围
    data:{//用来给vue实例绑定数据
      msg:"hello ",
      isShow:true
    },
    methods:{
        isShowOrHidden() {
            this.isShow=!this.isShow;
        }
    }
  })
</script>

2 v-bind的使用

v-bind: 用来绑定标签的属性从而通过vue动态修改标签的属性

语法：

<标签名 v-bind:属性名="vue实例的属性值"></标签名>

2.1 v-bind的基本

【案例1】修改图片路径，鼠标移入改变图片，移除换回图片

<div id="app">
    <h4>{{msg}}</h4>
    <!--
         存在路径写死了 将来可能需要随时更换图片 在各种场景下使用不同的图片 通过v-bind解决
         将标签的某个属性交给vue管理 将来通过修改vue的属性达到动态修改图片的效果 
    -->
    <!--
        <img width="200px" 
        src="https://img2.baidu.com/it/u=862159221,1723036925
        &fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"/>
    -->
    <img v-bind:width="width" v-bind:height="height" v-bind:src="src"
         @mouseover="changeImage1" @mouseout="changeImage2"/>

    <button type="button" @click="changeImage1">更换图片</button>
    <button type="button" @click="changeImage2">换回图片</button>
</div>

<script src="js/vue.js"></script>
<script>
  //创建vue实例
  let app = new Vue({
    el:"#app", //用来指定vue实例的作用范围
    data:{//用来给vue实例绑定数据
      msg:"hello ",
      //虽然还是写死的路径  但是根据双向绑定的原理 将来通过修改属性的值改变图片路径
      src:"images/1.jpg",
      width:170,
      height:200,
    },
    methods:{
        changeImage1(){
            this.src = "images/2.jpg";
            this.width=200;
            this.height=160;
        },
        changeImage2(){
            this.src = "images/1.jpg";
            this.width=170;
            this.height=200;
        }
    }
  })
</script>

【案例2】：鼠标移入改变div颜色移除改回div颜色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue系列课程</title>
  <style>
      .d{
          width: 100px;
          height: 100px;
          border: 3px red solid;
          background: yellow;
      }
      .a{
          width: 100px;
          height: 100px;
          border: 3px red solid;
          background: blue;
      }
  </style>
</head>
<body>
  <div id="app">
      <h4>{{msg}}</h4>
      <!-- v-bind:将html标签属性绑定vue实例的属性
           通过修改vue实例中的属性达到动态修改html标签的属性效果
      -->
      <!--<div class="d"></div>-->
      <div v-bind:class="s" @mouseover="changeColor1" @mouseout="changeColor2"></div<br/>
      <div v-bind:class="s2?'d':'a'" @mouseover="changeColor3" @mouseout="changeColor4">
      </div><br/>    
      <button @click="changeColor1">点击修改div颜色</button>
      <button @click="changeColor2">点击换回div颜色</button>
  </div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
  //创建vue实例
  let app = new Vue({
    el:"#app", //用来指定vue实例的作用范围
    data:{//用来给vue实例绑定数据
      msg:"hello ",
      s:"d",//存在问题：加入将来样式属性名比较长 则修改起来比较麻烦
      s2:true,//解决问题：将属性值改为boolean类型 在v-bind:绑定中使用三目运算符
    },
    methods:{
        changeColor1(){
            this.s="a";
        },
        changeColor2(){
            this.s="d";
        },
        changeColor3(){
            this.s2=false;
        },
        changeColor4(){
            this.s2=true;
        }
    }
  })
</script>

注意：

v-bind：指令可以绑定任何的html标签的任何属性，包括路径、样式、宽度、高度等

2.2 v-bind 简化写法

vue为了方便我们日后绑定标签的属性提供了对属性绑定的简化写法如 v-bind:属性名 简化之后 :属性名

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue系列课程</title>
  <style>
      .d{
          width: 100px;
          height: 100px;
          border: 3px red solid;
          background: yellow;
      }
      .a{
          width: 100px;
          height: 100px;
          border: 3px red solid;
          background: blue;
      }
  </style>
</head>
<body>
  <div id="app">
      <h4>{{msg}}</h4>
      <div v-bind:class="s" @mouseover="s='a'" @mouseout="s='d'"></div><br/>
      <!-- vue2.x版本 对v-bind进行了简化 可以省略v-bind 直接使用:属性名="vue实例中的属性名" -->
      <div :class="s" @mouseover="s='a'" @mouseout="s='d'"></div><br/>
  </div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
  //创建vue实例
  let app = new Vue({
    el:"#app", //用来指定vue实例的作用范围
    data:{//用来给vue实例绑定数据
      msg:"hello ",
      s:"d"
    }
  })
</script>

六、v-for的使用

作用

v-for: 作用就是用来对vue中定义的数据进行遍历，可以遍历对象、数组（包括基本和对象类型的数组）

语法

直接在对应标签上加入v-for指令

v-for遍历对象

<标签名 v-for="(value,key,index) in vue实例的data属性中的哪个变量"></标签名>

<!-- value:属性值 key：属性名  index：下标  需要什么内容就设置什么内容  使用较少-->

v-for遍历数组

<标签名 v-for="(key,index) in vue实例的data属性中的哪个变量"></标签名>

<!-- key：元素变量名 随意  index：下标-->

v-for遍历对象类型的数组

<标签名 v-for="(item,index) in vue实例的data属性中的哪个变量" v-bind:key="唯一值"></标签名>

<!-- item：对象元素变量名 随意  index：下标  
     v-bind:key： 便于vue内部做重用和排序 程序员使用不到  简写为 :key 不加也可以 但是建议加上 须唯一
-->

【案例】

<<div id="app">
    <h4>{{msg}}</h4>
    <!-- v-for指令 作用：用于对vue中定义的数据进行变量 -->
    <!-- 存在问题：当属性比较多时 麻烦 -->
    <h4>{{user.id}}--{{user.name}}--{{user.age}}--{{user.salary}}</h4>

    <!-- 使用v-for对vue实例中的对象进行遍历
        v-for="(value,key,index) in data中的属性名"
        value:属性值  key:属性名 index:下标
    -->
    <span v-for="(value,key,index) in user">
        {{index}}--{{key}}--{{value}}<br/>
    </span>
    <hr/>

	<!-- 使用v-for对vue实例中的数组进行遍历
        v-for="(item,index) in data中的属性名"
        item：元素变量名,随意   index:下标
    -->
    <ul>
        <li v-for="(a,index) in hobbies">{{index+1}}-{{a}}</li>
    </ul>
    <hr/>

    <!-- 使用v-for对vue实例中的对象数组进行遍历
        v-for="(item,index) in data中的属性名" :key=""
        :key 便于vue内部做重用和排序
    -->
    <table border="1px" cellspacing="0" width="100%">
        <tr align="center">
            <td>序号</td>
            <td>编号</td>
            <td>名字</td>
            <td>年龄</td>
            <td>工资</td>
            <td>操作</td>
        </tr>
        <tr v-for="(user,index) in users" :key="user.id" align="center">
            <td>{{index+1}}</td>
            <td>{{user.id}} </td>
            <td>{{user.name}}</td>
            <td>{{user.age}}</td>
            <td>{{user.salary}}</td>
            <td><a href="">删除</a>|<a href="">修改</a></td>
        </tr>
    </table>
</div>

<script src="js/vue.js"></script>
<script>
  //创建vue实例
  let app = new Vue({
    el:"#app", //用来指定vue实例的作用范围
    data:{//用来给vue实例绑定数据
      msg:"hello ",
        user:{id:1,name:"cpx",age:20,salary:2000.0},
        hobbies:['吃饭','喝水','睡觉','玩'],
        users:[{id:1,name:"zhang3",age:20,salary:2000.0},
               {id:2,name:"li4",age:22,salary:3000.0},
               {id:3,name:"wang5",age:23,salary:4000.0}]
    }
  })
</script>

七、v-model 双向绑定

作用：类似于v-bind:指令

v-bind:作用：绑定用来将html标签的属性进行绑定，交给vue实例管理，除了value标签以外的所有属性

v-model作用：模型用来将html标签的value属性进行绑定，交给vue实例管理，和data中的数据保持一致，从而实现双向的数据绑定机制，主要用于表单元素。

model：模型一般指vue的date部分 view：视图 html标签

model层的数据改变导致view层的数据改变（单向绑定），view层的数据改变也可以导致model层的数据改变（双向绑定）

语法

<标签名 v-model="vue实例中的一个变量"></标签名>

<!-- 标签一般为表单元素 -->

目前v-model的可使用元素有：

input
radio
checkbox
select
textarea

【案例】

<div id="app">
    <h4>{{msg}}</h4>
    <input type="text" v-model="msg">
</div>

<script src="js/vue.js"></script>
<script>
  //创建vue实例
  let app = new Vue({
    el:"#app", //用来指定vue实例的作用范围
    data:{//用来给vue实例绑定数据
      msg:"hello ",
    }
  })
</script>

在这里插入图片描述

【案例2】：表单提交

<div id="app">
    <form action="">
        <!-- 双向绑定之后 不需要写name属性和value了 -->
        用户名：<input type="text" v-model="user.username"><br>
        密  码：<input type="text" v-model="user.password"><br>
        邮  箱：<input type="text" v-model="user.email"><br>
        手机号：<input type="text" v-model="user.phone"><br>
        性  别：<input type="text" v-model="user.sex"><br>
        性  别: <input type="radio" value="1" v-model="user.sex"> 男
        <input type="radio" value="0" v-model="user.sex"> 女 <br>
        生  日：<input type="text" v-model="user.bithday"><br>
        爱  好：<input type="checkbox" name="favorites" value="0" v-model="user.favorites"> 吃饭
        <input type="checkbox" name="favorites" value="1" v-model="user.favorites"> 睡觉
        <input type="checkbox" name="favorites" value="2" v-model="user.favorites"> 喝水
        <input type="checkbox" name="favorites" value="3" v-model="user.favorites"> 泡吧 <br>
        学历：<select name="education" v-model="user.education">
                <option value="0">小学</option>
                <option value="1">中学</option>
                <option value="2">大学</option>
                <option value="3">Java实习生</option> 
             </select> <br>
        个性签名： <textarea name="signature" v-model="user.signature" cols="30" rows="10"></textarea> <br>
        验证码：<input type="text" v-model="user.code"><br>
        <button type="button" @click="register">注册</button>
    </form>
    <hr>
    <button @click="updateUser">编辑用户信息</button>
    <button @click="getUser">获取用户信息</button>
</div>

<script src="js/vue.js"></script>
<script>
  //创建vue实例
  let app = new Vue({
    el:"#app", //用来指定vue实例的作用范围
    data:{//用来给vue实例绑定数据
        user:{}

    },
    methods:{
        register(){
            //获取表单提交的数据
            console.log(this.user);
            //发起异步请求
            //axios.post("/vue_day1/user/register","user="+this.user).then().catch();
        },
        updateUser(){
            this.user = {
                username:"chenpx",
                password:"123456",
                email:"chenpx@zparkhr.com.cn",
                phone:"15112345678",
                sex:1,
                birthday:"1995-12-13",
                favorites:[0,1,2,3],
                education:3,
                signature:"chenpx是个大好人"
            };
        },
        getUser(){
            console.log(this.user);
        }
    }
  })
</script>

总结

使用v-model指令可以实现数据的双向绑定
所谓双向绑定即表单中数据变化导致vue实例的data数据变化 vue实例中data数据的变化导致表单中数据变化称之为双向绑定

MVVM架构双向绑定机制

Model: 数据  Vue实例中绑定数据

VM:   ViewModel  监听器

View:  页面  页面展示的数据

【综合案例】

切换图片

<div id="app">
	<img src="images/0.jpg" width="1080px">
	<button @click="changeImg()">切图</button>
</div>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            index:0,
            src:"images/0.jpg"
        },
        methods:{
            changeImg(){
                this.index++;
        		if(index == 6){
                    this.index = 0;
                }
        		this.src= "images/"+(this.i)+".jpg";
            }
        }
    })
    
</script>

表格的操作

案例效果如下图所示：

在这里插入图片描述

要求：

使用v-for生成表单
并为删除超链接提供功能实现
为各个按钮提供功能实现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="vue-2.6.12.js"></script>
</head>
<body>
	<div id="app">

		<table border="1">
				<thead>
					<tr>
						<td>
							<input type="button" value="删除选中" @click="removeChecked">
						</td>
						<td>
							姓名
						</td>
						<td>
							年龄
						</td>
						<td>
							性别
						</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(u,index) in users" :key="u.id">
						<td>
							<input type="checkbox" name="id" id="" :value="u.id" v-model="checked">
						</td>
						<td>{{u.name}}</td>
						<td>{{u.age}}</td>
						<td>{{u.gender}}</td>
						<td>
							<a href="" @click.prevent="remove(u.id)">删除</a>
							<a href="">更新</a>
						</td>
					</tr>
					
					<tr>
						<td colspan="5">
							<input type="button" value="全选" @click="selectAll">
							<input type="button" value="全不选" @click="unselectAll">
							<input type="button" value="反选" @click="reverseSelect">
						</td>
					</tr>
				</tbody>
			</table>
			
		</div>

		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					users:[
                            {"id":1,"name": "小明", "age": 13, "gender": "男"},
                            {"id":2,"name": "小红", "age": 13, "gender": "女"},
                            {"id":3,"name": "小绿", "age": 4, "gender": "男"},
                            {"id":4,"name": "小翠", "age": 14, "gender": "女"}
                        ],
				  	checked:[1]
				},
				methods:{
					selectAll(){
						this.checked = this.users.map(u=>u.id);
					},
					unselectAll(){
						this.checked = [];
					},
					reverseSelect(){
						this.checked = this.users.map(u=>u.id).filter(id=>this.checked.indexOf(id)<0);
					},
					remove(id){
						// alert(index);
						let index = this.users.map(u=>u.id).indexOf(id);
						if(index < 0){
							return;
						}
						this.users.splice(index,1);
					},
					removeChecked(){
						for(let i = 0; i < this.checked.length;i++){
							this.remove(this.checked[i])
						}
					}
				}
			})
		</script>
</body>
</html>

备忘录案例

<div id="app">
    <!--
        1. 备忘录列表中数据交给vue管理
        2. 添加备忘录
        3. 删除备忘录
        4. 清空备忘录
        5. 备忘录总条数
    -->
    请输入内容：<input type="text" v-model="content"> 
              <button type="button" @click="addContent">添加到备忘录</button>
    <ul v-show="memoList.length!=0">
        <li v-for="(content,index) in memoList" :key="index">{{index+1}}. {{content}} 
            <a href="javascript:;" @click="deleteContent(index)">删除</a>
        </li>
    </ul>
    <ul v-show="memoList.length==0">
        <li><span style="color: red">暂时没有备忘录</span></li>
    </ul>
    <a v-show="memoList.length!=0" href="javascript:;" @click="memoList=[]">清空备忘录</a>

    <h4>当前备忘录共：{{memoList.length}} 条</h4>
</div>

<script src="js/vue.js"></script>
<script>
  //创建vue实例
  let app = new Vue({
    el:"#app", //用来指定vue实例的作用范围
    data:{//用来给vue实例绑定数据
        memoList:[//定义原始列表
                  "今天8点-17点一起玩",
                  "今天晚上一起吃大餐",
                  "今天晚上一起打游戏"
                 ],
        content:""

    },
    methods:{//用来给vue实例绑定函数
        //添加一条备忘录
        addContent(){
            //console.log(this.content);
            //如果内容为空 则不能添加
            if(!this.content){
                alert("请填入内容");
                return false;
            }
            this.memoList.push(this.content);
            this.content="";
        },
        deleteContent(index){
            //console.log(index);
            this.memoList.splice(index,1);//删除数组指定下标的元素 参数1：从哪删 参数2：删几个
        }
    }
  })
</script>

购物车案例

<div id="app">
    <h1>{{msg}}</h1>
    编号：<input type="text" v-model="goods.id">
    名称：<input type="text" v-model="goods.name">
    单价：<input type="text" v-model="goods.price">
    数量：<input type="text" v-model="goods.count">
    <button type="button" @click="addGoods">添加商品</button>
    <br/>
    <br/>
    <hr/>
    <br/>
    <br/>
    <br/>
    <table border="1" cellspacing="0" width="100%">
        <tr align="center">
            <th>编号</th>
            <th>商品名称</th>
            <th>商品单价</th>
            <th>商品数量</th>
            <th>小计</th>
        </tr>
        <tr align="center" v-for="(goods,index) in goodsList" :key="goods.id">
            <td>{{goods.id}}</td>
            <td>{{goods.name}}</td>
            <td>{{goods.price}}</td>
            <td>
                <button type="button" @click="reduceOne(index)">-</button> 
                	{{goods.count}} 
                <button type="button" @click="addOne(index)">+</button>
            </td>
            <!-- number.toFixed(n) 小数保留n位有效数字 -->
            <td>{{(goods.price*goods.count).toFixed(2)}}</td>
        </tr>
    </table>
    <h3>总价格：{{totalPrice()}}</h3>
</div>

<script src="js/vue.js"></script>
<script>
  //创建vue实例
  let app = new Vue({
    el:"#app", //用来指定vue实例的作用范围
    data:{//用来给vue实例绑定数据
        msg:"购物车案例",
        goodsList:[{id:1,name:"华为Meta 40",price:6999.9,count:1},
                   {id:2,name:"iphone14Pro max",price:8999.9,count:1}
                  ],
        goods:{}
    },
    methods:{//用来给vue实例绑定函数
        //减少一个商品
        reduceOne(index){
            if(this.goodsList[index].count==0){
                alert("数量不能少于0");
                return false;
            }else{
                this.goodsList[index].count--;
            }
        },
        //增加一个商品
        addOne(index){
            this.goodsList[index].count++;
        },
        //计算总价格
        totalPrice(){
            let totalPrice = 0;
            for (let i = 0; i < this.goodsList.length; i++) {
                totalPrice+=this.goodsList[i].price*this.goodsList[i].count;
            }
            return totalPrice.toFixed(2);
        },
        //添加商品
        addGoods(){
            if(!this.goods.id){alert("请输入编号！"); return false;}
            if(!this.goods.name){alert("请输入名称！"); return false;}
            if(!this.goods.price){alert("请输入价格！"); return false;}
            if(!this.goods.count){alert("请输入数量！"); return false;}
            if(!(this.goods.count>0)){alert("请输入正确数量！"); return false;}
            this.goodsList.push(this.goods);
        }
    }
  })
</script>

八、计算属性

在插值表达式中可以直接使用js表达式，这是非常方便的。但是如果表达式的内容很复杂，就会影响代码可读性，而且后期维护起来也不方便，在多个地方使用插值表达式计算结果效率偏低。

如购物车案例中：要统计多个商品的总价。(当前页面、订单结算等位置都需要展示)

解决：Vue中提供了计算属性，来替代复杂的表达式。

作用

给vue实例中完成相关业务计算工作，日后将某数据渲染页面时需多次业务处理后渲染可使用conputed

好处

提升vue的运行性能，使用computed进行计算处理后，会将第一次计算的结果进行缓存，便于页面多次使用

语法

new Vue({
	el:"#app",//用来指定vue实例的作用范围
    data:{ //用来给vue实例绑定数据
		
    },
    methods:{//用来给vue绑定函数
        
    },
    computed:{//用来给vue完成相关业务计算
        //定义计算的业务逻辑
    }
});

//使用：在需要的地方直接使用计算属性,注意：计算属性是属性,不是方法，不能加()
{{ 计算属性属性名 }}

购物车案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue系列课程</title>
</head>
<body>
  <div id="app">
      <h1>{{msg}}</h1>
      编号：<input type="text" v-model="goods.id">
      名称：<input type="text" v-model="goods.name">
      单价：<input type="text" v-model="goods.price">
      数量：<input type="text" v-model="goods.count">
      <button type="button" @click="addGoods">添加商品</button>
      <br/>
      <br/>
      <hr/>
      <br/>
      <br/>
      <br/>
      <table border="1" cellspacing="0" width="100%">
          <tr align="center">
              <th>编号</th>
              <th>商品名称</th>
              <th>商品单价</th>
              <th>商品数量</th>
              <th>小计</th>
          </tr>
          <tr align="center" v-for="(goods,index) in goodsList" :key="goods.id">
              <td>{{goods.id}}</td>
              <td>{{goods.name}}</td>
              <td>{{goods.price}}</td>
              <td>
                  <button type="button" @click="reduceOne(index)">-</button>
                  {{goods.count}} 
                  <button type="button" @click="addOne(index)">+</button></td>
              <!-- number.toFixed(n) 小数保留n位有效数字 -->
              <td>{{(goods.price*goods.count).toFixed(2)}}</td>
          </tr>
      </table>
      <h3>总价格：{{totalPrice2}}</h3>
      <h3>总价格：{{totalPrice2}}</h3>
      <h3>总价格：{{totalPrice2}}</h3>
      <h3>总价格：{{totalPrice2}}</h3>
  </div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
  //创建vue实例
  let app = new Vue({
    el:"#app", //用来指定vue实例的作用范围
    data:{//用来给vue实例绑定数据
        msg:"购物车案例",
        goodsList:[{id:1,name:"华为Meta 40",price:6999.9,count:1},
                   {id:2,name:"iphone14Pro max",price:8999.9,count:1}
                  ],
        goods:{}

    },
    methods:{//用来给vue实例绑定函数
        //减少一个商品
        reduceOne(index){
            if(this.goodsList[index].count==0){
                alert("数量不能少于0");
                return false;
            }else{
                this.goodsList[index].count--;
            }
        },
        //增加一个商品
        addOne(index){
            this.goodsList[index].count++;
        },
        //计算总价格
        totalPrice(){
            console.log("---------------------");
            let totalPrice = 0;
            for (let i = 0; i < this.goodsList.length; i++) {
                totalPrice+=this.goodsList[i].price*this.goodsList[i].count;
            }
            return totalPrice.toFixed(2);
        },
        //添加商品
        addGoods(){
            if(!this.goods.id){alert("请输入编号！"); return false;}
            if(!this.goods.name){alert("请输入名称！"); return false;}
            if(!this.goods.price){alert("请输入价格！"); return false;}
            if(!this.goods.count){alert("请输入数量！"); return false;}
            if(!(this.goods.count>0)){alert("请输入正确数量！"); return false;}
            this.goodsList.push(this.goods);
        }
    },
    computed:{//用来给vue完成相关的业务逻辑计算
        //计算总价格
        totalPrice2(){
            console.log("----------computed-----------");
            //调用写好的函数
            return this.totalPrice();
            /*
            //可以自己计算结果并返回
            console.log("----------computed-----------");
            let totalPrice = 0;
            for (let i = 0; i < this.goodsList.length; i++) {
                totalPrice+=this.goodsList[i].price*this.goodsList[i].count;
            }
            return totalPrice.toFixed(2);
            */
        }
    }
  })
</script>

九、事件修饰符

修饰符: 作用用来和事件连用,用来决定事件触发条件或者是阻止事件的触发机制

常见的事件修饰符

.stop 阻止事件冒泡用来阻止事件继续向外传递
.prevent 阻止标签的默认行为
.self 只监听自身标签触发的事件
.once 该事件只执行1次

语法

<标签名 @事件名事件修饰符=“”></标签名>

如: <div @click.stop="test"></div>

1 stop事件修饰符

用来阻止事件冒泡

<div id="app">
    <h3>{{ msg }}</h3>
    <button @click="test">点我</button><br/><br/>
    <!--
		事件修饰符：
			.stop       阻止事件冒泡  用来阻止事件继续向外传递
			.prevent    阻止标签的默认行为
			.self       只监听自身标签触发的事件
			.once      该事件只执行1次
    -->
    <h3>stop修饰符</h3>
    <div style="width: 200px;height: 200px;background: red" @click="parent">
        <div style="width: 100px;height: 100px;background: yellow" @click.stop="child">	
        </div>
    </div>
</div>

<script src="js/vue.js"></script>
<script>
  //创建vue实例
  let app = new Vue({
    el:"#app", //用来指定vue实例的作用范围
    data:{//用来给vue实例绑定数据
        msg:"事件修饰符",
    },
    methods:{//用来给vue实例绑定函数
      test(){
        console.log("test");
      },
      parent(){
        alert("parent");
      },
      child(){
        alert("child");
      }
    },
    computed:{//用来给vue完成相关的业务逻辑计算

    }
  })
</script>

2 prevent 事件修饰符

用来阻止标签的默认行为

<div id="app">
    <h3>prevent修饰符</h3>
    <a href="https://www.baidu.com" @click.prevent="test2">百度一下</a>
    <a href="javascript:void(0);" @click.prevent="test2">百度一下</a>
  </div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
  //创建vue实例
  let app = new Vue({
    el:"#app", //用来指定vue实例的作用范围
    data:{//用来给vue实例绑定数据
        msg:"事件修饰符",
    },
    methods:{//用来给vue实例绑定函数
      test2(){
        alert("test2");
      }
    }
  })
</script>

3 self 事件修饰符

用来针对于当前标签的事件触发 ===========> 只触发自己标签的上特定动作的事件只关心自己标签上触发的事件不监听事件冒泡

<div id="app">
    <h3>{{ msg }}</h3>
    <h3>self修饰符</h3>
    <!--只监听自己的事件 不监听其他的事件  其他事件传递过来的不监听-->
    <div style="width: 200px;height: 200px;background: red" @click.self="parent">
      <!-- 事件修饰符可以连用 没有先后顺序 -->
      <div style="width: 100px;height: 100px;background: gray" @click.stop.self="child">
        <div style="width: 50px;height: 50px;background: pink" @click="child2"></div>
      </div>
    </div>
</div>

<script src="js/vue.js"></script>
<script>
  //创建vue实例
  let app = new Vue({
    el:"#app", //用来指定vue实例的作用范围
    data:{//用来给vue实例绑定数据
        msg:"事件修饰符",
    },
    methods:{//用来给vue实例绑定函数
      parent(){
        alert("parent");
      },
      child(){
        alert("child");
      },
      child2(){
        alert("child2");
      }
    }
  })
</script>

4 once 事件修饰符

once 一次作用: 就是让指定事件只触发一次

<div id="app">
    <h3>{{ msg }}</h3>
    <h3>once修饰符</h3>
    <button @click.once="test">点我</button><br/><br/>
</div>

<script src="js/vue.js"></script>
<script>
  //创建vue实例
  let app = new Vue({
    el:"#app", //用来指定vue实例的作用范围
    data:{//用来给vue实例绑定数据
        msg:"事件修饰符",
    },
    methods:{//用来给vue实例绑定函数
      test(){
        console.log("test");
      }
    }
  })
</script>

十、Vue 生命周期

Vue 实例生命周期 ==> java 对象生命周期(初始化阶段运行阶段销毁阶段) 生命周期钩子 => 生命周期函数

Vue实例从创建到销毁过程中自动触发一些列函数 ====> Vue生命周期函数(钩子)

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue系列课程</title>
</head>
<body>
  <div id="app">
    <h3 id="h3">{{msg}}</h3>
    <input type="text" v-model="msg">
  </div>
</body>
</html>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
  /*
  在vue实例生命周期过程中官方提供一系列生命周期函数(钩子函数),
  这些生命周期函数最大的特点伴随着vue实例过程中自动触发
  vue生命周期阶段： 1. 初始化阶段  2. 运行阶段  3. 销毁阶段
  */
  let app = new Vue({
    el:"#app",//指定vue实例的作用范围
    data:{//指定vue实例的绑定数据
      msg:"vue的生命周期",
    },
    methods:{//指定vue实例的函数

    },
    computed:{//指定vue实例的计算属性

    },
    //初始化阶段4个函数
    beforeCreate(){//第一个生命周期函数  执行时仅仅完成自身内部事件和生命周期函数的注入
      //此时没有自定义的data、methods、computed
      console.log("beforeCreate: "+this.msg); /beforeCreate: undefined
    },
    created(){//第2生命周期函数  执行时完成自身内部事件和生命周期函数注入 包括自定义的data methods  compute等属性注入和校验工作
      此时才存在自定义的data、methods、computed,此时才存在数据
      console.log("beforeCreate: "+this.msg); //foreCreate: vue的生命周期
    },
    beforeMount(){//第三个生命周期函数  执行时 el对应html还是一个原始的模板  并没有完成数据的渲染工作
      let value = document.getElementById("h3").innerText;
      console.log("beforeMount:"+value);// beforeMount:{{msg}}
    },
    mounted(){//第四个生命周期函数  执行时 已经完成了template和el执行渲染工作
      let msg = document.getElementById("h3").innerText;
      console.log("beforeMount:"+msg);// beforeMount:vue的生命周期
    },
    //运行阶段：当数据发生变化时才会触发
    beforeUpdate(){//运行阶段第一个函数  执行时 data中的数据发生变化，页面中的数据还是原始数据
      console.log("beforeUpdate data:" + this.msg);//data中数据变为新的数据
      let msg = document.getElementById("h3").innerText;
      console.log("beforeUpdate view:" +msg);//页面上还是原始数据
    },
    updated(){//运行阶段第三个函数  执行时 data数据和页面数据保持一致
      console.log("Update data:" + this.msg);//data中数据变为新的数据
      let msg = document.getElementById("h3").innerText;
      console.log("update view:" +msg);//页面上也变为新数据
    },
    //销毁阶段
    beforeDestroy(){//销毁阶段的第一个函数 执行时  vue实例刚开始销毁
      console.log("beforeDestroy: 开始销毁");
    },
    destroyed(){//销毁阶段的第二个函数  执行时  vue实例全部销毁
      /*
      全部销毁后vue实例不再生效  双向绑定机制也会失效  在浏览器调用vue实例的$destroy()方法 
      如：app.$destroy()
      只是刷新浏览器  vue生命周期只会经历初始化阶段
      */
      console.log("destroyed: 全部销毁");
    }
  });
</script>

勤奋猪猪

关注

21
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
vue的学习使用

读音：vue 读 vue 类似于 view（界面）是一套用于构建用户界面的JavaScript框架。封装了原生的DOM操作，无需进行任何手动的DOM编码即可完成页面数据的渲染。HTML和CSS技术可以构建美观的页面，但是无法实现页面的交互性和页面特效。比如：校验表单并回显提示信息、轮播图等等。这些功能实现时无论技术细节上如何复杂，归根到底需要解决的核心问题如下：再复杂的问题都是以上3个问题的组合。上面的问题通过JS的原生DOM操作都可以完成，而Vue则能使得我们无需关注底层DOM操作，专注于业务数据操作
复制链接

扫一扫