7Vue---------------Vue网页开发------------------全栈式开发48

一、Vue 介绍

• Vue 是一套用于构建前后端分离的框架。使用 vue 开发网页很简单，并且技术生态环境完善，是前后端找工作必备技能！

Vue 安装

• vue 的安装大体上分成三种方式
  • 1.通过 script 标签引用的
  • 2.通过 npm(node package manager) 来安装
  • 3.通过 vue_cli 命令来安装。
• 作为初学者，建议直接通过第一种方式来安装，把心思集中在 vue 的学习上，而不是安装上。

  '''
  1.通过 script 标签引用的
  '''
  # 开发环境，需要有网
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  # 或者是指定版本号，需要有网
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  # 或者是下载代码保存到本地，然后直接调用本地文件
  <script src="lib/vue.js"></script>
  # 生产环境，使用压缩后的文件
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
  

编译器

• VSCode：VSCode编写vue代码更好更适合

vue使用

• 要使用 Vue，首先需要创建一个 Vue 对象，对象可以传递 el 、data 、methods参数
• 创建Vue 对象：快捷键：打出vnew=>按tab创建–在<script>内才起效
• 一个页面可以有多个vue对象

  '''
  简单模板
  '''
      new Vue({
          el：'#app',
          data：{
               "username"："赞赞"
          },
          methods：{
              greet：function(){
                  return '晚上好！'+this.username
              }
          }
      });
  

（一）绑定模板 el

• el 参数全称是 element，用来找到一个给 vue 渲染的根本元素
• 绑定的就是页面element标签元素，绑定后，该vue作用的就是该标签元素
  • el:#app：绑定的是<div id=“app”></div>
  • el:.app：绑定的是<div class=“app”></div>

（二）值存储data

• data相当于python面对对象的类属性，用于储存值，方便绑定的element调用

调用data

• 1.标签之间的文本内容：{{变量或变量表达式}}
  • 变量是列表：可以索引，不能切片
  • 变量是字典：可以var1.key来获取value
• 2.标签内引用变量：要绑定v-xxx
  • 1.v-xxx:标签属性=‘变量或变量表达式’…，属性绑定变量
    • v-bind:placeholder=‘message’，单向绑定，改变data变量从而改变视图的标签的属性值
    • v-model=‘变量’，双向绑定，视图和data变量相通更新
  • 2.v-xxx=‘变量或变量表达式’，实现一些特殊功能
    • v-if=‘条件’，条件判断是否创建该标签
    • v-for=‘循环主体’，循环标签
    • v-show=‘变量’，是否隐藏便签
    • v-model=‘变量’/v-model:value=‘变量’，双向绑定

变量表达式

• 变量是列表：可以对其索引，不能切片
• 变量是字典：可以写var1.key获取value
• 可以对变量用函数、基本运算法则

更新视图的值

• 1.通过v-bind、v-model等绑定data变量
• 2.利用函数，可以直接改变data的值，从而改变视图的值
  • 主要针对的是列表和字典的内部，单值对象直接重新赋值就行如this.books=‘python’
    

列表方法	说明	使用举例
push	在列表末尾添加元素	this.books.push(‘python’)
unshift	在列表头部添加元素	this.books.unshift(‘python’)
shift	删除数组第一个	this.books.shift()
pop	删除数组最后一个	this.books.pop()
splice(索引,个数,值1,值2…)	支持多个添加、删除、替换。个数是指从索引开始往后数的个数。要只添加，个数就设为0，如果不为0就会替换；要删除，值为空	this.books.splice(0,0,‘R’)向第0个位置添加元素；this.books.splice(0, 2)删除2个元素；替换 this.books.splice(0, 1, ‘Python’)

Vue.set()

• 更新列表中的值
  • Vue.set(this.变量, 索引, 新值)
  • 如果索引超过本身列表大小，则直接在后面添加新值
  • 注意： this.books[0] = 'Python’不能更新视图，不支持
• 更新字典中的值
  • Vue.set(this.变量, key, value)
  • 如果key在字典中没有就会新创建
  • 注意：this.person.age = 18不能更新属性
    

（三）方法methods

