vue基础语法-术语，实例选项，系统指令，过滤器

基础-vue 的特点和能做什么

**目标**了解Vue能做什么以及Vue的特点

1. 数据驱动视图 可以让我们只关注数据,完全**解耦数据和视图**

2. MVVM 双向绑定

3. 通过**指令**增强了html功能 新特性

4. 组件化 复用代码

5. 开发者一般只需要关注数据

6. 适应当前**SPA**的项目开发 single page application

7. 传统网站开发 一般来说 需求不大

8. 当下各种新框架都采用了类Vue或者类React的语法去作 为主语法, 微信小程序/MpVue/uni-app

**结论**掌握Vue的开发语法 相当于掌握了新的开发模式,可以适应目前绝大多数的技术环境

基础-一些关于Vue学习的文档链接

目标 知道如何查阅文档

Vue官方文档

Vue开源项目汇总

Vue.js中文社区

• 所有关于Vue的问题都可以通过**查阅文档**解决

任务 学会Vue官网官方文档 查阅资料

基础-vue 三种安装方式

目标: 了解采用几种方式安装vue

1. 采用本地文件引入的方式
2. 采用 **在线cdn**引入的方式

• cdn相当于把一个文件放在了全国各地,然后你离哪里近,就从哪里调拨给你

1. 采用 npm 安装的方式
2. 现状: 都会采用npm的方式来进行正式项目开发

基础-HelloWorld

目标 掌握如何在页面中实例化 一个Vue对象

步骤:

1. body中,设置Vue管理的视图<div id="app"></div>
2. 引入vue.js
3. 实例化Vue对象 new Vue();
4. 设置Vue实例的选项:如el、data...     
	new Vue({选项:值});
5. 在<div id='app'></div>中通过{{ }}使用data中的数据

基础-实例选项-el

目标:了解 Vue实例中el选项的含义

• 作用:当前Vue实例所管理的html视图
• 值:**通常**是id选择器(或者是一个 HTMLElement 实例)
• 不要让el所管理的视图是html或者body!
• class选择器 只匹配第一个满足条件的元素 (Vue实例 => 管理视图 1对1)

任务

1. 尝试用 id选择器 设置el 页面显示hello world
2. 尝试用class选择器 设置el 页面显示hello world
3. 尝试 用 dom对象 设置el 页面显示hello world
4. 尝试设置 html 或者body为el 查看效果

路径

new Vue({
// el: '#app' ,  id选择器
// el: '.app',   class选择器
el: document.getElementById("#app") // dom对象
})

基础-实例选项-data

目标: 掌握**响应式数据**的操作方式 和更新方法

数据驱动视图 => 数据变化 => 视图一定变化 只需要关注数据

• Vue 实例的数据对象，是响应式数据(数据驱动视图) 数据变化 => 视图变化
• 可以通过 vm.$data 访问原始数据对象
• Vue 实例也代理了 data 对象上所有的属性，因此访问 vm.a 等价于访问 vm.$data.a
• 视图中绑定的数据必须**显式**的初始化到 data 中
• 数据对象的更新方式 直接 采用 实例.属性 = 值

任务

1. 将数据对象中count初始值设置为 1, showMessage为false, list为 数组[1,2,3]
2. 通过vm.属性的方式打印 以上三个属性
3. 通过 {{ 变量名 }} 的方式 将以上三个属性显示在页面上
4. 通过vm.属性 = 赋值的方式 改变 count 为 2 showMessage 为 true 数组为 [1,2,3,4]

路径

var vm = new Vue({
el:"#app",
data:{
  count: 1,  
  showMessage: false,
  list: [1,2,3]
}
})
console.log(vm.count)
console.log(vm.showMessage)
console.log(vm.list)
vm.count = 2
vm.showMessage = true
vm.list = [1,2,3,4]

基础-实例选项-methods

目标: 掌握 实例选项methods中方法的使用及注意事项

• methods是一个对象
• 可以直接通过 VM 实例访问这些方法，或者在**插值表达式中使用**。
• 方法中的 this 自动绑定为 Vue 实例。
• methods中所有的方法 同样也被代理到了 Vue实例对象上,都可通过this访问
• 注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了**父级作用域**的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined

