Vue基础（二）——模板语法

已于 2022-05-20 15:02:18 修改
阅读量765 收藏 4
点赞数 5
分类专栏： Vue基础 文章标签： node.js vue.js
于 2022-04-29 10:44:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41523175/article/details/124404883
版权

一、指令

1、v-bind：绑定属性【:】

2、v-on：绑定事件【@】

3、v-if和v-show

（1）介绍

<template>
    <div>
        <h1 v-if="false"> hello world</h1>
        <h2 v-show="false"> hello world</h2>
    </div>
</template>

值为false时，页面上不显示数据。 

打开控制台：

v-if：不渲染DOM。如果值为false的话。

v-show：渲染DOM，将元素设置为【display：none】 

 （2）案例

<template>
    <div>
        <p v-if="isLogin">欢迎：</p>
        <p v-if="!isLogin"><a href="">请登录...</a></p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isLogin: true,
        };
    },
};
</script>

isLogin为true时：

isLogin为false时：

4、v-for

（1）案例（一）——水果列表

<template>
    <div>
        <ul>
            <li v-for="(fruit,index) of fruits" :key="index">
                <p>水果序号：{{index}}</p>
                <p>水果名称：{{fruit}}</p>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            fruits: ["苹果", "香蕉", "鸭梨"],
        };
    },
};
</script>

 

（2）案例（二）——学生表格

<template>
    <div>
        <table border="1">
            <thead>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
            </thead>
            <tbody>
                <tr v-for="(student,index) of students" :key="index">
                    <td>{{index+1}}</td>
                    <td>{{student.name}}</td>
                    <td>{{student.age}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            students: [
                { name: "小明", age: 18 },
                { name: "小红", age: 19 },
                { name: "小亮", age: 20 },
            ],
        };
    },
};
</script>

 

二、组件嵌套

1、组件命名：大写字母开头，驼峰命名

自定义组件一般放在components文件夹里面。 

在components文件夹，新建MyHello.vue文件。 

2、注册组件

（1）MyHello.vue文件：

<template>
    <h1>hello component</h1>
</template>

（2）App.vue文件：

<template>
    <div>
        <MyHello></MyHello>
        <My-hello></My-hello>
    </div>
</template>

<script>
// 引入组件
import MyHello from "./components/MyHello.vue";
export default {
    // 注册组件
    components: {
        MyHello: MyHello,
    },
};
</script>

中间可以加上横线。 

也可以简写：

components: {
        MyHello
    },

（3）页面效果：

 

3、组件传值

App.vue：父级

MyBrother.vue，MyChild.vue：子级

（1）父级向子级传递数据——使用标签的属性传递

App.vue：（父级）

<template>
    <div>
        <h1>hello world</h1>
        <MyChild :msg="message"></MyChild>
    </div>
</template>

<script>
import MyChild from "./components/MyChild.vue";
export default {
    components: {
        MyChild: MyChild,
    },
    data() {
        return {
            message: "app.vue data",
        };
    },
};
</script>

msg是自定义的属性。 

MyChild.vue：（子级）

<template>
    <h1>{{msg}}</h1>
</template>

<script>
export default {
    props: ["msg"],
};
</script>

props：属性的属性。 

页面显示：

父级的数据：【message】，传递给了子级：【MyChild】。

通过标签的属性传递。

关键代码： 

<MyChild :msg="message"></MyChild>

（2）子级向父级传递数据——用自定义事件

App.vue：（父级）

<template>
    <div>
        <h1>{{h1Data}}</h1>
        <my-child @myevent="changeData"></my-child>
    </div>
</template>

<script>
import MyChild from "./components/MyChild.vue";
export default {
    components: { MyChild },
    data() {
        return {
            h1Data: "before",
        };
    },
    methods: {
        changeData(data) {
            this.h1Data = data;
        },
    },
};
</script>

@myevent = “”：自定义事件。

changeData(data)：参数data是从子级那边传过来的。并且，将h1标签的h1Data值更改。

 MyChild.vue：（子级）

<template>
    <div>
        <button @click="sendData">传递数据</button>
    </div>
</template>

<script>
export default {
    data(){
        return {
            childData:"i am childData"
        }
    },
    methods: {
        sendData() {
            // $emit可以触发父级的自定义事件,把childData传给myevent
            this.$emit("myevent",this.childData)
        },
    },
};
</script>

// $emit可以触发父级的自定义事件,把childData传给myevent

            this.$emit("myevent",this.childData)

点击按钮时，触发sendData方法。 

效果：

原先数据为：before，点击按钮后，子级向父级传递了数据：i am childData。

  

（3）案例——购物车（一）

项目目录：

App.vue：

<template>
    <div>
        <my-cart></my-cart>
    </div>
</template>

<script>
import MyCart from "./components/MyCart.vue";
export default {
    components: { MyCart },
};
</script>

 App.vue引入MyCart.vue组件。

MyCart.vue：