• 添加 methods，这个属性中专门来存储自己的函数。methods 中的函数也可以在模板中使用，并且在 methods 中的函数来访问 data 中的值，只需要通过 this. 属性名就可以访问到了，不需要额外加 this.data. 属性名来访问。

   methods：{
       方法名：function(传参){
       	 if(条件){
       	 }else{
       	 }
  	     var 设置变量
  	     return  返回值
       }
   }    
  

方法调用

• 触发调用的方法一般是点击触发
  • <button v-on:click=‘方法名’ 单击触发
  • <button v-on:dbclick=‘方法名’ 双击触发
  • <button v-on:mouseover=‘方法名’ 鼠标悬停触发

添加event参数，传递标签信息

• 1.获取所在标签和标签属性，用于对标签、属性值的修改
  • 获取标签：event.target
  • 获取标签属性值：event.target.属性
• 2.修改跳转的url
  • 阻止原本url：event.preventDefault();
  • 跳转到新的url：window.location = ‘新的url’
    

（四）其他组成部分

• computed{}计算属性
• watch{}监听属性
• components{}局部组件
• 生命周期函数
• filters{}过滤器
  …

二、v-绑定语法

v-绑定功能

• 绑定只能绑定到双标签

v-绑定功能	作用
v-on	绑定事件方法，v-on:click=‘单击触发的函数’
v-bind	v-bind:标签属性=‘变量’ 用来绑定vue中的data变量；v-bind:class=或v-bind:type=‘绑定样式’、v-bind:key=‘变量’，触发重新渲染，这样就能保证整体元素保持一致
v-model	v-model:标签属性=‘变量’ 用来双向绑定vue中的data变量；
v-if	if条件判断，v-if=‘条件’
v-for	循环，v-for=‘循环主体’
v-html	显示原生html而不是文本
v-show	决定是否展示该标签，v-show=‘变量’

（一）v-if、v-show切换显示

v-if条件判断

• 1.标签elment
  • v-if=“条件1”
  • v-else-if=“条件2’”
  • v-else
• 2.判断的对象
  • 在vue的data里定义
    

v-show决定是否展示标签

• 决定是否展示标签
  

两者区别

• v-show多个标签都会创建，但是状态时隐藏的block:none，刚开始打开页面的时候就需要把所有的标签加载出来，所以初始的时候会比if要差
• v-if是在点击切换的时候重新创建加载，如果需要不断切换的，就会很消耗性能，这时候用v-show更好

（二）v-for循环

• v-for="(item, index) in 列表" -----括号可不加，(item, index) 个顺序位置对应着值，索引可以不加
• v-for="(value, key,index) in 字典" ----括号可不加，(value, key,index) 三个顺序位置对应着值，index,key可以不加
  

（三）v-bind单向绑定

• 单向绑定，能加data的信息传给view，从而实现视图的更新
  • 1.绑定标签属性
    • v-bind:标签属性=‘变量’ ，绑定vue中的变量
    • 如v-bind:class=或v-bind:type=‘标签样式’
  • 2.绑定特殊功能：
    • v-bind:key=‘变量’，触发重新渲染，这样就能保证整体元素保持一致
      • 运用：循环的状态跟随
        

（四）v-model双向绑定

双向绑定定义

• 双向绑定，能加data的信息传给view，从而实现视图的更新，将view的数据传给data，从而实现视图传入数据到data进行处理，数据同步
• v-model是v-model:value的缩写，如果标签是输入框类型的，v-model:value='变量‘，value就是输入值，等于的变量，就会随着输入值的变化而变化，vue里面的值也会跟着变化。
  • 1.绑定标签属性
    • v-model:标签属性=‘变量/函数名’ ，双向绑定vue中的变量
      • 如<input v-model:value=‘变量/函数名’ >让输入值传到vue里面里
  • 2.绑定特殊功能：
    
    

v-bind与v-model区别

• v-bind是一个单向数据绑定，映射关系：vue–>View，通过修改vue实现视图的更新，如果上面代码改成bind的话，输入框的值修改不会导致vue改变，所以h1标签的值一直是canfoo。
• v-model是一个双向数据绑定，映射关系：vue<–>View，即View接受的数据,传给vue,data的数据再传给View

修饰符

• .lazy ：
  • v-model:value.lazy
  • 数据不同步，当view中修改完后，鼠标离开并点击其他地方的时候，data数据更新。
