您尚未登录,请登录后浏览更多内容！ 登录 | 立即注册

QQ登录

只需一步，快速开始

 找回密码
 立即注册

QQ登录

只需一步，快速开始

cncml手绘网 › 首页 ›站长博文› 学习笔记 › 查看内容

[Vue.js]Vue.js 模板语法

2019-11-1 12:01| 发布者: admin| 查看: 613| 评论: 0|原作者: admin

摘要: Vue.js 模板语法Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统，在应用 ...
Vue.js 模板语法
Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
插值文本
数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：
  1. <div id="app">
  2.   <p>{{ message }}</p>
  3. </div>
复制代码
Html
使用 v-html 指令用于输出 html 代码：
  1. <div id="app">
  2.     <div v-html="message"></div>
  3. </div>
  4.    
  5. <script>
  6. new Vue({
  7.   el: '#app',
  8.   data: {
  9.     message: '<h1>菜鸟教程</h1>'
  10.   }
  11. })
  12. </script>
复制代码
属性
HTML 属性中的值应使用 v-bind 指令。
以下实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：
  1. <div id="app">
  2.   <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
  3.   <br><br>
  4.   <div v-bind:class="{'class1': class1}">
  5.     directiva v-bind:class
  6.   </div>
  7. </div>
  8.    
  9. <script>
  10. new Vue({
  11.     el: '#app',
  12.   data:{
  13.       class1: false
  14.   }
  15. });
  16. </script>
复制代码
表达式
Vue.js 都提供了完全的 JavaScript 表达式支持。
  1. <div id="app">
  2.     {{5+5}}<br>
  3.     {{ ok ? 'YES' : 'NO' }}<br>
  4.     {{ message.split('').reverse().join('') }}
  5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
  6. </div>
  7.    
  8. <script>
  9. new Vue({
  10.   el: '#app',
  11.   data: {
  12.     ok: true,
  13.     message: 'RUNOOB',
  14.     id : 1
  15.   }
  16. })
  17. </script>
复制代码
指令
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：
  1. <div id="app">
  2.     <p v-if="seen">现在你看到我了</p>
  3. </div>
  4.    
  5. <script>
  6. new Vue({
  7.   el: '#app',
  8.   data: {
  9.     seen: true
  10.   }
  11. })
  12. </script>
复制代码

这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
参数
参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：
  1. <div id="app">
  2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>
  3. </div>
  4.    
  5. <script>
  6. new Vue({
  7.   el: '#app',
  8.   data: {
  9.     url: 'http://www.runoob.com'
  10.   }
  11. })
  12. </script>
复制代码
在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
另一个例子是 v-on 指令，它用于监听 DOM 事件：
  1. <a v-on:click="doSomething">
复制代码

  1. <div id="app">
  2.     <pre><a v-bind:href="url">Vue参数</a></pre>

  4. </div>

  6. <div id="app2">
  7.    <p v-for="val in arr">
  8.     {{val.a}}
  9.    </p>
  10.    <a  v-on:click="tap">点我</a>
  11. </div>


  14. <script>
  15. new Vue({
  16.   el: '#app',
  17.   data: {
  18.     url: 'http://www.cncml.com'
  19.   }
  20. })
  21. new Vue({
  22.   el: '#app2',
  23.   data: {
  24.     arr:[
  25.      {a:'bb'},
  26.      {a:'cc'}
  27.     ]
  28.   },
  29.    methods:{
  30.     tap : function(){
  31.      this.arr.unshift({a:'new'})
  32.     }
  33.    }
  34. })
  35. </script>
复制代码


在这里参数是监听的事件名。

[page]修饰符
修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指定应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
  1. <form v-on:submit.prevent="onSubmit"></form>
复制代码

用户输入
在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：
  1. <div id="app">
  2.     <p>{{ message }}</p>
  3.     <input v-model="message">
  4. </div>
  5.    
  6. <script>
  7. new Vue({
  8.   el: '#app',
  9.   data: {
  10.     message: 'Runoob!'
  11.   }
  12. })
  13. </script>
复制代码
按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。
以下实例在用户点击按钮后对字符串进行反转操作：
  1. <div id="app">
  2.     <p>{{ message }}</p>
  3.     <button v-on:click="reverseMessage">反转字符串</button>
  4. </div>
  5.    
  6. <script>
  7. new Vue({
  8.   el: '#app',
  9.   data: {
  10.     message: 'Runoob!'
  11.   },
  12.   methods: {
  13.     reverseMessage: function () {
  14.       this.message = this.message.split('').reverse().join('')
  15.     }
  16.   }
  17. })
  18. </script>
复制代码

过滤器
Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：
  1. <!-- 在两个大括号中 -->
  2. {{ message | capitalize }}

  4. <!-- 在 v-bind 指令中 -->
  5. <div v-bind:id="rawId | formatId"></div>
复制代码
过滤器函数接受表达式的值作为第一个参数。
以下实例对输入的字符串第一个字母转为大写：
  1. <div id="app">
  2.   {{ message | capitalize }}
  3. </div>
  4.    
  5. <script>
  6. new Vue({
  7.   el: '#app',
  8.   data: {
  9.     message: 'runoob'
  10.   },
  11.   filters: {
  12.     capitalize: function (value) {
  13.       if (!value) return ''
  14.       value = value.toString()
  15.       return value.charAt(0).toUpperCase() + value.slice(1)
  16.     }
  17.   }
  18. })
  19. </script>
复制代码
过滤器可以串联：
  1. {{ message | filterA | filterB }}
复制代码
过滤器是 JavaScript 函数，因此可以接受参数：
  1. {{ message | filterA('arg1', arg2) }}
复制代码
这里，message 是第一个参数，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

[page]
缩写v-bind 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写：
  1. <!-- 完整语法 -->
  2. <a v-bind:href="url"></a>
  3. <!-- 缩写 -->
  4. <a :href="url"></a>
复制代码
v-on 缩写
  1. <!-- 完整语法 -->
  2. <a v-on:click="doSomething"></a>
  3. <!-- 缩写 -->
  4. <a @click="doSomething"></a>
复制代码
笔记
给元素绑定href时可以也绑一个target，新窗口打开页面。
  1. new Vue({
  2.   el: '#app',
  3.   data: {
  4.     url: 'http://www.runoob.com',
  5.     target:'_blank'
  6.   }
  7. })
复制代码
当我们给一个比如 props 中，或者 data 中被观测的对象添加一个新的属性的时候，不能直接添加，必须使用 Vue.set 方法。
Vue.set 方法用来新增对象的属性。如果要增加属性的对象是响应式的，那该方法可以确保属性被创建后也是响应式的，同时触发视图更新
20170608010237405.png

这里本来 food 对象是没有 count 属性的，我们要给其添加 count 属性就必须使用 Vue.set 方法，而不能写成 this.food.count = 1










鲜花
握手
雷人
路过
鸡蛋
收藏 分享 邀请
上一篇：[Vue.js] Vue.js 起步下一篇：[Vue.js]Vue.js 条件与循环

最新评论

相关分类

关闭

站内最热文章上一条 /1 下一条

GMT+8, 2025-1-2 23:28 , Processed in 0.162014 second(s), 28 queries .

Copyright © 2001-2025 Powered by cncml! X3.2. Theme By cncml!