本笔记主要参考菜鸟教程和官方文档编写。

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 学习 第二组 语法模板的更多相关文章

  1. Vue2.0 【第二季】第5节 Template制作模板

    目录 Vue2.0 [第二季]第5节 Template制作模板 第5节 Template制作模板 一.直接写在选项里的模板 二.写在template标签里的模板 三.写在script标签里的模板 Vu ...

  2. VUE2.0学习总结

    摘要: 年后公司项目开始上vue2.0,自己对学习进行了总结,希望对大家有帮助! VUE2.0学习 vue介绍 vue是什么? https://vuefe.cn/guide vue也是一个数据驱动框架 ...

  3. Vue2.0学习--Vue数据通信详解

    一.前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.组件间如何传递数据就显得至关重要.本文尽可能罗列出一些常见的数据传递方式,如p ...

  4. Vue2.0 【第二季】第2节 Vue.extend构造器的延伸

    目录 Vue2.0 [第二季]第2节 Vue.extend构造器的延伸 一.什么是Vue.extend 二.自定义无参数标签 三.挂载到普通标签上 Vue2.0 [第二季]第2节 Vue.extend ...

  5. Vue2.0 【第二季】第1节 Vue.directive自定义指令

    目录 Vue2.0 [第二季]第1节 Vue.directive自定义指令 一.什么是全局API? 二. Vue.directive自定义指令 三.自定义指令中传递的三个参数 四.自定义指令的生命周期 ...

  6. Vue2.0 【第二季】第7节 Component 组件 props 属性设置

    目录 Vue2.0 [第二季]第7节 Component 组件 props 属性设置 第7节 Component 组件 props 属性设置 一.定义属性并获取属性值 二.属性中带' - '的处理方式 ...

  7. Vue2.0 【第二季】第6节 Component 初识组件

    目录 Vue2.0 [第二季]第6节 Component 初识组件 第6节 Component 初识组件 一.全局化注册组件 二.局部注册组件局部 三.组件和指令的区别 Vue2.0 [第二季]第6节 ...

  8. vue2.0学习笔记之路由（二）路由嵌套+动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. vue2.0学习笔记之路由（二）路由嵌套

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. Vue2.0 【第二季】第9节 Component 标签

    目录 Vue2.0 [第二季]第9节 Component 标签 第9节 Component 标签 1.我们先在构造器外部定义三个不同的组件,分别是componentA,componentB和compo ...

随机推荐

  1. AI绘画工具MJ新功能有点东西，小白也能轻松一键换装

    先看最终做出来的效果 直接来干货吧.Midjourney,下面简称MJ 1.局部重绘功能来袭 就在前两天,MJ悄咪咪上线了这个被众人期待的新功能:局部重绘. 对于那些追求创新和个性化的设计师来说,局部 ...

  2. python 获取本周 ，上周，本月，上月，本季，上季，今年， 去年的第一天和最后一天

    import datetime from datetime import timedelta now = datetime.datetime.now()# 获取当前月的天数 month = 2days ...

  3. RocketMQ 系列(四) 消息存储

    RocketMQ 系列(四) 消息存储 本文是 RocketMQ 系列的第四篇,下面是前面几篇的文章,不清楚的话点击看一下吧. RocketMQ系列(一) 基本介绍 RocketMQ 系列(二) 环境 ...

  4. MySQL实战实战系列 01 基础架构：一条SQL查询语句是如何执行的？

    这是专栏的第一篇文章,我想来跟你聊聊 MySQL 的基础架构.我们经常说,看一个事儿千万不要直接陷入细节里,你应该先鸟瞰其全貌,这样能够帮助你从高维度理解问题.同样,对于 MySQL 的学习也是这样. ...

  5. 探索抽象同步队列 AQS

    by emanjusaka from https://www.emanjusaka.top/archives/8 彼岸花开可奈何 本文欢迎分享与聚合,全文转载请留下原文地址. 前言 AbstractQ ...

  6. PostgreSQL学习笔记-3.基础知识：CROSS、INNER、LEFT OUTER、RIGHT OUTER、FULL OUTER、UNION

    PostgreSQL JOIN 子句用于把来自两个或多个表的行结合起来,基于这些表之间的共同字段. 在 PostgreSQL 中,JOIN 有五种连接类型: CROSS JOIN :交叉连接INNER ...

  7. MAC安装pwntools记录

    1.使用python3安装pwntools pip3 install pwntools 2.安装成功后测试 测试不成功提示安装 binutils pwnlib.exception.PwnlibExce ...

  8. c#中单例模式详解

    基础介绍:   确保一个类只有一个实例,并提供一个全局访问点.   适用于需要频繁实例化然后销毁的对象,创建对象消耗资源过多,但又经常用到的对象,频繁访问数据库或文件的对象.   其本质就是保证在整个 ...

  9. 优雅设计之美：实现Vue应用程序的时尚布局

    前言 页面布局是减少代码重复和创建可维护且具有专业外观的应用程序的基本模式.如果使用的是Nuxt,则可以提供开箱即用的优雅解决方案.然而,令人遗憾的是,在Vue中,这些问题并未得到官方文档的解决. 经 ...

  10. Petals

    ------------恢复内容开始------------ 打开发现一堆地址冒红 滑倒后面发现E8,根据经验应该是花指令考点 然后D-->nop-->C-->P得到正常结果 然后第 ...