• .number ：
  • v-model:value.number
  • 自动将用户的输入值转为数值类型，还会自动去空格
  • 这通常很有用，因为即使在 type=“number” 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。
• .trim ：
  • v-model:value.trim
  • 自动过滤用户输入的首尾空白字符
    

（五）v-on绑定事件

• v-on:click='方法’或者@click=‘方法’ ，通过点击等行为触发函数执行
• 具体的实现步骤参考button讲解

三、知识补充

标签

• tr标签是行，td标签是列，需要再table标签下
• a超链接标签
• br是单标签，作用是换行
• span不会换行

函数

• alter(提示内容)弹出框
• .split(" “).reverse().join(” ")}
• console.log()打印的效果，打印的结果在页面的console控制台查看
• sort排序，sort内部排序规则，是两两比较，冒泡排序
• 把json对象转化为字典var book = JSON.parse(JSON.stringify(this.add_book))

  			// 区别元素元素key没有加引号是json
              add_book: {
                  name: "",
                  author: "",
                  price: 0
              },
  

• setTimeout(函数,毫秒) 调用匿名函数，可以直接定义匿名函数
  • 如setTimeout(function(){},1000) 每隔1秒执行匿名函数

关键字

• let 对象 = {} — 定义对象
• if(条件){}else{} ---- 条件判断
• var 变量 = ---- 定义变量

三元运算符

• 语法：条件语句?语句1:语句2
• 含义：如果条件语句为真，则返回语句1，否则返回语句2
  

符号

• $遍历对象的属性，如this.$data，

bootstrap引用好看样式

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"

四、特殊标签

（一）button按钮

普通按钮

• <button >这是按钮</button>
• 可以点击，但是没有绑定方法所以不会有任何变化
  

添加超链接

# 添加a标签
<button>
        <a href="https://www.baidu.com/" >百度一下</a>
</button>
# 直接添加
<button href="https://www.baidu.com/">百度一下</button>

绑定事件v-on:click

• v-on:click='方法’或者@click=‘方法’
• click是单击，意味着单击按钮就会触发方法。还可以换成双击dbclick、鼠标悬停mouseover就是鼠标滑过就会触发方法。
• 方法是绑定vue对象里面的方法，可以实现多种功能
  

如何在点击事务时候，输入框会自动清空

• 双向绑定的时候，输入框的value，点击事务触发的函数让属性值设置为空，这样点击查询后，输入框就会为空

@click.prevent

• 项目中有一个自己封装的组件库，因此所有的样式都统一集成，遇到特殊情况想引入特殊UI风格处理时，部分组件需要样式重调，因此用到@click.prevent
• @click.prevent函数会阻止触发dom的原始事件，而去执行特定的事件
• 运用场景：对于循环中要用到的变量，并没有绑定，如果变量更新，通过click触发，如果普通点击页面不会显示变化，@click.prevent就可以实现显示变化，例子参考案例实现-----图书管理系统

（二）输入框

注意：

• 输入框一般会绑定，单向绑定实现输入框的隐藏文字是可变动的，双向绑定实现输入的值可以传给data，实现查询选择等功能

input

input标签的特性属性

• <input placeholder=“文字” > placeholder指定输入框的默认文字
  
• <input type=“checkbox” >多选，要绑定v-model才有实现意义
• <input type=“radio” >单选，要绑定v-model才才有实现意义

单向绑定v-bind

• <input v-bind:placeholder=“变量”>这里是vue是的data变量，绑定就能默认文字变成变量，可以对其改变，不绑定就是固定的字符串
  

双向绑定v-model

• 多选type="checkbox"
  • <input type=“checkbox” value=“言冰云” v-model=‘checkname’>
    
• 单选type="radio"
  • <input type=“radio” value=“男” name=“m” v-model=‘gender’>

输入框会自动清空

• 实际运用场景，在输入框完成查询后自动将输入框的文字清空
• 实现逻辑：在查询事件函数里面添加输入框绑定的值重新取值为空即可

textarea

• 多行文本输入框，输入没有限制，也有placeholder指定输入框的默认文字
• <textarea cols=“30” rows=“10” v-model=‘message’>可结合v-model双向绑定使用
  