<template>
    <span>
        <h1>购物车</h1>
        <ul>
            <li v-for="(fruit,index) of fruits" :key="index">
                {{fruit.name}}，单价：{{fruit.price}}，数量：
                <my-count :count="fruit.count" :index="index" @add="add" @sub="sub">
                </my-count>
            </li>
        </ul>
    </span>
</template>

<script>
import MyCount from "./MyCount.vue";
export default {
    components: {
        MyCount,
    },
    data() {
        return {
            fruits: [
                { name: "苹果", price: "5", count: "0" },
                { name: "香蕉", price: "3", count: "0" },
                { name: "鸭梨", price: "4", count: "0" },
            ],
        };
    },
    methods: {
        sub(index) {
            if (this.fruits[index].count > 0) {
                this.fruits[index].count--;
            }
        },
        add(index) {
            this.fruits[index].count++;
        },
    },
};
</script>

MyCart.vue里面有一个水果列表，按钮是引入MyCount.vue组件 

MyCount.vue：

<template>
    <span>
        <button @click="sub">-</button>
        <span>{{count}}</span>
        <button @click="add">+</button>
    </span>
</template>

<script>
export default {
    props: ["count", "index"],
    methods: {
        sub() {
            this.$emit("sub", this.index);
        },
        add() {
            this.$emit("add", this.index);
        },
    },
};
</script>

这个案例是，父级向子级、子级向父级，传递数据，的一个应用。 

（4）非父子级传递数据

项目目录：

MyBrother.vue和MySister.vue为同级。

MyBrother.vue：

<template>
    <div>
        <h1>Brother</h1>
        <button @click="changeData">改变数据</button>
        <p>{{state.message}}</p>
    </div>
</template>

<script>
import Store from "../store";
export default {
    data() {
        return {
            state: Store.state,
        };
    },
    methods: {
        changeData() {
            Store.setStateMessage("new data");
        },
    },
};
</script>

MySister.vue：

<template>
    <div>
        <h1>Sister</h1>
        <p>{{state.message}}</p>
    </div>
</template>

<script>
import Store from "../store";
export default {
    data() {
        return {
            state: Store.state,
        };
    },
};
</script>

新建store.js文件，存放共同数据。

export default {
    // 状态(规范写法),存放共同数据
    state: {
        message: "hello vue"
    },
    setStateMessage(str) {
        this.state.message = str
    }
}

App.vue：

<template>
    <div>
        <my-brother></my-brother>
        <my-sister></my-sister>
    </div>
</template>

<script>
import MyBrother from "./components/MyBrother.vue";
import MySister from "./components/MySister.vue";
export default {
    components: { MyBrother, MySister },
};
</script>

效果：

点击按钮时，调用store.js的方法，更改共同数据。

从而实现，非父子级间的传递数据。 

（5）购物车重置按钮

修改MyCart.vue即可。

<template>
    <div>
        <h1>购物车</h1>
        <button @click="clear">重置数量</button>
        <ul>
            <li v-for="(fruit,index) of fruits" :key="index">
                {{fruit.name}}，单价：{{fruit.price}}，数量：
                <my-count :count=fruit.count @sub="sub" @add="add" :index="index"></my-count>
            </li>
        </ul>
    </div>
</template>

<script>
import MyCount from "./MyCount.vue";
export default {
    components: {
        MyCount,
    },
    data() {
        return {
            fruits: [
                { name: "苹果", price: "3", count: "0" },
                { name: "香蕉", price: "4", count: "0" },
                { name: "鸭梨", price: "5", count: "0" },
            ],
        };
    },
    methods: {
        sub(index) {
            if (this.fruits[index].count > 0) {
                this.fruits[index].count--;
            }
        },
        add(index) {
            this.fruits[index].count++;
        },
        clear() {
            for (let i in this.fruits) {
                this.fruits[i].count = 0;
            }
        },
    },
};
</script>

效果：

三、总结

 将系统拆分成组件，一方面降低了功能的耦合，但是另一方面也提升了数据的传输难度。

