Vue.js的初认识

Vue.js是一套构建用户界面的渐进式框架，只关注视图层，采用自底向上增量开发的设计。

Vue的语法格式：

 

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

举个实例：

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue_det',
        data: {
            site: "菜鸟教程",
            url: "www.runoob.com",
            alexa: "10000"
        },
        methods: {
            details: function() {
                return  this.site + " - 学的不仅是技术，更是梦想！";
            }
        }
    })
</script>

运行结果：

数据绑定的方式：{{.....}}

v-html指令：输出html代码

v-bind指令：html属性中的值，绑定到参数

v-if指令：是根据表达式seen的值(true或false)来决定是否插入p元素

v-model指令：在input输入框中实现双向数据绑定

v-on：监听事件，对用户的输入进行响应

{{message | capitalize}}管道符：过滤器函数接受表达式的值作为第一个参数