Vue02基础语法-插值+过滤器+计算属性+计算属性

冷不防 2024-04-03 12:51 14阅读 0赞

[14天阅读挑战赛][14]  
*努力是为了不平庸~*

**目录**

1.模板语法

1.1 插值

1.1.1 文本

1.1.2 html

1.1.3 属性

1.1.4 表达式

1.2 指令:指令指的是带有“v-"前缀的特殊属性

1.2.1 核心指令

1.2.1.1 v-if |v-else-if|v-else

1.2.1.2 v-show

1.2.1.3 v-for

1.2.1.4 v-on|v-model|v-for

1.2.1.5 参数 v-bind:href,v-on:click

1.2.1.6 简写

2. 过滤器

2.1 局部过滤器

示例：

2.2 全局过滤器

3. 计算属性

示例： 使用计算属性，计算书本的总价定义测试数据，和计算属性，计算属性遍历书本记录，计算总价

关于var 与 let

4.监听属性

watch声明语法:

今天就分享到这里了，咱们下个章节再见！！！

--------------------

## **1.模板语法** ##

> Vue.js 使用了**基于 HTML** 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。vue将模板编译成虚拟dom，结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

> **html模板语法:**这是一种基于字符串的模板技术,以字符串和数据为输入,通过用正则表达式将占位符替换为所需数据的方式,构建出完整的 HTML 字符串。

### 1.1 插值 ###

#### 1.1.1 文本 ####

> 使用\{ \{msg\}\}的形式，标签将会被替换成为数据对象（data）上**msg**属性值，当绑定的数据对象上的**msg**属性值发生变化时，插值处的值也会发生变化（**双向绑定**）

#### 1.1.2 html ####

> \{ \{\}\}的方式将数据处理为普通文本，如果要输出html，需要使用**v-html**指令

//在data中定义一个html属性，其值为html
    data: {
        html:  '<input type="text" value="hello"/>'
    }

//在html中取值
    <span v-html="html"></span>

#### 1.1.3 属性 ####

> HTML属性中的值应使用v-bind指令。类型与jQuery中的$("\#xxx").attr(propName, propVal)

//定义一个样式
    <style>
    .redClass {
        font-size: 30px;
        color: red;
    }
    </style>

//在data中定义一个属性，其值为上面定义的样式名
    data: {
        red: 'redClass'
    }

//在html使用v-bind指令设置样式
    <p>设置之前:  aaaa</p>
    <p>设置之后: <span v-bind:class="red">aaa</span></p>

**以上结果在浏览器中可以看到相应的效果**

#### 1.1.4 表达式 ####

> 几种常见的表达式：
> 
>  *  \{ \{str.substr(0,6).toUpperCase()\}\}
>  *  \{ \{ number + 1 \}\}
>  *  \{ \{ ok ? 'YES' : 'NO' \}\} 三元运算符
>  *  <li v-bind:>我的Id是js动态生成的</li>

**示例1：**

//在html中加入元素，定义表达式
    <span>{
       {str.substr(0,6).toUpperCase()}}</span>

//在data中加入一个属性，名为str与html中对应
    data: {
        str: 'hello vue'
    }

**查看效果：字符串被截取，并转换为大写**

**示例2：**

<span>{
       { number + 1 }}</span>

//在data中加入一个属性，名为str与html中对应
    data: {
        number: 10
    }

**在data中定义的number值将会被加1**

**示例3：**

//这是一个三元运算，如果ok为true，表达式值为YES ，如果ok为false则表达式值为NO
    <span>{
       { ok ? 'YES' : 'NO' }}</span>

//在data中加入一个属性，名为str与html中对应
    data: {
        ok: true
    }

**示例4：**

//演示id属性绑定和动态赋值
    <p>
        <input type="text" v-bind:id="bookId"/></br>
        
        <input type="text" v-bind:id="'bookList_' + id"/>
    </p>

data: {
        bookId: 'book001',
        id: 'book002'
    }