new Vue({
   el:"#app",
   data:{
       name:"Hello world",
       name2:"Hello world2"
   },
   methods:{
       fn1:function(){
           // 常规写法
           console.log(this.name)
           this.fn2() // 调用方法2
       },
       fn2() {
           // es6 写法
           console.log(this.name2)
       }
   }
})

基础-术语解释-插值表达式(重要)

目标: 理解和使用插值表达式

作用:会将绑定的数据实时的显示出来:

形式: 通过 **{{ 插值表达式 }}**包裹的形式

通过任何方式修改所绑定的数据,所显示的数据都会被实时替换(响应式数据)数据驱动视图

插值表达式 => 为所欲为

需要注意的是Vue实例上代理里 data中所有的属性 和 methods中的方法,而我们的el作用的视图直接可使用这些属性和方法 但是并不需要**写this.属性 和 this.方法()**

{{js表达式、三元运算符、方法调用等}}

• a
• a = 10
• a == 10
• a > 10
• a + b + c
• “1” + “2” + “3”
• a.length.split(’’)
• a > 0 ? “成功” : “失败”

注意:不能写 var a = 10; 分支语句 循环语句

<!-- js表达式 -->
<p>{{ 1 + 2 + 3 }}</p>
<p>{{ 1 > 2 }}</p>
<!-- name为data中的数据 -->
<p>{{ name + ':消息' }}</p> 
<!-- count 为data中的数据 -->
<p>{{ count === 1 }}</p>
<!-- count 为data中的数据 -->
<p>{{ count === 1 ? "成立" : "不成立" }}</p>

<!-- 方法调用 -->
<!-- fn为methods中的方法 -->
<p>{{ fn() }}</p>

基础-术语解释-指令(重要)

**目标:**了解指令的基本含义 并应用一个指令

• 指令 (Directives) 是带有 v- 前缀的特殊特性。

• 指令特性的值预期是单个 JavaScript 表达式(v-for 是例外情况，稍后我们再讨论)。

• 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

• 指令位置: 起始标签

代码示例

<p v-text="'我是p标签的内容'"></p>

基础-系统指令-v-text 和 v-html

目标:掌握如何使用v-text 和 v-html

很像innerText和innerHTML

• v-text:更新标签中的内容

• v-text和插值表达式的区别

  • v-text 更新**整个**标签中的内容
  • 插值表达式: 更新标签中局部的内容

• v-html:更新标签中的内容/标签

• 可以渲染内容中的HTML标签

• 注意:尽量避免使用，容易造成危险 (XSS跨站脚本攻击)

<div id="app">
        <!-- v-text指令的值会替换标签内容 -->
        <p>{{str}}</p>
        <p v-text="str"></p>
        <p v-text="str">我是p标签中的内容</p>
        <p v-text="strhtml">我是p标签中的内容</p>
        <p v-html="str"></p>
        <!-- v-html指令的值(包括标签字符串)会替换掉标签的内容 -->
        <p v-html="strhtml">我是p标签中的内容</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                str: 'abc',
                strhtml: '<span>content</span>'
            }
        });
    </script>

基础-系统指令-v-if 和 v-show

目标:掌握条件渲染指令的两种方式

• 场景: 需要根据条件决定 元素是否显示 使用以上指令

• 使用: v-if 和 v-show 后面的表达式返回的布尔值 来决定 该元素显示隐藏

• 注意 : v-if 是直接决定元素 的 添加 或者删除 而 v-show 只是根据样式来决定 显示隐藏

<div id="app">
  <!-- 如果isShow的值是true ,就显示p标签 -->
  <p v-if="isShow">我是p标签中的内容</p>
  <p v-show="isShow">我是p标签中的内容</p>
  <!-- 如果标签显示与隐藏切换频繁, 就使用v-show 
      v-show本质是通过修改标签的display值
  -->
</div>
<script src="./vue.js"></script>
<script>
  new Vue({
      el: '#app',
      data: {
          isShow: false
      }
  });
</script>

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。

因此，如果需要非常频繁地切换，则使用 v-show 较好；

如果在运行时条件很少改变，则使用 v-if 较好。

如果 切换频繁 前者 开销更大

需要**注意**的是 如果 有多个元素 需要用v-if或者v-show控制, 但是又不想增加 外部标签怎么办?

可以用 **template**标签来包裹多个元素 v-if作用在template上,最终template不会形成任何元素

基础-系统指令-v-on绑定事件

**目标:**掌握vue绑定事件的方式

