vue.js--模板语法

vue是一种比较流行的前端框架，目标是通过尽可能简单的API实现相应的数据绑定和组合的视图组件。轻量的框架，只聚焦于试图层。可以和其他的库配合使用。
看了几集视频看不下去了。。。还是菜鸟教程适合我。。。emmm

VUE的安装

1.直接

image.png

Html:输出html标签里的值

image.png

属性：使用v-bind指令

  修改颜色
  


  

    directiva v-bind:class
  

    

image.png

表达式：

    {{5+5}}
 
    {{ ok ? 'YES' : 'NO' }}

    {{ message.split('').reverse().join('') }}
    
菜鸟教程

    

image.png

指令：
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上
在这个例子里， v-if 指令根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素

    
现在你看到我了
    

    

参数：
参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

给元素绑定href时可以也绑一个target，新窗口打开页面。

    
菜鸟教程

修饰符：
修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指定应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()函数：

用户输入：
在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：

    
{{ message }}
    

    

按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。
例：在用户点击按钮后对字符串进行反转操作：

    
{{ message }}
    反转字符串

    

过滤器：
vue允许自定义过滤器，被用作一些常见的文本格式话。
格式如下：

{{ message | capitalize }}

例：对输入的字符串第一个字母转为大写：

  {{ message | capitalize }}

    

缩写：

v-bind缩写

v-on缩写

VUE实例

构造器

每个vue.js应用都是通过构造函数VUE创建一个VUE的根实例来启动的：

var vm = new Vue({
//选项
})

属性和方法

每个 Vue 实例都会代理其 data 对象里所有的属性：

var data = { a: 1 }
var vm = new Vue({
  data: data
})
vm.a === data.a // -> true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3

除了 data 属性， Vue 还有一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的 data 属性区分。例如：

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一个实例方法
vm.$watch('a', function (newVal, oldVal) {
  // 这个回调将在 `vm.a`  改变后调用
})

image.png