（三）select下拉框

	'''
	简单模板
	'''
    <div id="app">
        <select v-model='selected'>
            <option value="" disabled>请选择</option>
            <option value="A">A</option>
            <option value="B">B1</option>
            <option value="C">C1</option>
            <option value="D">D</option>
        </select>
        {{selected}}
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                selected: ''
            }    
        })
    </script> 

（四）table表格

定义

• 在table标签里定义
  • <tr>规定一行
  • <td>单个元素

  '''
  简单模板
  '''
  <table>
              <tr>
                  <td>字段1</td>    
                  <td>字段2</td>
                  <td>字段3</td>
              </tr>
            <!-- 循环里面的值 举例 -->
            <tr v-for="(book, index) in books">
                  <td>{{ index+1 }}</td>
                  <td>{{book.title}}</td>
                  <td>{{book.author}}</td>
              </tr>
  </table>
  

五、特性标签属性

补充

• placeholder输入框的默认文字

（一）class、type样式属性

• 样式属性，不仅仅是改变了属性值，而是将属性值所具备的样式赋值给标签的文本或行
• style、class方法不互通，直接把class代码换成style或者style代码换成class都无法正常显示

	class	style
1.非变量的字符串	不支持	style="font-size:30px;"样式；type="checkbox"多选type=“radio” 单选
2.字符串变量，加了绑定	v-bind:class=“classname”	v-bind:style=“pstyle”
3.[]列表变量	v-bind:class="[classfont,classcolor]"	v-bind:style="[listyle1,listyle2]"
4.{}字典变量	v-bind:class="{pclass1:classfont,pclass2:classcolor}"	v-bind:style="{backgroundColor:color,fontSize:size}"

class

• 1.普通字符串：
  • 【1】标签element元素添加：v-bind:class=“classname”
  • 【2】vue的data：classname:“pclass” 这里classname不能直接定义样式，而是赋值样式
  • 【3】 <head> <style>标签下定义样式：.pclass{font-size:30px;}注意分号结尾代表语句的结束。这里不能允许驼峰命名
• 2.[]列表：
  • 【1】标签element元素添加：v-bind:class="[classfont,classcolor]"
  • 【2】vue的data：classfont:“pclass” 这里cclassfont不能直接定义样式，而是赋值样式
  • 【3】 <head> <style>标签下定义样式：.pclass{font-size:30px;}
• 3.{}字典
  • 【1】标签element元素添加：v-bind:class="{pclass1:classfont,pclass2:classcolor}"
  • 【2】vue的data：classfont:true 这里classfont的true或false是定义是否按这种样式
  • 【3】 <head> <style>标签下定义样式：.pclass1{font-size:30px;}
    

style

• 1.普通字符串，非变量：
  • style=“background-color: purple;font-size:30px;”
  • type="checkbox"多选样式type=“radio” 单选样式
• 绑定变量
  • 1.字符串变量：
    • 【1】标签element元素添加：v-bind:style=“pstyle” 注意style="display:block"显示文本 display:none不显示
    • 【2】vue的data：pstyle:{fontSize: ‘30px’}
  • 2.[]列表：
    • 【1】标签element元素添加：v-bind:style="[listyle1,listyle2]"
    • 【2】vue的data：listyle1:{fontSize: ‘30px’} , listyle2:{backgroundColor: ‘red’}
  • 3.{}字典
    • 【1】标签element元素添加：v-bind:style="{backgroundColor:color,fontSize:size}"
    • 【2】vue的data：color:‘pink’, size:“30px”
      

样式名称

• 颜色：background-color是文本背景颜色，设置的是整行的颜色，color是文本颜色
• 位置：宽度 width:200px 、高度 height:200px 、 文字样式居中 text-align:center、文字高度200 line-height:200px
• 大小：font-size字体大小
• input标签里，type="checkbox"多选样式type=“radio” 单选样式

（二）computed类—定义计算属性函数

引入

• 一般情况下属性都是放到 data 中的，但是有些属性可能是需要经过一些逻辑计算后才能得出来，那么我们可以把这类属性变成计算属性。

computed

• computed把需要计算、需要处理的属性变成计算属性。计算属性不是指单单计算，可以自定义函数
• computed{}是一类对象，同data并列的，computed{ 在这里定义这个属性的计算函数 }
• 标签里，该属性一般也是双向绑定，这样就可通过输入值，得到结果

案例1：自动计算面积