• 场景: 使用v-on指令给元素绑定事件

• 使用: 绑定 v-on:事件名.修饰符=“方法名” 可使用 @事件名=“方法名的方式”

• 注意 方法名 中 可以采用$event的方式传形参 也可以直接写事件名 默认第一个参数为event事件参数

• 修饰符(可不写)

• .once - 只触发一次回调。
• .prevent - 调用 event.preventDefault()。

<div id="app">
       <!-- v-on:xx事件名='当触发xx事件时执行的语句' -->
       <!-- 执行一段js语句:可以使用data中的属性 -->
       <button v-on:click="count += 1">增加 1</button>
       <!-- v-on的简写方法 -->
       <button @click="count += 1">增加 1</button>
       <!-- 执行一个方法 -->
       <button @click="add">增加 1</button>
       <!-- 执行一个方法、这种写法可以传形参 -->
       <button @click="fn1(count)">执行fn1方法</button>
       <!-- 执行一个方法、这种写法可以传形参,特殊的形参$event -->
       <button @click="fn2($event)">执行fn2方法</button>
       <hr>
       <!-- v-on修饰符 如 once: 只执行一次 -->
       <button @click.once="fn4">只执行一次</button>

       <p>上面的按钮被点击了 {{ count }} 次。</p>
   </div>
   <script src="./vue.js"></script>
   <script>
       new Vue({
           el: '#app',
           data: {
               count: 0,
               items: ['a', 'b', 'c']
           },
           methods: {
               add: function() {
                   this.count += 1;
               },
               fn1: function(count) {
                   console.log(count);
                   console.log('fn1方法被执行');
               },
               fn2: function(e) {
                   console.log(e);
                   console.log('fn2方法被执行');
               },
               fn3: function(index) {
                   console.log(index);
                   console.log('fn3方法被执行');
               },
               fn4: function() {
                   console.log('fn4方法被执行了');
               }
           }
       });
   </script>

基础-系统指令-v-for-数组

目标:掌握v-for循环数组的用法

• 根据一组数组或对象的选项列表进行渲染。

• v-for 指令需要使用 item in items 或者 item of items 形式的特殊语法，

• items 是源数据数组 /对象

当要渲染相似的标签结构时用v-for

item in items   // item为当前遍历属性数组项的值
(item,index) in items   //item为当前遍历属性数组项的值 index为数组的索引

注意 v-for写的位置 应该是重复的标签上 不是其父级元素上 需要注意

<!DOCTYPE html>
<html lang="en">

  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
  </head>

  <body>
      <div id="app">
          <!-- v-for作用:列表渲染,当遇到相似的标签结构时,就用v-for去渲染
              v-for="数组中的元素 in data中的数组名"
          -->
          <!-- 数组 -->	
          <p v-for="item in list">{{item}}</p>
      </div>
      <script src="./vue.js"></script>
      <script>
          new Vue({
              el: '#app',
              data: {
                  list: ['a', 'b', 'c'],
              },
              methods: {

              }
          })
      </script>
  </body>

</html>

同上面的v-if和v-show,如果 v-for 中同样有多个元素,但是不想增加额外标签,同样可以用**template**

基础-系统指令-v-for-对象

目标:掌握v-for循环对象的用法

<!DOCTYPE html>
   <html lang="en">

       <head>
           <meta charset="UTF-8">
           <meta name="viewport" content="width=device-width, initial-scale=1.0">
           <meta http-equiv="X-UA-Compatible" content="ie=edge">
           <title>Document</title>
       </head>

       <body>
           <div id="app">
               <!-- v-for作用:列表渲染,当遇到相似的标签结构时,就用v-for去渲染
                   v-for="元素 in 容器(数组和对象)"
                   v-for="对象中的属性值 in data中的对象名"
               -->
               <!-- 对象 -->
               <!-- (v,k,i)in 对象
                   v:值
                   k:键
                   i:对象中每对key-value的索引 从0开始
                   注意: v,k,i是参数名,见名知意即可!
               -->
               <p v-for="value in per">{{value}}</p>
               <hr>
               <p v-for="(value,key) in per">{{value}}----{{key}}</p>
               <hr>
               <p v-for="(value,key,i) in per">{{value}}----{{key}}--{{i}}</p>

           </div>
           <script src="./vue.js"></script>
           <script>
               new Vue({
                   el: '#app',
                   data: {
                       per: {
                           name: '老王',
                           age: 38,
                           gender: '男'
                       }
                   },
                   methods: {

                   }
               })
           </script>
       </body>

   </html>

