3.Vue的基本语法
1.v-bind
可简写为"："
你看到的 v-bind 等被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。
我们可以使用 v-bind 来绑定元素特性!
在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。
注：使用 v-* 属性绑定数据是不需要 {} 包裹的
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="vue">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span> </div> <!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: '#vue', //绑定元素的 ID
data: { //数据对象中有一个名为 message 的属性，并设置了初始值
message: 'Hello Vue!'
}
});
</script>
</body>
</html>
2.v-if，v-else
条件判断语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="vue">
<h1 v-if="ok">YES</h1>
<h1 v-else>NO</h1> </div> <!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: '#vue', //绑定元素的 ID
data: { //数据对象中有一个名为 message 的属性，并设置了初始值
ok: true
}
});
</script>
</body>
</html>
3.v-else-if
- v-if
- v-else-if
- v-else
注： === 三个等号在 JS 中表示绝对等于（就是数据与类型都要相等）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="vue"> <h1 v-if="type === 'A'">A</h1>
<h1 v-else-if="type === 'B'">B</h1>
<h1 v-else-if="type === 'C'">C</h1>
<h1 v-else>who</h1> </div> <!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: '#vue', //绑定元素的 ID
data: { //数据对象中有一个名为 message 的属性，并设置了初始值
// ok: true
type: 'A'
}
});
</script>
</body>
</html>
4.v-for
循环数据
格式说明：
<div id="vue">
<li v-for="(item, index) in items">
{{item.message}}{{index}}
</li>
</div>
注： items 是数组， item 是数组元素迭代的别名， index 是数组元素迭代的索引。我们之后学习的Thymeleaf模板引擎的语法和这个十分的相似！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <!--view层模块-->
<div id="vue">
<li v-for="(item, index) in items">
{{item.message}}{{index}}
</li>
</div> <!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: '#vue', //绑定元素的 ID
data: { //数据对象中有一个名为 message 的属性，并设置了初始值
// ok: true
// type: 'A'
items: [
{message:"编号为1，索引为"},
{message:"编号为2，索引为"},
{message:"编号为3，索引为"}
]
}
});
</script>
</body>
</html>
测试 ：在控制台输入 vm.items.push({message:"编号为4，索引为"}) ，尝试追加一条数据，你会发现浏览器中显示的内容会增加一条 编号为4，索引为3 .
5.v-on
可简写为“@”
事件监听
语法： v-on:需要监听的事件=”函数“
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <!--view层模块-->
<div id="vue">
<button v-on:click="sayHi">按钮</button>
</div> <!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: '#vue', //绑定元素的 ID
data: { //数据对象中有一个名为 message 的属性，并设置了初始值
message: "第一个Vue项目"
},
methods: { // 方法必须定义在Vue的Methods对象中，v-on:事件
sayHi: function (event) {
alert(this.message);
}
} });
</script>
</body>
</html>
6.Vue常用的7个属性，8个方法以及7个指令（787原则）
7.Vue其他属性，方法以及指令
3.Vue的基本语法的更多相关文章
- Vue.js 数据绑定语法详解
Vue.js 数据绑定语法详解 一.总结 一句话总结:Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue ...
- Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例，vue基础语法
一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...
- Vue（1）- es6的语法、vue的基本语法、vue应用示例，vue基础语法
一.es6的语法 1.let与var的区别 ES6 新增了let命令,用来声明变量.它的用法类似于var(ES5),但是所声明的变量,只在let命令所在的代码块内有效.如下代码: { let a = ...
- vue 的基本语法
一 . Vue 的介绍 1 . 前端的三大框架 (可以去 GitHub 查看三个框架的 star 星) vue : 作者尤雨溪, 渐进式的JavaScript 框架 react : Faceb ...
- vue基础---模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- Vue.js 模板语法
本章节将详细介绍 Vue.js 模板语法,如果对 HTML +Css +JavaScript 有一定的了解,学习起来将信手拈来. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 ...
- VUE：模板语法（小白自学）
VUE:模板语法 一:何为声明式 安装规定的语法,去实现一些效果(不需要管流程). 二:模板语法 <!DOCTYPE html> <html> <head> < ...
- vue 的基本语法和常用指令
什么是vue.js Vue.js是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于Wee ...
- 01-路由跳转 安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题
2==解决vue2.0里面控制台包的一些语法错误. https://www.jianshu.com/p/5e0a1541418b 在build==>webpack.base.conf.j下注释掉 ...
- day67:Vue:es6基本语法&vue.js基本使用&vue指令系统
目录 Vue前戏:es6的基本语法 1.es6中的let特点 1.1.局部作用域 1.2.不存在变量提升 1.3.不能重复声明 1.4.let声明的全局变量不从属于window对象,var声明的全局变 ...
随机推荐
- HikariCP连接池
1.HikariCP连接池是什么? HikariCP是数据库连接池,而且是号称史上最快的,而且目前来看确实是这样的,SpringBoot2.0也已经采用HikariCP作为默认连接池配置. githu ...
- python实现语音信号处理常用度量方法
信噪比(SNR) 有用信号功率与噪声功率的比(此处功率为平均功率),也等于幅度比的平方 $$SNR(dB)=10\log_{10}\frac{\sum_{n=0}^{N-1}s^2(n)}{\sum_ ...
- （二十）golang--变量的作用域
(1)函数内部申明/定义的变量叫局部变量,作用域仅限于函数的内部: (2)函数外部申明/定义的变量叫全局变量,作用域在整个包都有效,如果其首字母为大写,则作用域是整个程序: (3)如果变量是在一个代码 ...
- git push 报504 (因提交文件内容过大而失败的解决方案)
Enumerating objects: 60, done. Counting objects: 100% (60/60), done. Delta compression using up to 4 ...
- oracle聚合函数XMLAGG用法简介
XMLAGG函数语法基本如图,可以用于列转行,列转行函数在oracle里有好几种方法,wm_concat也可以做 这里介绍wm_concat是因为XMLAGG实现效果和wm_concat是一样的,只是 ...
- 使用 jQuery.TypeAhead 让文本框自动完成 （一）（最简单的用法）
项目地址:https://github.com/twitter/typeahead.js 直接贴代码了: @section headSection { <script type="te ...
- 从零到一手写基于Redis的分布式锁框架
1.分布式锁缘由 学习编程初期,我们做的诸如教务系统.成绩管理系统大多是单机架构,单机架构在处理并发的问题上一般是依赖于JDK内置的并发编程类库,如synchronize关键字.Lock类等.随着业务 ...
- Java使用路径通配符加载Resource与profiles配置使用
序言 Spring提供了一种强大的Ant模式通配符匹配,能从一个路径匹配一批资源. Ant路径通配符 Ant路径通配符支持“?”.“*”.“**”,注意通配符匹配不包括目录分隔符“/”: “?”:匹配 ...
- 3. 移动安全渗透测试-（Android基础漏洞）
3.1 数据存储漏洞 用户经常会把敏感数据交给app,比如:用户名and密码认证令牌联系人记录通信记录历史使用记录..... 只要愿意,app可以收集这些用户的隐私和个人信息明文存储或明文传输,通常保 ...
- iOS开发之--为UITextField监听数值变化的三种方法
项目中有个验证码输入直接验证跳转页面,用的RAC来监听textfield的输入值,如下: @weakify(self); [self.codeView.textField.rac_textSignal ...