案例2：自动填补省份信息

（三）watch类—定义监听属性函数

• 监听属性可以针对某个属性进行监听，只要这个属性的值发生改变了，那么就会执行相应的函数。
  

（四）key触发重新渲染

v-bind:key循环状态保持

• v-bind:key=‘绑定对象’，绑定对象必须是整型或字符串类型
• 在改变渲染出来的DOM结构时，会触发重新渲染，这样就能保证整体元素保持一致，不保留缓存，让它重新再来渲染一边
• 如果循环对象是里面元素仍是字典例如：[ { id: 2, }, { id: 1, }, { id: 3, } ]，绑定的时候最好加上id，有利于提高性能如<li v-for="(item, index) in items" class=“animate” v-bind:key=“item.id”>
  
  

六、vue高级

（一）组件

引入

• 有时候有一组 html结构 的代码，并且这个上面可能还 绑定了事件。然后这段代码可能 有多个地方 都被使用到了，如果都是拷贝来拷贝去，很多代码都是重复的，包括事件部分的代码都是重复的。那么这时候我们就可以把这些代码封装成一个组件，以后在使用的时候就跟使用普通的html元素一样，拿过来用就可以了。

组件特点

• 遵守一套标准
• 可重复使用
• 可组合，组件之间可以相互引用

组件创建问题

• 全局组件必须写在Vue实例创建之前
• 组件的命名方式：短横线、驼峰。组件引用的组件名是驼峰要改成小写
• 模板如果超过一个标签元素就必须放到单一根节点里面，有且只有一个唯一的根元素
• data是一个函数

组件引用问题

• 每个组件不会相互影响，组件只能引用，组件内部可引用别的组件，大写都可以
• 引用的时候可以在标签内添加组件的元素，但是在标签之间添加的都会无效，无论是元素或文本，要添加插槽才可以显示

Vue.component()全局组件

