Vue.js的详细入门教程分享
导读： 数据绑定最常见的形式就是使用"Mustache"语法 {{...}}（双大括号）的文本插值： 双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML ，你需要使用 指令： mustache 语法不能作...
数据绑定最常见的形式就是使用"Mustache"语法 {
{
...}
}
（双大括号）的文本插值：
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML ，你需要使用 指令：
mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用v-bind 指令。
以下实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：
效果：
Vue.js 都提供了完全的 JavaScript 表达式支持。
指令 (Directives) 是带有 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式( 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。如下例子：
一些指令能够接收一个"参数"，在指令名称之后以冒号表示。例如， 指令可以用于响应式地更新 HTML 属性：
在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
另一个例子是 v-on 指令，它用于监听 DOM 事件：
在这里参数是监听的事件名。
修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指定应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：
效果：
按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。
以下实例在用户点击按钮后对字符串进行反转操作：
效果：
Vue.js和AngularJS一样 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：
过滤器函数接受表达式的值作为第一个参数。
以下实例对输入的字符串第一个字母转为大写：
过滤器串联：
过滤器是 JavaScript 函数，因此可以接受参数：
这里，message 是第一个参数，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。
Vue.js 为两个最为常用的指令提供了特别的缩写：
每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例来启动的：
每个 Vue 实例都会代理其 data 对象里所有的属性：
除了 data 属性， Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的 data 属性区分。例如：
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： Vue.js的详细入门教程分享
本文地址： https://pptw.com/jishu/661582.html