Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Vue系列(二)——Vue之模板语法

Vue系列(二)——Vue之模板语法

作者头像
萌兔IT
发布于 2019-07-26 04:50:02
发布于 2019-07-26 04:50:02
9770
举报
文章被收录于专栏:萌兔it萌兔it

Vue的引用方式

Vue有两种使用方式:

1)同别的库一样,通过<script>标签,来引入。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2)另一种方式就是通过webpack-cli来实现。

淘宝镜像 cnpm:https://npm.taobao.org/:下载淘宝镜像压缩包

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

$cnpm install --global vue-cli

$vue init webpack my-project(项目名称)

安装依赖:$cd my-project

$npm install

$npm run dev

知道了怎么引用,下面我们就去看一下Vue的基本语法吧~

Vue的基本语法

数据驱动视图:还记得上一篇提到的数据双向绑定吗?我们就在这里看一下双向绑定在Vue中是怎么体现的吧!

<div id="app">

hello {{name}} // 4.渲染

</div>

<script>

let vm = new Vue({ //创建一个实例 1.创建实例语法

el:"#app", //3. 挂载元素

data:{

name:"Rabbit" //2.设置数据

}

});

</script>

如上图所示,从创建Vue实例到成功渲染需要分为四步,首先要创建一个实例,然后在实例的data处设置数据,并将其挂载,然后才能够进行渲染。在此之后,一旦我们改变了设置的数据,页面中的数据便可以同步更改,而不需要再去获取dom节点等操作了。

模板语法

下面就到了今天的主角,让我们详细介绍一下ta吧~~Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据,所以就照着HTML的写法来写就没毛病!

1)插值:在Vue中文本、HTML甚至JavaScript代码都可以写在模板中。

文本:<span>RabbitName: {{ SnowBall }}</span>

文本指令是最简单也是最常见的,上面是我们用的最多的写法。

还有一种写法是:<span v-text="SnowBall"></span>

2) HTML: 如果通过{{}}应用HTML,则会直接被打印出来,而不是作为HTML对象去执行;因此html需要不同的写法:v-html

<span v-html="SnowBall"></span>

3)JavaScript表达式:在Vue的模板中,写入JS表达式也不是梦:

比如:{{ number + 1 }}

2)指令:指令是啥呢,很好判断,就是前面带个v-的,这里和angular有点像,只不过angular是ng-辣~指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM,就像上面的v-text和v-html,它们就要通过指令来实现。那么还有哪些指令呢?想一想常需要写的功能,写业务的小伙伴第一下想到的一定是条件语句:

我们有v-if呀:

<p v-if="white">我是一只白兔兔!</p>

上面的代码,可以通过给white设定一个boolean来控制‘我是一只白兔兔’这句话是否显示。

再一个我们会想到的一定是for循环:

v-for:通过对一个数据的遍历来轮询对象。

<ul id="rabbitFamily">

<li v-for="rabbit in rabbits">

{{ rabbit.name }}

</li>

</ul>

还有什么呢?v-bind听说过吗,有了它,我们就可以响应式的更新HTML特性咯~

<a v-bind:href="url">...</a>

也可以写成:<a :href="url">...</a>

再比如说触发事件

<button v-on:click="happy">click me</button>

