Vue 模板语法插值操作绑定属性计算属性事件监听条件判断循环遍历阶段案例

1 插值操作

1.1 Mustache语法

也就是双大括号 {{ }}



    {{ message }} : {{ info }}
    {{ message + " : " + info }}
    {{ counter * 2 }}

1.2 v-once

该指令后面不需要跟任何表达式（比如之前的v-for后面是跟表达式的）
该指令表示元素和组件（组件后面才会学习）只会渲染一次，不会随着数据的改变而改变


    {{ message }}
    {{ message }}

1.3 v-html

某些情况下，我们从服务器请求到的数据本身就是一个HTML代码

如果我们直接通过{{ }} 来输出，会将HTML代码也一起输出
但是我们可能希望的是按照HTML格式进行解析，并显示对应的内容

如果我们希望解析出HTML展示

可以使用v-html指令
该指令直面往往会跟上一个string类型
会将string的html解析出来并进行渲染


    {{ url }}

1.3 v-text

不推荐，灵活度不够

1.4 v-pre

v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustche语法

比如下面代码

第一个h2元素中的内容会被编译解析出来对应的内容
第二个h2元素中会直接显示{{message}}


    {{ message }}
    {{ message }}

1.5 v-cloak

在某些情况下，我们浏览器可能会直接显示出未变异的Mustche标签


    {{ message }}

在vue解析之前，div中有一个属性v-cloak
在vue解析之后，div中没有一个属性v-cloak

2 绑定属性

2.1 v-bind

场景：某些属性需要动态绑定

比如动态绑定a元素的href属性
比如动态绑定img元素的src属性

v-bind指令：

作用：动态绑定属性
缩写：：语法糖写法直接冒号
预期：any(with argument)|Object(without argument)
参数：attrOrProp（optional）


    
    

    
    
    有勇气的牛排

    
    
    有勇气的牛排

2.2 v-bind绑定class

2.2.1 绑定方式：对象语法

对象语法的含义：class后面跟的是一个对象


Hello World


Hello World



Hello World


Hello World

2.2.2 绑定方式：数组语法


    
    {{ message }}
    {{ message }}

2.3 点击列表中哪一项，那么该项的文字变为红色


    
        
            {{ index }}{{ ' - ' + m }}

2.4 v-bind绑定style

可以使用v-bind:style来绑定一些CSS内敛样式
在写CSS属性名的时候，比如font-size

我们可以使用驼峰式（cameCase）fontSize
或短横线分隔（kebab-case，记得用单引号括起来）'font-size'

绑定class有两种方式

对象语法



    
    
    {{ message }}

    
    {{ message }}
    {{ message }}

数组语法


    {{ message }}

3 计算属性

某些情况下，我们可能需要对数据进行一些转换后再显示，或者需要将多个数据结合起来进行显示

比如：有firstName和lastName两个变量，我们需要显示完整的名称。
但是如果多个地方都需要完整的名称，就需要写多个{{ firstName }} {{ laseName }}

我们可以将上面的代码转换成计算属性

3.1 基本操作


    {{ name + ' : ' + nameValue }}
    {{ name }} : {{ nameValue }}

    {{ getFullName() }}

    
    {{ fullName }}

3.2 复杂操作


    总价格: {{ totalProce }}

3.3 计算属性的setter和getter


    {{ fullName }}

3.4 计算属性和methods的对比


    
    {{ name }} {{ nameValue }}
    
    {{ getFullName() }}
    
    {{ fullName }}

3.5 计算属性的缓存

计算属性会进行缓存，如果多次使用时，计算属性只会调用一次

4 事件监听

4.1 v-on基本使用

作用：绑定时间监听器
缩写：@
预期：Function | Inline Statement | Object
参数：event


    
    
    

    {{ counter }}

4.2 v-on参数

4.3 v-on修饰符

Vue提供了修饰符来帮助我们方柏霓处理一些事件

.stop：调用event.stopPropagation()
prevent：调用event.preventDefault()
.{keyCode | keyAlias}：只当事件是从特定键触发时才触发回调
.native：监听组件根元素的原生事件
.once：只触发一次回调

5 条件判断

5.1 v-if

5.2 v-if v-else


    
        666
    
    
        isShow为false时, 显示我