语法:

item in items  // item为当前遍历属性对象的值
(item, key, index) in  items //item为当前遍历属性对象的值 key为当前属性名的值  index为当前索引的值

基础-系统指令-v-for-key

目标: 掌握在 v-for循环中给循环项赋值key

• 场景:列表数据变动会导致 视图列表重新更新 为了 提升性能 方便更新 需要提供 一个属性 key

• 使用: 通常是给列表数据中的唯一值 也可以用索引值

<div id="app">

       <!-- v-for 
           key属性: 值通常是一个唯一的标识
           key是一个可选属性
           养成好习惯:建议在写v-for时 设置:key="唯一值"
       -->
       <ul>
           <li v-for="(item,index) in list" :key="index">{{item}}---{{index}}</li>
       </ul>
   </div>
   <script src="./vue.js"></script>
   <script>
       new Vue({
           el: '#app',
           data: {
               list: ['a', 'b', 'c']
           },
           methods: {

           }
       });
   </script>

任务

1. 初始化一个Vue实例
2. 定义data对象中list:[‘北京’,‘上海’,‘天津’]
3. 将list中的内容 v-for循环在li标签上显示
4. 给每个li标签赋值key

当v-if和v-for相遇

目标: 了解v-if 和v-for的层级关系及使用

• v-for循环元素时,标签可使用item属性, 如果这个时候用v-if来进行操作 会产生什么效果?

<p v-if="index>1" v-for="(item,index) in list"></p>

以上代码执行: 会将数组中前两个元素忽略掉

说明一个问题: v-for 的优先级大于v-if ,所有v-if才能使用v-for的变量

任务:

1. 初始化一个Vue实例
2. 定义一个 list:[ 4,4,3,2,22,2,4643,443,44,34,5,3 ]

3 将大于10 的列表渲染出来 使用v-for 和v-if

**路径**参照代码示例

基础-系统指令-v-bind的基本介绍

目标 掌握v-bind的绑定一般属性的用法

• 作用:绑定标签上的任何属性
• 场景: 当标签上的属性是变量/动态/需要改变的
• 语法: <p :属性=“数据对象中的属性名”>

<p v-bind:id="ID"></p>   // ID为数据对象中的变量值 
or 
<p :id="ID"></p>  // 简写
<p  :class="Class"></p> // class的字符串语法

任务

1. 实例化一个Vue实例
2. 定义一个数据 id: test src:
3. 将id属性绑定给到p标签id属性 src属性绑定给img标签src属性

**路径**参照实现代码

基础-系统指令-v-bind-绑定class-对象语法

目标 掌握v-bind绑定class的对象语法

• 绑定class对象语法 :class="{ class名称": 布尔值 }"

   <p :class="{left:showClass}">内容</p>

注意: 绑定class和原生class会进行合并

基础-系统指令-v-bind-绑定class-数组语法

**目标**掌握v-bind绑定class数组语法

• 绑定class数组语法 :class="[class变量1,class变量2…]"

<p :class="[activeClass,selectClass]" class="default">内容</p>

基础-系统指令-v-bind-绑定style-对象语法

目标:掌握v-bind绑定style对象语法

• 语法: :style="{css属性名: 变量}"

<p :style="{fonSize:fontsize}"></p>

注意 css属性名 例如 font-size要写成 fontSize 以此类推

原有的style不受影响

基础-系统指令-v-bind-绑定style-数组语法

目标 掌握v-bind绑定style的数组语法

• 语法: :style="[对象1,对象2…]"

注意 对象可以是多个属性的 集合 同样里面的css属性需要遵从小驼峰命名的规则

基础-系统指令-v-model-基础用法

基础-系统指令-v-model-语法糖原理

目标:掌握 v-model的实现原理,

分析

• 表单元素数据改变 => 数据发生改变

  • 数据改变 => 页面数据变化

<div id="app">
<input type="text" @input="changeInput" :value="name" />
{{ name }}
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
  el: "#app",
  data: {
    name: "张三"
  },
  methods: {
    changeInput(event) {
      // 值发生改变时 会触发这个方法
      //  去value值
      this.name = event.target.value;
    }
  }
});
</script>

基础-系统指令-v-model-绑定其他表单元素