pro1822
关注
  • 5
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue 模板语法
sinat_38021004的博客
09-09 1479
模板语法 Vue 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。 也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。 模板 template 的三种写法 1. V
Vue的模板语法多种写法
偷只猫来养的博客
08-19 583
Vue的模板语法 在Vue中，{{}}语法属于基础模板语法，往界面上按照普通文本插入文本，还可以再其中插入表达式，比如； <div id = "app"> 年龄：{{stu.age-10}} </div> <!--一般情况下，直接使用{{}}--> <p> 信息：{{msg}} </p> 可以使用多个{{}}来获取数据，但是在一个{{}}中要放多个变量时，不能直接使用","来隔开，要使用模板字符串语法，否则浏览器只会读取最后一个变
Vue3 V-for例子
m0_73971691的博客
03-21 547
使用reactive响应式定义数组变量(自动更新视图)，通过v-for标签渲染。
使用v-for完成水果列表（二维数组）的渲染
weixin_74181869的博客
04-02 2226
【代码】使用v-for完成水果列表（二维数组）的渲染。
vue 监听子组件内数据变化，父组件绑定change事件
qq_42289686的博客
07-23 7701
如题，做了一个分页功能，element里面的分页，已经有了页码改变、每页数量改变的change事件，这样如果当页码改变、每页数量改变的时候，又要在methods里面写change来根据改变的值来获取分页，这样就很麻烦，如果没个页面都有分页，这样就要在methods里面多写change事件。 想到了一个解决方法，就是把element的分页封装成一个组件，具体思路如下： 一、子组件： 1.这个绑定了每...
Vue基础2——模板语法，数据绑定
qq_52983897的博客
09-08 128
举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。备注：Vue中有很多指令，都是v-xxx，此处只是拿v-bind举例。2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）功能：用于解析标签体内容。
Vue 学习笔记 —— 模板语法 （一）
最新发布
2401_84152928的博客
04-20 663
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。什么？你问面试题资料在哪里，这不是就在你眼前吗（滑稽另一种遍历对象的方式。
Vue入门（一）—— 模板语法
冰之沁泠的博客
02-02 736
Vue.js 是什么？ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。 Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 什么是渐进式框架？ 渐进式框架就是用你想用或者能用的功能特性，你不想用的部分功能可以先不用。VUE不强求你一次性接受并使用它的全部功能特性。 使用Vue将Hello World渲染到页面上 <body> <div id="app"> <div>{{msg}}</di
vue生命周期 —— 模板编译
七月
06-30 466
Vue 的 template 是如何编译成真正的 HTML 并做到双向绑定等等特殊功能的呢？ 在这张图中，我们可以看到 Vue 的模板编译是在 $mount 的过程中进行的，在 $mount 的时候执行了 compile 这个方法来将 template 里的内容转换成真正的 HTML 代码。complie 之后执行的事情也蛮重要的，这个我们留到最后再说。complie 最终生成 render 函数，等待调用。这个方法分为三步： parse 函数解析 template optimize 函数优化静态
VUE基础学习笔记——01模板语法
ZJia_X的博客
09-12 197
VUE基本使用 1.传统开发模式对比 原生JS <div id="msg"><div> <script type="text/javascript"> var msg='hello world'; var div=document.getElementById('msg'); div.innerHTML=msg; </script> jQuery <div id="msg"></div> <script type="tex
Web前端vue必做笔记之一:组合api实现水果列表
qq_42302014的博客
11-16 1059
Web前端vue必做笔记之一:组合api实现水果列表 我们要实现这种功能 <template> <h1>水果列表</h1> <form @submit.prevent="insert"> <div> <label for="">名称：</label> <input type="text" v-model="name"&
【Vue】VueX 的语法详解（2）
看花容易绣花难
11-15 424
VueX 的语法详解（2）
vue-schart ： vue.js 的图表组件
zhangwenwu2的博客
08-16 3349
vue-schart 是使用vue.js封装了sChart.js图表库的一个小组件。支持vue.js 1.x & 2.x 仓库地址：https://github.com/lin-xin/vue-schart sChart.js 作为一个小型简单的图表库，没有过多的图表类型，只包含了柱状图、折线图、饼状图和环形图四种基本的图表。麻雀虽小，五脏俱全。sChart.js 基本可以满足这四
Vue3 store配置以及简单示例
weixin_44700621的博客
03-19 7220
vue版本升级后store配置以及简单示例
vue2.0 computer计算 水果搜索与案例购物车
promise466的博客
09-24 979
vue2.0 中的computer方法简洁的实现了购物车和搜索的功能
Vue 中 store 基本用法
热门推荐
hikktn的博客
12-12 2万+
store是一个管理状态，在vuex中使用。 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { //这里放全局参数 }, mutations: { //这里是set方法 }, getters: { //这里是get方法,并且每次打开浏览器优先执行该方法，获取所有的状态 }, act
6-2 类模板Store的定义与使用 (10 分)
horsetaill的博客
05-24 979
6-2 类模板Store的定义与使用 (10 分) struct Student { // 结构体Student int id; //学号 float gpa; //平均分 }; //定义类模板及函数，函数在类体外定义 template class Store //类模板：实现对任意类型数据进行存取 裁判测试程序样例： int main() { try { Store<int> s1, s2; //定义两个Store<int>类对象，其中数据成
Vue水果商店小案例
caoxinjian423的博客
10-01 1699
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script&gt.
Vue的项目1:切换水果页面、切换显示内容
小黄呀呀呀的博客
09-09 360
1、切换水果页面 用v-if和v-for的结合使用 这里的核心是用到了currentindex ，使得根据点击的名字，显示对应的图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
手写Vue实现数据响应式与模板编译——深入理解Vue设计思想
模板引擎在Vue中起到了非常重要的作用，它提供了描述视图的模板语法，包括插值和指令等。常用的指令有v-bind、v-on、v-model、v-for、v-if等，通过这些指令我们能够实现数据的渲染和动态展示。 在手写Vue的过程中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

pro1822

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值