5.3 v-if v-else-if v-else


    优秀
    良好
    及格
    不及格

    {{ result }}

5.4 用户登录切换的案例(小问题)



    
      用户账号
    
    
        用户邮箱

5.5 v-show

v-if和v-show对比

v-if当条件为false时，压根不会有对应的元素在DOM中。
v-show当条件为false时，仅仅是将元素的display属性设置为none而已

开发中国如何选择

当需要在显示与隐藏之间切片很频繁时，使用v-show
当只有一次切换时，通常使用v-if



    
    {{ message }}

    
    {{ message }}

6 循环遍历

6.1 v-for遍历数组

语法格式案例：

# 不需要索引
v-for="movie in movies"

# 需要索引
v-for=(item,index) in items


    
    
        {{ item }}
    

    
    
        
            {{ index + 1 }} - {{ item }}

6.2 v-for遍历对象


    
    
        {{ item }}
    

    
    
        {{ key }} : {{ value }}
    

     
    
        {{ index + 1 }}-{{ key }} : {{ value }}

6.3 使用过程添加key



    
        {{ item }}

6.4 数组方法


    
        {{ item }}

7 阶段案例

购物车案例：

https://gitee.com/net920vip/vue-framework/tree/master/LearnVuejs01

https://github.com/net920vip/vue-framework/tree/master/LearnVuejs01

8 v-model

Vue中使用v-model指令来实现单元数和数据的双向绑定

等同于

8.1 v-model结合checkbox类型


    
    
    
    
    
    

    
    
        轻音乐
        国学
        思考
    
    您的爱好是：{{ hobbies }}

    
        {{ item }}

8.2 v-model结合select类型


    
    
    您的选择是：{{ hobby }}

    
    
    您的选择是：{{ hobbies }}

8.3 v-model修饰符


    
    
    {{ message }}

    
    
    {{ age }}---{{ typeof age }}

    
    
    您输入的名字：{{ name }}

转载于：
https://www.920vip.net/article/154

前端

Vue 模板语法 插值操作 绑定属性 计算属性 事件监听 条件判断 循环遍历 阶段案例

1 插值操作

1.1 Mustache语法

{{ message }} : {{ info }}

{{ message + " : " + info }}

{{ counter * 2 }}

1.2 v-once

{{ message }}

{{ message }}

1.3 v-html

{{ url }}

1.3 v-text

1.4 v-pre

{{ message }}

{{ message }}

1.5 v-cloak

{{ message }}

2 绑定属性

2.1 v-bind

2.2 v-bind绑定class

2.2.1 绑定方式：对象语法

Hello World

Hello World

Hello World

Hello World

2.2.2 绑定方式：数组语法

{{ message }}

{{ message }}

2.3 点击列表中哪一项，那么该项的文字变为红色

2.4 v-bind绑定style

{{ message }}

{{ message }}

{{ message }}

{{ message }}

3 计算属性

3.1 基本操作

{{ name + ' : ' + nameValue }}

{{ name }} : {{ nameValue }}

{{ getFullName() }}

{{ fullName }}

3.2 复杂操作

总价格: {{ totalProce }}

3.3 计算属性的setter和getter

{{ fullName }}

3.4 计算属性和methods的对比

{{ name }} {{ nameValue }}

{{ getFullName() }}

{{ fullName }}

3.5 计算属性的缓存

4 事件监听

4.1 v-on基本使用

{{ counter }}

4.2 v-on参数

4.3 v-on修饰符

5 条件判断

5.1 v-if

5.2 v-if v-else

5.3 v-if v-else-if v-else

优秀

良好

及格

不及格

{{ result }}

5.4 用户登录切换的案例(小问题)

5.5 v-show

{{ message }}

{{ message }}

6 循环遍历

6.1 v-for遍历数组

6.2 v-for遍历对象

6.3 使用过程添加key

6.4 数组方法

7 阶段案例

8 v-model

8.1 v-model结合checkbox类型

您的爱好是：{{ hobbies }}

8.2 v-model结合select类型

您的选择是：{{ hobby }}

您的选择是：{{ hobbies }}

8.3 v-model修饰符

Vue 模板语法插值操作绑定属性计算属性事件监听条件判断循环遍历阶段案例