Vue学习（一）

Vue.js是JavaScript的MVVM（Model-View-ViewModel）框架，像这样的框架还有AngularJs，为什么叫MVVM框架，因为数据和模型任意一方改变，另一方也随之改变。是同步的。Vue的核心只关注视图层。

MVVM模式即Model-View-ViewModel。
Vue是以数据为驱动的，Vue自身将DOM和数据进行绑定，一旦绑定，视图和数据就保持同步。每当数据发生改变，视图也发生改变。反之亦然。

ViewModel是Vue的核心，它是Vue的一个实例。Vue实例作用某个HTML上元素上，这个HTML可以是body，也可以是某个id所指的元素。

DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听视图层中DOM的变化，当发生变化时，Model层的数据随之改变。DOM DataBindings监听Model层的数据，当数据发生改变时，View层的DOM也随之改变。这也是数据双向绑定的特点。

Vue.js特点：

• 简洁：页面由HTML + JSON + Vue实例组成
• 数据驱动： 自动计算属性和追踪依赖的模板表达式
• 组件化： 可复用 解耦的组件来构建页面
• 轻量： 代码量小，不依赖其他库
• 快速： 精确有效批量DOM更新
• 模板友好： 可通过npm，bower等多种方法安装，很容易融入。

声明式的渲染

---

Vue.js核心是一个允许采用简洁的模板语法来声明式的将数据渲染到DOM：
问题：
1.简洁的模板是？
就是下面html部分
2.什么是声明式的?
声明式就是声明一个变量
html

<div id="app">
    {{message}}
</div>

js

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue'
    }
})

输出结果为：

Hello Vue

我们已经生成第一个Vue应用了，看起来跟单单渲染一个字符串模板非常类似，但是Vue在背后做了大量工作。现在数据和DOM已经绑在一起，所有的元素都是响应式的。我们如何知道，打开你的浏览器的控制台，并修改app.message,你将看到上例相应的更新。
这里存在一个问题：
为什么会这样写：

app.message = '好消息'

而不是这样：

app.data.message

{{ message }} 使用了"Mustache"语法(双大括号)

除了插文本的形式，我们还可以采用这样的方式绑定DOM元素属性：
html:

<div id="app">
    <span v-bind:title="message">鼠标停留几秒钟可以查看到提示信息</span>
</div>

js:

var app = new Vue({
    el: '#app',
    data: {
        message: '加载于' + new Date()
    }
})

v-bind 属性被称为指令。
v-*代表的是Vue提供的特殊属性，v-bind此指令的作用是：将这个元素节点上的title属性和Vue实例中的message属性保持一致。
条件与循环

---

v-if 控制切换一个元素的显示

html

<div id="#app" v-if="seen">
    {{ message }}
</div>

var app = new Vue({
    el: '#app',
    data: {
        message: '好消息',
        seen: true
    }
})

输出结果为：

好消息

这个例子演示了我们不仅可以绑定DOM文本到数据，还可以绑定DOM结构到数据。
不太懂什么意思？

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

html

<div id="app">
    <ul>
        <li v-for="item in arr">
            {{ item.text }}
        </li>
    </ul>
</div>

js

var app = new Vue({
    el: '#app',
    data: {
        arr: [
            { text: '天下' },
            { text: '天下的宝宝' },
            { text: '宝宝的天下' }
        ]
    }
})

在控制台里，输入

app.arr.push({ name: '宝贝' })

你会发现列表中新增了一项

处理用户输入

---

为了让用户和你的应用进行互动，我们可以用 v-on 指令绑定一个事件监听器，通过它调用我们Vue实例中定义的方法：
html

<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reveserMessage">逆转消息</button>
</div>

js

var app = new Vue({
    el: "#app",
    data: {
        message: 'Hello World!'
    },
    methods: {
        reveserMessage: function(){
            this.message = this.message.split('').reveser().join('');
        }
    }
})

问题：
1.this指的是什么
指的是vue实例。

Vue$3 {_uid: 0, _isVue: true, $options: Object, _renderProxy: Proxy, _self: Vue$3…}

2.split（）是分割字符串，那么join（）是什么呢？
join（）方法用于把数组中所有元素放入一个字符串中。元素是通过指定的字符串分割的。
前者是字符串的方法，后者是数组的方法。

<script type="text/javascript">
    var arr = 'I love you';
    console.log(arr.split('')); //["I"," ","l","o","v","e","y","o","u"]
    console.log(arr.split('').join()); //I,l,o,v,e,y,o,u
    console.log(arr.split('').join('')); //I love you
</script>

join（separator）可选 指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。