**该示例可以通过开发者工具查看生成的id属性值。**

### 1.2 指令:指令指的是带有“v-"前缀的特殊属性 ###

#### 1.2.1 核心指令 ####

#### **1.2.1.1 v-if |v-else-if|v-else** ####

> 根据其后表达式的bool值进行判断是否渲染该元素， 指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)

**示例：HTML**

<div v-if="type === 'A'">
        type == A
    </div>
    <div v-else-if="type === 'B'">
        type == B
    </div>
    <div v-else>
        other value
    </div>

**示例：JS**

var vm = new Vue({
    
            el: '#app',
    
            data: {
                type: 'C'
            }
        });

**可以修改data中的type值观察页面的输出。**

> **注： js = == === 之间的区别  
> 一个等号是赋值操作，==先转换类型再比较，===先判断类型，如果不是同一类型直接为false  
> alert(1 == “1”); // true  
> alert(1 === “1”); // false**

#### 1.2.1.2 v-show ####

> 与v-if类似，只是不会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"。  
> 当v-show 表达式**true**则显示，否则不显示。

**注意：使用v-show，虽然不显示，但在页面的dom中是存在的，只是display属性为none**

**示例：** 在HTML中加入如下内容

//在data中定义show属性
    var vm = new Vue({
        el: '#app',
        data: {
            show: 'yes' 
        }
    });

**修改show值，观察页面显示**

#### 1.2.1.3 v-for ####

> 循环遍历
> 
> **遍历数组:** v-for="item in items", items是数组，item为数组中的数组元素
> 
> **遍历对象:** v-for="(value,key,index) in stu", value属性值, key属性名，index下标

**示例：**定义一个div，使用v-for指令输出，items是vue实例中data中定义的对象数组

<div v-for="item in items">
         {
       {item.name}} -- {
       {item.id}}
    </div>
    
    
    <div>
        <select >
            <option v-for="item in items" 
                v-bind:value="item.id">{
       {item.name}}</option>
        </select>
    </div>
    
    
    <div v-for="(o,key) in obj">
        {
       {key}}-{
       {o}}
    </div>

var vm = new Vue({
    
        el: '#app',
    
        data: {
            itmes:[
                {name: 'zs',age:18},
                {name: 'ww',age:19},
                {name: 'ls',age:20},
                {name: 'zl',age:21}
            ],
            obj: {
                name:'张三',
                age: 21,
                addr: '湖南长沙'
            }
        }
    });

#### 1.2.1.4 v-on|v-model|v-for ####

> 创建一组多选框，可以获取到用户选择项

<div v-for="(item,index) in items">
        {
       {index}}:<input type="checkbox" v-bind:value="item.id"
                v-model="selected">{
       {item.name}}
    </div>
    <button v-on:click="getSelected()">获取选择</button>

var vm = new Vue({
        el: '#app',
        data: {
            type: 'C',
            show: 'no',
            items:[
                {name: '长沙',id:18},
                {name: '昆明',id:19},
                {name: '武汉',id:20},
                {name: '南京',id:21}
            ],
            obj: {
                name:'张三',
                age: 21,
                addr: '湖南长沙'
            },
            selected:[]
        },
        methods: {
            getSelected: function() {
                console.log(this.selected);
            }
        }
    });

#### **1.2.1.5 参数 v-bind:href,v-on:click** ####

**示例：**

<div>
        <a v-bind:href="url">baidu</a>
    </div>
    
    
    <div>
        <a v-bind:[attrname]="url">baidu</a>
        <button v-on:[evname]="clickme">点我看看</button>
    </div>

**注意：在动态参数中，作为参数的变量名（如：attrname）要全部小写，否则无效 ！！**

var vm = new Vue({
        el: '#app',
        data: {
    
            url: 'https://www.baidu.com',
            attrname:'href',
            evname: 'click'
        },
    
        methods: {
            clickme: function() {
                console.log("点到我了");
            }
        }
    });