• 全局组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。
• 新建一个Vue.component(‘组件名’，{构造器}）

  	'''
  	引用组件
  	'''
  	<div id="app">
   		<hello-world></hello-world>
      </div>
      '''
      组件创建
  	template： 定义组件模板，指定了组件要展示的HTML结构。`实现换行，div：超过一个标签就要用单一根节点，
  	data： return{}这里是用来定义变量的，但是定义在函数类型的data里面的，与这里与vue对象不同
  	methods：定义函数
  	'''
  	<script>
          Vue.component('helloWorld',{
          	props: ['books', 'name'],
              template:`
                  <div>
                      {{hello}}
                      <Button @click='hi'>点击</Button>
                  </div>
  
              `,
              data:function(){
                  return{
                      hello:'hello world'
                  }
              },
              methods:{
                  hi:function(){
                      alert(1)
                  }
              }
          })
  

components:{}局部组件

• components:{‘组件名’：构造器，…} 定义在vue对象里面

  • 第一种：先定义该组件的构造器，再在components 中使用构造器

  	<div id="app">
   		<hello-world></hello-world>
      </div>
      <script>
  	#let 定义名称的不能出现-，可以采取驼峰命名法
      let HelloWorld = {
          template:'<div>{{hello}}</div>',
          data:function(){
              return{
                  hello:'hello world'
              }
          }   
      }
      # 不能加，
      new Vue({
          el: '#app',
          data: {
          },
          #局部组件
          components:{
              'hello-world':HelloWorld
          }
      })
      </script> 
  

  • 第二种：直接定义构造器

  <div id="app">
      <hello-world></hello-world>
  </div>
  <script>
      new Vue({
          el: '#app',
          data: {
          },
          components:{
              'hello-world':{
           	    template:'<div>{{hello}}</div>',
              	data:function(){
     		        	return{
                      	hello:'hello world'
                  	}
              	}
          	}
  		}
  	})    
  </script>
  

子组件与父组件的通信

父组件变量传给子组件----------给组件添加属性

• props: [‘books’, ‘name’] 其中books与name是定义在父组件的标签里的属性
• 就是把引用标签的变量传到组件里面使用，传参的作用
• 可以实现给组件传参的作用，实现组件的可复用性
  

子组件事件传给父组件

• 子组件中添加事件跟之前的方式是一样的，然后如果发生某个事件后想要通知父组件，那么可以用this.$emit函数来实现
• 定义在子组件方法里面的，this.$emit(‘父组件方法名-不能用驼峰’,子组件的参数)
• 作用：当子组件触发函数后，我们想通知、改变父组件的，让页面显示变化，实现一些功能
  

自定义组件v-model行为

• 如何实现子组件的视图改变，通过双向绑定，父组件vue的值也改变

  <div id="app">
      <stepper v-model:value='goods_count'></stepper>
      <p>{{ goods_count }}</p>
  </div>
  <script>
      Vue.component('stepper', {
          props: ['count'],
          model: {
      	  	//	绑定的变量
              prop: "count",
              // 什么情况下触发这个v-model行为
              event: 'count-changed'
          },
          template: `
              <div>
                  <button @click='sub'>-</button>
                  <span>{{ count }}</span>    
                  <button @click='add'>+</button>
              </div>
          `,
          methods: {
              sub:function(){
                  // return this.count -= 1 这样并不会通知父组件改变，需要emit
                  this.$emit("count-changed", this.count-1)
              },
              add:function(){
                  // return this.count += 1
                  this.$emit("count-changed", this.count+1)
              }
          }
      })
      new Vue({
          el: '#app',
          data: {
              'goods_count': 0
          },         
      })
  </script>
  

插槽

• 实现父组件引用子组件的时，标签之间可以自定义添加元素或文本

特点

• 自定义添加元素或文本如果是组件里的是不会显示的
• 插槽放到哪个子组件标签下就会显示定义的文本或元素，并且会继承子组件标签的绑定的属性
• <slot></slot>格式固定，中间插入元素是不会显示的，绑定的元素只会父组件定义的
  

（二）生命周期函数

• 生命周期函数代表的是 Vue 实例，或者是 Vue 组件，在网页中各个生命阶段所执行的函数。生命周期函数可以分为创建阶段和运行期间以及销毁期间。
• 知道函数的意义就可以干涉各个阶段，实现一些功能
  • 创建期间：beforeCreate 、created 、beforeMount 、mounted ；
  • 运行期间： beforeUpdate 、updated ；
  • 销毁期间：beforeDestroy 、destroyed。
    

1.创建期间

beforeCreate：

• Vue 或者组件刚刚实例化，这是组件创建期间的第一个生命周期函数
• el、data 、methods 、局部组件都还没有被创建，此时还不能访问到实例里面的data数据。
  

created：

• 在实例创建完成之后，此时data 、methods已经被初始化好了，可以使用了。
• el、组件还没有被初始化。即模板还没有被编译。

beforeMount：

• 即模板已经被编译了。
• 但模板并没有被挂在、渲染到到网页中。
• 页面中的元素还没真正的被替换过来，只是之前写的一些模板字符串，也就是说，页面还是旧的
  

mounted：

• 模板代码已经被加载到网页中了。此时创建期间所有事情都已经准备好了，网页开始运行了。
• 内存中的模板已经真实的挂载到了浏览器页面中去，用户已经可以看到渲染好的页面了
• mounted是实例创建期间的最后一个生命周期函数，当执行完mounted之后，就代表实例已经完全被创建出来了，进入到运行阶段。此时如果没有其他操作，这个实例就完全躺在内存中了
• 如果要操作dom元素，最早要在mounted里面执行
  

2.运行期间：

beforeUpdate：

• 在网页网页运行期间，data 中的数据可能会进行更新。在这个阶段，数据只是在 data 中更新了，但是并没有在模板中进行更新，因此网页中显示的还是之前的，显示的数据还是旧的，页面还没和最新的数据保持同步。
• 只有数据变动的时候，才会调用该函数
  

updated：

• 数据在 data 中更新了，也在网页中更新了。
  

3.销毁期间：

beforeDestroy：

• Vue 实例或者是组件在被销毁之前执行的函数。在这一个函数中 Vue 或者组件中所有的属性都是可以使用的，还没有真正的被销毁
  

destroyed：

• Vue 实例或者是组件被销毁后执行的。此时 Vue 实例上所有东西都会解绑，所有事件都会被移除，所有子元素都会被销毁，不能再使用了。

（三）filters过滤器

• 过滤器就是数据在真正渲染到页面中的时候，可以使用这个过滤器进行一些处理，把最终处理的结果渲染到网页中。

创建

• 1.在一个组件的选项中定义本地的过滤器

  filters: {
  	capitalize: function (valu
  	e) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
  

• 2.在创建 Vue 实例之前全局定义过滤器

  Vue.filter('capitalize', function (value) {
  	if (!value) return ''
   	value = value.toString()
    	return value.charAt(0).toUpperCase() + value.slice(1)
  })
  new Vue({
  	    // ...
  })
  

引用

• 过滤器可以用在两个地方：双花括号插值 和 v-bind 表达式 (后者从2.1.0+开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

  <!-- 在双花括号中 -->
  {{ message|capitalize }}
  <!-- 在 `v-bind` 中 -->
  <div v-bind:id="rawId|formatId"></div>
  

  

（四）网络请求

为什么要引入网络请求

• 可以将其他网站的数据搬到自己的网站

导入库

• Vue 结合网络数据开发应用，axios网络请求库，使用的时候,需要导入。

  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  

get 请求

• axios.get(地址).then(function(response){},function(err){})
  

post 请求

• axios.post(地址).then(function(response){},function(err){})

      axios.post('https://autumnfish.cn/api/user/reg', {username: 'jr'})
      .then(function(response){
          console.log(response)
      },function(err){
          console.log(err)
      })
  

七、案例实现-----图书管理系统

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 必须有网络  import pip install xxx -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <!-- <script src="./vue.js"></script> -->
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
    <div id="books" class='container'>
        <h1 style="background-color: #fff">图书管理系统</h1>
        <!-- 表单form 实现功能 -->
        <form class="form-inline">   
            <!-- 样式class="form-group"，加了不会换行  -->
            <div class="form-group">
                <label>名称:</label>
                <input type="text" class="form-control" placeholder='请输入名称' v-model:value='book.name'>
            </div>
            <div class="form-group">
                <label>作者:</label>
                <input type="text" class="form-control" placeholder='请输入作者' v-model:value='book.author'>
            </div>
            <div class="form-group">
                <label>价格:</label>
                <input type="text" class="form-control" placeholder='0' v-model:value='book.price'>
            </div>

            <!-- 因为搜索结果要自动触发表格书本变化，所以这里选择计算属性或者监听属性 -->
            <div class="form-group" >
                <label>搜索</label>
                <input type="text" class="form-control" v-model:value='keyword'>
            </div>

            <button @click.prevent="add_book">添加</button>
        </form>

        <!-- 表格，显示有的书 -->
        <table class="table table-bordered">
            <tr>
                <td>序号</td>
                <td>名称</td>
                <td>作者</td>
                <td>价格</td>
                <td>时间</td>
                <td>操作</td>
            </tr>
                
            <tr v-for='book,index in book_result'>
                <td>{{index+1}}</td>
                <td>{{book.name}}</td>
                <td>{{book.author}}</td>
                <td>{{book.price}}</td>
                <td>{{book.time}}</td>
                <td><button class="btn btn-danger" @click="del_book(index)">删除</button></td>
            </tr>
        </table>

    </div>
    
    <script>

        new Vue({
            el: '#books',
            data: {
               book_list:[
                   {'name':'Python','price':98,'author':'张xx','time':new Date().toLocaleDateString()},
                   {'name':'Java','price':98,'author':'李xx','time':new Date().toLocaleDateString()}     
               ],
                book:{
                    'name':'',
                    'author':'',
                    'price':'',
                },
                keyword:''
            },
            methods:{
                add_book:function(){
                    this.book.time = new Date().toLocaleDateString()
                    this.book_list.push(this.book)
                    // 实现输入框查询后清空
                    this.book={
                        'name':'',
                        'author':'',
                        'price':''
                    }

                },
                // 实现删除书本功能，index是传进来书本的序号
                del_book:function(index){
                    this.book_list.splice(index,1)
                }
            },
            // 实现搜索功能，匹配的是书本名中含有关键字
            computed:{
                book_result(){
                    if(this.keyword){
                        kw = this.keyword
                        var newbook = this.book_list.filter(function(item){
                            if(item.name.indexOf(kw) >= 0){
                                return true
                            }else{
                                return false
                            }
                        })
                        // console.log(newbook)
                        return newbook

                    }else{
                        return this.book_list
                    }

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