**目标**掌握 v-model绑定其他表单元素的方式

表单元素: input textarea checkbox radio select

注意 checkbox在input标签中需要给定value值

所有表单元素一旦绑定了 v-model 就会忽略掉 原有的value值 checked值 selected值 需要从数据对象中取默认值

任务:

1. 实例化一个Vue实例
2. input 绑定 属性 nameInput,实现input同步
3. textarea 绑定 属性 nameTextArea 实现textarea同步
4. checkbox 绑定一个属性 nameCheckbox 实现 checkbox同步
5. 多个 checkbox绑定同一个属性 nameCheckboxs 实现 checkbox同步 北京 上海 天津
6. radio 绑定属性 nameRadio 实现同步 男 女
7. select 绑定属性 nameSelect 实现同步 北京 上海 天津

**路径**参照实例代码

基础-系统指令-v-cloak

**目标**学会使用v-cloak解决页面闪烁问题

• 场景: 解决页面初次渲染时 页面模板闪屏现象

​ 1. 编写元素标签

​ 2. 写入v-cloak指令

​ 3. 将v-cloak指令 属性加上style

注意 可以一次性 将v-cloak引用在实例视图上 避免多次写入标签

<div v-cloak id="app">
   <p>{{ name }}</p>
   <p>{{ name }}</p>
   <p>{{ name }}</p>
   <p>{{ name }}</p>
   <p>{{ name }}</p>
   <p>{{ name }}</p>
 </div>

[v-cloak] {
     display: none;
 }

任务

1. 使用v-cloak解决页面闪烁问题

基础-系统指令-v-once

**目标**掌握 使用v-once命令,只渲染一次页面视图

• 作用: 使得所在元素只渲染一次

• 场景:静态化数据

任务

1. 使用v-once标记标签P
2. 测试更新数据时 p标签是否会渲染

基础-表格案例-添加商品

目标- 任务 实现在表格案例中 添加商品

路径: 添加商品

      1.  绑定input 
      2.  按钮绑定事件
      3.  定义添加方法
      4.  数组中添加元素
      5.  清空input内容
      6.  根据input内容框决定按钮是否可点击

基础-过滤器-过滤器的文档分析

目标: 了解过滤器的功能 作用以及作用场景

• 场景: data中的数据格式(日期格式/货币格式/大小写等)需要数据时

• 使用位置:{{}}和v-bind=“表达式”

• 具体用法:{{msg | 过滤器名字}}

• 分类:本地(局部)和全局 全局 所有实例均可使用 Vue

• 本地: 通过选项filters

• 全局: 在newVue上面 Vue.filter()

基础-过滤器-全局过滤器

目标:掌握如何注册一个全局过滤器

1. 在创建 Vue 实例**之前**定义全局过滤器Vue.filter()
2. Vue.filter(‘该过滤器的名字’,(要过滤的数据)=>{return 对数据的处理结果});
3. 在视图中通过{{数据 | 过滤器的名字}}或者v-bind使用过滤器

Vue.filter("toUpper", function(value) {
return value.charAt(0).toUpperCase() + value.substr(1);
});// 过滤器核心代码

---

注意 可使用多种表达式形式 全局过滤器 多个Vue实例可共享使用

<p>{{ text | toUpper }}</p>  // 常规用法
or
<p>
  {{
    text
      .split("")
      .reverse()
      .join("") | toUpper
  }}
</p>  // 将字符串翻转

基础-过滤器-局部过滤器

**目标**掌握如何注册一个局部过滤器

1. 在vm对象的选项中配置过滤器filters:{}
2. 过滤器的名字: (要过滤的数据)=>{return 过滤的结果}
3. 在视图中使用过滤器: {{被过滤的数据 | 过滤器的名字}}

filters: {
    toUpper(value) {
      return value.charAt(0).toUpperCase() + value.substr(1);
    }
  }

注意 局部过滤器只能用在当前Vue实例视图上

基础-过滤器-传参数和串联使用

**目标**掌握在过滤器中如何传参数 和串行使用

• 过滤器可以传递参数,第一个参数永远是前面传递过来的过滤值
• 过滤器也可以多个串行起来并排使用,

// index为传入的参数 
toUpper(value, index) {
         return value
           .split("")
           .map(function(item, i) {
             if (i === index) {
               return item.toUpperCase();
             }
             return item;
           })
           .join("");
       }
} // 根据传入的索引找到对应的字母换成大写字母

   <p>{{ text | toUpper(2) }}</p>  