也可以写成<button @click="happy">click me</button>

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-04-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 萌兔it 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
后端人眼中的Vue(二)
​ 和插值表达式({{}})一样,用于获取vue实例中data属性声明的数据。用法是在哪个标签上获取就直接在哪个标签上定义v-text或者是v-html。相当于javascript中的innerText。直接将获取的数据直接渲染到指定标签中。
上分如喝水
2023/01/08
2.5K0
后端人眼中的Vue(二)
Vue学习
Vue基础 官网链接 vue简介 JavaScript 框架 简化Dom操作 响应式的数据驱动 Vue导入 `<!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> (适合初学者) 或者: <!-- 生产环境版本,优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script> el介
用户7168270
2020/04/06
1.1K0
Vue学习
【第一季】Vue2.0内部指令
学习这套课程你需要的前置知识: HTML的基础知识,你需要达到中级水平,写前端页面的结构代码完全没有问题。 CSS的基础知识,最好做过半年以上的切图和布局,最好了解CSS3的知识。 Javascript的基础知识,对基本语法掌握,这个要求不高,因为遇到难的我会在视频中讲解。 node.js初级知识,只需要会npm的使用和项目初始化就可以了 如果你对上面三个知识还不了解,建议不要冒进学习,会影响你的学习热情。但你已经是科班出身或者在培训班毕业后想继续学习,是完全没有难度的。 学习方法:学完视频之后,一定
用户1212940
2018/01/23
1.3K0
【第一季】Vue2.0内部指令
原 Vue.js、vue安装步骤、单文件组
作者:汪娇娇 时间:2017年8月30日 1、npm淘宝镜像 直接用npm安装vue-cli会特别慢,在安装vue-cli之前可以先安装一个淘宝镜像。之后的安装命令还是和npm一样,只不过把npm改成cnpm,但速度已经不是一个等级的了,嗖嗖嗖嗖~~~ npm install -g cnpm --registry=https://registry.npm.taobao.org 2、安装vue项目步骤 轻轻松松下面几步,就可以创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目啦。 # 全
jojo
2018/05/03
1.4K0
原                                                                                Vue.js、vue安装步骤、单文件组
Vue 基础入门
Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 。Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时 ,Vue.js 也能完美地驱动复杂的单页应用。  ♞ Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。  ♞ Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。  ♞ Vue 借鉴了 Angular 的模板和双向绑定技术;借鉴了 react 的组件化和虚拟 DOM 技术。  ♞ MVVM 模式是 Model-View-ViewModel 的缩写,Model 代表数据模型,定义数据操作的业务逻辑,View 代表视图层,负责将数据模型渲染到页面上,ViewModel 通过双向绑定把 View 和 Model 进行同步交互,不需要手动操作DOM 的一种设计思想
Demo_Null
2020/09/29
7910
Vue开发学习笔记(一)
Vue与“view”的读音接近,它的语法与Flask中的Jinja2模板语言非常相近。Vue通过元素的id来确定位置,通过createApp函数来创建应用,使用mount函数将应用挂载在对应id的元素中。
月落星河Tsukistar
2022/02/21
3670
Vue开发学习笔记(一)
Vue模板语法
基本上就是将数据以字符串的方式拼接到HTML标 签中,前端代码风格大体上如图所示。
清出于兰
2022/01/05
2.2K0
Vue模板语法
基础系列(二)模板语法 - 插值语法 - 指令语法 - | v-bind | v-model | v-on | v-if | v- show
注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被“打断”。
Qwe7
2022/06/29
9770
vue学习(3)
webpack:打包机,它能将我们的html、css、js,font,png进行打包,交给服务器。
玩蛇的胖纸
2018/08/16
3K0
Vue快速入门
迫于无奈还得学下前端的东西,虽然本人学的是后端,但是很早也就听过了Vue很火,所以这里花一天时间学一些基础的Vue知识,至少保证能看懂吧!
全栈程序员站长
2022/08/19
8670
Vue快速入门
Vue 学习笔记 —— 模板语法 (一)
我们在使用插值表达式的时候,游览器第一次渲染的时候可能会出现一下 表达式的字符串,然后就被替换 data 中的数据内容,这种情况解决就如官方文档的方式皆可以解决了。
Gorit
2021/12/08
1.7K0
Vue 学习笔记 —— 模板语法 (一)
Vue 3 模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层应用实例的数据。所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析。
公众号---人生代码
2020/11/03
1.6K0
Vue 3 模板语法
Vue初步认识与Vue基础指令
Vue.set()方法有三个参数,分别是数组,索引,新内容,用这个办法可以代替操作,以实时更新视图
conanma
2021/11/04
3.4K0
Vue3入门-指令
指令式Vue提供的带有v-前缀的特殊标签属性,用来增强标签的能力。可以提高数据的渲染能力。
Yui_
2025/07/18
1120
Vue3入门-指令
vue2.5入门(推荐,差代码) 原
课程地址:https://www.imooc.com/learn/980 教程:https://cn.vuejs.org/v2/guide 放在头部,避免页面出现抖屏 挂载点 下面是原生 模板 <
晓歌
2018/08/15
8970
vue2.5入门(推荐,差代码)
                                                                            原
Vue模板语法
基本上就是将数据以字符串的方式拼接到HTML标 签中,前端代码风格大体上如下图所示。
梨涡浅笑
2022/05/08
2.1K0
Vue模板语法
vue之插值表达式
使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时,页面会显示出原始的`{{}}`, 加载完毕后才显示正确数据,我们称为插值闪烁。 我们将网速调慢一些,然后刷新页面,试试看刚才的案例: 
一个风轻云淡
2022/11/15
2K0
vue之插值表达式
19 vue 模板语法及简要实现原理
模板中的插值,包括文本插值与属性插值。在插值表达式中,还可以包涵一行简单的js代码。
LIYI
2020/02/13
3.3K0
19 vue 模板语法及简要实现原理
【Vue】day01-Vue基础入门
概念:Vue (读音 /vjuː/,类似于 view) 是一套 构建用户界面 的 渐进式 框架
陶然同学
2023/10/14
3970
【Vue】day01-Vue基础入门
【VUE】基础用法(属性与事件的绑定,条件渲染等)
在填写表单时,双向数据绑定可以辅助开发者在不操作DOM的前提下,自动把用户填写的内容同步到数据源中。
坚毅的小解同志的前端社区
2022/12/13
1.7K0
【VUE】基础用法(属性与事件的绑定,条件渲染等)
相关推荐
后端人眼中的Vue(二)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档