Vue.js版本语法

Vue.js使用了基于HtMl的模板语法，允许开发者声明式地将DOM绑定至底层VUe实例的数据。

VUe.js的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进DOM的系统

结合响应系统，在应用状态改变时，Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM的操作上，

插入值

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

<div>

<p>{{message}}</p>

</div>

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

<div id="app">

<div v-html="message"></div>

</div>

<script>

new Vue({

el:'#app',

data:{

message:'hello world！'，

}

})

<script>a

其中el是获取元素，data为div中的v-html中的信息赋值

属性

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

表达式

Vue.js提供了完全的javaScript表达式支持

<div id="app">

{{5+5}}

{{ok?'yes':'no'}}

{{message.split('').reverse().join('')}}

</div>

<script>

new Vue({

el:'#app',

data;{

ok:true,

message:'what',

}

})

</script>

参数

参数在指令以后冒号指明，列如：v-bind指令被用来响应的更新HTML元素

列：

<div id="app>

<p><a v-bind:href="url">恩额难啊 </p>

</div>

<script>

new Vue{

el:'#app',

data:{

url:'www.baid.com'

}

}

</script>

（在这里是要告诉v-bind指令将该元素的href属性与表达式url绑定）

用户输入

在input输入框中我们可以使用v-model指令来实现双向数据绑定，也就是输入的时候，上面的p也会显示

<div id="app">

<p>{{message}}</p>

<input v-model="message">

</div>

<script>

new vue{

el:'#app',

data:{

message:' '

}

}

</script>

字符串反转实例：

<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>