• 串行使用 过滤器

   <p>{{ text | toUpper(2) | reverse }}</p> // 语法 多个过滤器用 | 分割

基础-表格案例-使用过滤器完成日期 格式处理

**目标-任务**利用所学过滤器知识 完成日期格式处理

​ 路径:实现列表中日期的格式化

​ 1 . 引入 第三方格式化日期插件

​ 2 . 定义格式化日期过滤器

​ 3. 实现其格式化功能

​ 4 . 使用过滤器

formatDate(value, format) {
      return moment(value).format(format);
}  // 过滤器代码

基础-ref 操作 DOM

**目标**掌握如何通过ref来获取dom对象

• 作用: 通过ref特性可以获取元素的dom对象

• 使用: 给元素定义 ref属性, 然后通过$refs.名称 来获取dom对象

<input type="text" ref="myInput" /> // 定义ref

focus() {
      this.$refs.myInput.focus();
}  // 获取dom对象 聚焦

基础-自定义指令-全局自定义指令

**目标**掌握如何全局自定义一个指令

• 使用场景:需要对普通 DOM 元素进行操作，这时候就会用到自定义指令
• 分类:全局注册和局部注册

1. 在创建 Vue 实例之前定义全局自定义指令Vue.directive()
2. Vue.directive(‘指令的名称’,{ inserted: (使用指令的DOM对象) => { 具体的DOM操作 } } );
3. 在视图中通过"v-自定义指令名"去使用指令

 // 定义指令
//  自定义指令是不需要加v-前缀的
// 第二个参数为一个对象  对象中要实现 inserted的方法
// inserted中的参数为当前指令所在元素的dom对象
Vue.directive("focus", {
        inserted(dom) {
          dom.focus();
        }
      });

基础-自定义指令-局部自定义指令

**目标:**掌握如何自定义一个局部指令

directives: {
    focus: {
      inserted(dom) {
        dom.focus();
      }
    }
} // 局部自定义指令实现

基础-表格案例-使用自定义指令完成自动获取焦点功能

**目标-任务**在表格案例中 实现自定义指令 完成 输入框自动聚焦功能

**路径**参照实现代码

基础-实例选项-计算属性-文档分析

• 表格案例中 实际显示的数据 依赖 原有list和 input输入框的值

目标 掌握实例选项中计算属性的基本含义

• 场景:当表达式过于复杂的情况下 可以采用计算属性 对于任何复杂逻辑都可以采用计算属性
• 使用: 在Vue实例选项中 定义 computed:{ 计算属性名: 带返回值的函数 }
• 说明: 计算属性的值 依赖 数据对象中的值 数据对象发生改变 => 计算属性发生改变=> 视图改变
• methods 和 计算属性的区别
• methods 每次都会执行
• 计算属性 会每次比较更新前后的值 如果前后一致 则不会引起视图变化
• methods每次都会执行 性能较计算属性较差

基础-实例选项-计算属性-基本使用

目标 掌握如何使用计算属性完成基本业务

​ 示例: 通过计算属性实现字符串的翻转

​ 1 定义数据对象

​ 2 实现计算属性

​ 3 使用计算属性

​ -->

computed: {
nameReverse() {
return this.name
 .split("")
 .reverse()
 .join("");
}
} // 定义计算属性

当 数据对象中 name发生变化时 计算属性也会重新计算计算=> 改变页面视图

计算属性 和 methods方法的区别:

计算属性不需要调用形式的写法 而methods方法必须采用 方法() 调用的形式

表格案例-用计算属性实现商品搜索

**目标-任务**在表格案例中使用计算属性实现商品搜索

• 搜索框内容变化=> 列表内容变化
• 计算属性: 依赖 输入值和 列表的变化实现

​ 使用计算属性实现品牌搜索

​ 1 定义 品牌搜索的内容

​ 2 定义计算属性

​ 3 实现计算属性的筛选功能

​ 4 计算属性替换原有得列表数据

computed: {
// 实现计算属性
newList() {
  if (!this.searchValue) return this.list;
  return this.list.filter(item => {
    return item.name.startsWith(this.searchValue);
  });
}
}

当data中无法完成复杂逻辑时,通通可以在**计算属性**中实现