Vue.js的学习（1）

Vue实例

我们通过new的方式创建Vue的实例

//创建实例
var vue=new Vue();
//给这个实例添加一点什么
var data={value:2};
var vue=new Vue({
    data:data
})

当这些属性的值发生改变时，视图会产生响应，会更改匹配的值，前提是这些属性必须是在Vue中存在的，如果新增data中没有的内容，就无法被重新渲染，需要注意的是，当我们使用了object.freeze(“目标”)方法时，我们就无法修改现有的属性，也就意味着响应式系统无法追踪变化。

模板语法

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<div id="text">{{text}}</div>
//JS
var app=new Vue({
    el:"#text",
    data:{
        text:"Hello,vue"
    }
})

双大括号会解释为文本节点，而要使用真正的HTML，需要使用v-html
**注：括号中可以使用javascript表达式，表达式，是表达式

{{message.split("").reverse().join("")}} 这个是表达式
{{var a=1}} 这个是声明 不是表达式

特性

改变元素的特性需要使用v-bind指令

<div id="change">
    <a v-bind:href="url" target="_blank">click</a>
    //这里使用了v-on的简写`@`，v-bind的简写是`:`
    <button @click="changeUrl">按我</button>
</div>
//我们这样就动态的改变了url的值
    var app=new Vue({
        el:"#change",
        data:
            {
                url:"http://www.baidu.com"
            },
        methods:{
            changeUrl:function(){
                this.url="http://www.sina.com"
            }
        }
    });