Vue起步（模板语法、循环语句）

Vue.js起步

每一个Vue应用都需要通过实例化Vue来实现。

实例：

        
 site: {{site}} url: {{url}} {{details()}} 
    

在Vue构造器中有一个el参数，它是DOM元素中的id。

data用于定义属性。

methods用户定义函数，可以通过return来返回数值。

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。

Vue.js模板语法

插值

文本

数据绑定最常见的形式就是使用{{ }}双大括号的文本插值。

 
 {{ message }} 
 
 

Html

使用v-html指令用于输出html代码：

属性

HTML属性中的值应该使用v-bind指令

实例：判断 use 的值，如果为 true 使用 class1 类的样式，否则不使用该类

 修改颜色 

 
 v-bind:class 指令 
 
  

指令

指令是带有v-前缀的特殊属性

指令用于在表达式的值改变时，将某些行为应用到DOM上。

 
 你可以看见我了 
 
  

v-if指令将根据表达式seen的值（true或者false）来决定是否插入p元素。

参数

参数在指令后以冒号指明。

 
 Chenih 
 
  

href就是参数，告知v-bind指令将该元素的href属性与表达式url的值绑定。

用户输入

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

 
 {{message}} 
  
  

v-model指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

按钮的事件可以使用 v-on 监听事件，并对用户的输入进行响应。

 
{{ message }}
  反转字符串 
  

Vue.js 循环语句

循环使用 v-for 指令。

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

v-for 可以绑定数据到数组来渲染一个列表：

 
 
 {{ site.name }}