#### **1.2.1.6 简写** ####

> **Vue为v-bind和v-on这两个最常用的指令，提供了特定简写**

<table> 
 <tbody> 
  <tr> 
   <td><strong>指令</strong></td> 
   <td><strong>简写</strong></td> 
   <td><strong>示例</strong></td> 
  </tr> 
  <tr> 
   <td>v-bind:xxx</td> 
   <td>:xxx</td> 
   <td>v-bind:href 简写为 :href</td> 
  </tr> 
  <tr> 
   <td>v-on:xxx</td> 
   <td>@xxx</td> 
   <td>v-on:click 简写为 @click</td> 
  </tr> 
 </tbody> 
</table>

## 2. 过滤器 ##

> vue允许自定义过滤器，一般用于常见的文本格式化，过滤器可用的两个地方：**双花括号插值**与**v-bind表达式**，过滤器应该被添加在js表达式的尾部，使用管道运算符"|"

### 2.1 局部过滤器 ###

//局部过滤器的定义：
    var vm = new Vue({
        filters: {
            'filterName': function(value) {
                //过滤器实现
            }
        }
    });

//过滤器的使用
    
    {
       { name | capitalize }}
    
    
    <div v-bind:id="rawId | formatId"></div>

>  *  **注1：过滤器函数接受表达式的值作为第一个参数**
>  *  **注2：过滤器可以串联  
>     \{ \{ message | filterA | filterB \}\}**
>  *  **注3：过滤器是JavaScript函数，因此可以接受参数：  
>     \{ \{ message | filterA('arg1', arg2) \}\}**

#### 示例： ####

<div>
        <p>{
       {msg | toUpperCase}}</p>
    </div>

var vm = new Vue({
        el: '#app',
        data: {
            msg:"hello vue"
        },
    
        //局部过滤器
        filters:{
            toUpperCase: function(value) {
                return value.toUpperCase();
            }
        }
    });

### 2.2 全局过滤器 ###

> **拷入date.js（日期格式化）放入项目js目录中，在页面中引入。  
> 定义全局过滤器**

//全局过滤器
    Vue.filter('fmtDate',function(value) {
        return fmtDate(value, 'yyyy年MM月dd日')
    });

//过滤器的使用
    <div>
        <p>{
       {date | fmtDate}}</p>
    </div>

## 3. 计算属性 ##

> 计算属性用于快速计算视图（View）中显示的属性，这些计算将被缓存，并且只在需要时更新  
> **使用场景：**当一个属性需要复杂的逻辑运算之后才能获取其值，可以使用计算属性，在一个计算属性中可以完成各种复杂的逻辑，包括运算，方法调用等，只要最终返回一个结果就可以了

//声明计算属性的格式：
    computed:{
       xxx:function(){
    
       }
    }

#### **示例： 使用计算属性，计算书本的总价   定义测试数据，和计算属性，计算属性遍历书本记录，计算总价** ####

//计算属性在页面中的使用
    <div v-for="book in books">
        {
       {book.name}} -> {
       {book.price}}
    </div>
    
    <div>
        总价：{
       {compTotal}}
    </div>

> #### 关于**var** 与 **let** ####
> 
>  *  **var声明为全局属性**
>  *  **let为ES6新增，可以声明块级作用域的变量（局部变量）**
>  *  **建议使用let声明变量**

## 4.监听属性 ##

> **使用场景：**我们可以使用监听属性watch来响应数据的变量， 当需要在数据变化时执行异步或开销较大的操作时，这种方式比较有用。回想一下是否做过下拉列表的级联选择？

#### watch声明语法: ####

watch: {
        xxxx: function(val) {
            //监听器实现
        }
    }

**示例： 米和厘米的单位换算**

**设置监听器：**

**HTML中使用v-model实现与数据的双向绑定**

### 今天就分享到这里了，咱们下个章节再见！！！ ###

[14]: https://marketing.csdn.net/p/bb9f9e25975dba9f9b87f5272afded16