Vue2.0 学习 第二组 语法模板
本笔记主要参考菜鸟教程和官方文档编写。
1.文本绑定
一般在dom中用{{}}标时，并且在vue构造体内的data中定义文本内容
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
2.v-html
可以在vue构造体中的data中定义html语句，之后再dom中用v-html引用该语句，就会加载以html编辑后的内容。比如
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>Amadeus Mozart</h1>'
}
})
</script>
3.v-bind
HTML 属性中的值应使用 v-bind 指令。先看代码,
<div id="app">
<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="{'class1': use}">
v-bind:class 指令
</div>
<button v-bind:disabled="use">Button</button>
</div>
在这段代码中，主要实现的是根据输入true或者false，来控制class1的引用和button的显示，
input元素中用v-model将use和input的值实现双向绑定，这样你点击input就是就是输入true给use变量，之后使用v-bind来单向绑定，调用class来改变class，又用‘class1‘：use来判断use的值确定是否要更改class1，调用disabled来根据use的值确定button的显示。
除此之外，v-model和v-bind是有明显区别的，v-model是双向绑定，比如你用v-model将data中的数据绑定给一个input元素，你在input元素中更改数据，在data中的数据会同步更改，但是v-bind同样将data中的数据绑定给input元素，你更改input中的数据，data中的数据不会跟着动，所有v-bind是单向绑定。详细可看 Vue中v-bind,v-on,v-model都是干什么的(区别以及详细用法)?自制动图,一看就懂 ∠( °ω°)／ 前端知识 中所详细介绍。
4.表达式
vue支持完整的js表达式。例如，
<div id="app">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true,
message: 'RUNOOB',
id : 1
}
})
</script>
在以上代码中，data部分非常正常，但是在dom中的{{}}中出现了表达式，第一个{{}}中就是代表着输出5+5的结果，第二个表达式时根据ok的布尔值输出yes或者no，第三个我们拆分看，message本身在data中是一个RUNOOB的字符串，调用split修饰符后就将字符串切割成一个个字母，R,U,N,O,O,B，再调用reverse修饰符后，字母顺序被逆置，变成B,O,O,N,U,R,最后调用join修饰符，字母重新合成字符串输出。v-bind:id将data中的id和list-合成为list-1，绑定给id。
5.指令
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上
6.参数
参数在指令后以冒号指明。例如
<body>
<div id="app">
<pre><a v-bind:href="url">菜鸟教程</a></pre>
</div>
<script>
new Vue({
el: '#app',
data: {
url: 'http://www.runoob.com'
}
})
</script>
7.用户输入
在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定，v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值，即data中的元素值
8.v-on
v-on是监听事件
比如在button中使用v-on:click监听点击事件
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转字符串</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
9.过滤器
格式：①{{ a | b }}②<div v-bind:id="a | b"<div/>
这其中的a是原始数据，b就是过滤器
<div id="app">
{{ message | capitalize }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'runoob'
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
</script>
此实例中，message就经过capitalize的函数过滤后返回首字母大写的字符串，其中charAt(0)是寻找到第一个字符，touppercase则是使其大写，再加上使用slice（1）截出来的除第一个字母的字符串，拼接成首字母大写的字符串.
10.缩写
v-on :click --> @click
v-bind:href -->:href
Vue2.0 学习 第二组 语法模板的更多相关文章
- Vue2.0 【第二季】第5节 Template制作模板
目录 Vue2.0 [第二季]第5节 Template制作模板 第5节 Template制作模板 一.直接写在选项里的模板 二.写在template标签里的模板 三.写在script标签里的模板 Vu ...
- VUE2.0学习总结
摘要: 年后公司项目开始上vue2.0,自己对学习进行了总结,希望对大家有帮助! VUE2.0学习 vue介绍 vue是什么? https://vuefe.cn/guide vue也是一个数据驱动框架 ...
- Vue2.0学习--Vue数据通信详解
一.前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.组件间如何传递数据就显得至关重要.本文尽可能罗列出一些常见的数据传递方式,如p ...
- Vue2.0 【第二季】第2节 Vue.extend构造器的延伸
目录 Vue2.0 [第二季]第2节 Vue.extend构造器的延伸 一.什么是Vue.extend 二.自定义无参数标签 三.挂载到普通标签上 Vue2.0 [第二季]第2节 Vue.extend ...
- Vue2.0 【第二季】第1节 Vue.directive自定义指令
目录 Vue2.0 [第二季]第1节 Vue.directive自定义指令 一.什么是全局API? 二. Vue.directive自定义指令 三.自定义指令中传递的三个参数 四.自定义指令的生命周期 ...
- Vue2.0 【第二季】第7节 Component 组件 props 属性设置
目录 Vue2.0 [第二季]第7节 Component 组件 props 属性设置 第7节 Component 组件 props 属性设置 一.定义属性并获取属性值 二.属性中带' - '的处理方式 ...
- Vue2.0 【第二季】第6节 Component 初识组件
目录 Vue2.0 [第二季]第6节 Component 初识组件 第6节 Component 初识组件 一.全局化注册组件 二.局部注册组件局部 三.组件和指令的区别 Vue2.0 [第二季]第6节 ...
- vue2.0学习笔记之路由（二）路由嵌套+动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue2.0学习笔记之路由（二）路由嵌套
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue2.0 【第二季】第9节 Component 标签
目录 Vue2.0 [第二季]第9节 Component 标签 第9节 Component 标签 1.我们先在构造器外部定义三个不同的组件,分别是componentA,componentB和compo ...
随机推荐
- [ABC145E] All-you-can-eat
2023-02-25 题目 题目传送门 翻译 翻译 难度&重要性(1~10):5 题目来源 AtCoder 题目算法 背包dp 解题思路 设 \(dp_i\) 为最后一道菜在第 \(i\) 时 ...
- 苹果MacOS系统傻瓜式本地部署AI绘画Stable Diffusion教程
Stable Diffusion的部署对小白来说非常麻烦,特别是又不懂技术的人.今天分享两个一键傻瓜式安装包,对小白来说非常有用.下面两个任选一个安装就可以. 一.DiffusionBee 简单介绍 ...
- linux shell根据关键字用sed注释掉整行
一.将带有ab的行注释掉 # cat test # sed -i '/ab/s/^\(.*\)$/#\1/g' test ab是关键字 s是语法替换 ^是行首 $是行尾 \是转义符 数字1带表前述匹配 ...
- 用OLED屏幕播放视频(2): 为OLED屏幕开发I2C驱动
下面的系列文章记录了如何使用一块linux开发扳和一块OLED屏幕实现视频的播放: 项目介绍 为OLED屏幕开发I2C驱动 使用cuda编程加速视频处理 这是此系列文章的第2篇, 主要总结和记录一个I ...
- 从 5s 到 0.5s！CompletableFuture 异步任务优化技巧，确实优雅！
一个接口可能需要调用 N 个其他服务的接口,这在项目开发中还是挺常见的.举个例子:用户请求获取订单信息,可能需要调用用户信息.商品详情.物流信息.商品推荐等接口,最后再汇总数据统一返回. 如果是串行( ...
- Python基础——函数的理解、函数对象、函数嵌套、闭包函数、及其应用
文章目录 函数也是变量 可以赋值 可以当做函数当做参数传给另外一个函数 可以当做函数当做另外一个函数的返回值 可以当做容器类型的一个元素 函数对象应用示范 原始版 修正版 函数嵌套 函数的嵌套调用 函 ...
- GO语言基础之基本运算符
GO语言基础之基本运算符 目录 GO语言基础之基本运算符 一.运算符 内置运算符: 二.算术运算符 三.关系运算符 四.逻辑运算符 五.位运算符 六.赋值运算符 一.运算符 作用:运算符用于在程序运行 ...
- ORACLE错误代码一览表，方便大家查询！
ORACLE错误一览表,方便大家查询! ORA-00001: 违反唯一约束条件 (.) ORA-00017: 请求会话以设置跟踪事件 ORA-00018: 超出最大会话数 ORA-00019: 超出最 ...
- 【纯干货】IOS手机使用Charles抓包
一.Charles 下载地址 https://www.charlesproxy.com/ 二.Charles 激活 1.生成激活码 生成激活码:https://www.zzzmode.com/myto ...
- oracle下载安装教程（带安装包）
废话不多说上连接: 链接:https://pan.baidu.com/s/1ukUjxbTpodxwxoGQUKl8KA?pwd=y6ju 提取码:y6ju oracle下载速度太慢了我存在了百度网盘 ...