Vue快速学习笔记(1)Vue实例基础

Vue.js 简介

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

Vue 只关注视图层， 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

第一个Vue实例

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://suiyan.cc/assets/plugins/vue.js"></script>

<div id="v1" v-bind:title="title">
{{ msg }}
<p v-text="vtext"></p>
<div v-html="vhtml"  v-on:click="alt"></div>

<input type="text" v-model="tx">
<p v-text="tx"></p>
</div>

<script>
    var v = new Vue({
        el: "#v1",
        data:{
            msg:"Hello Vue!",
            title:"试试把鼠标放上去。",
            vtext:"我是通过v-text绑定的数据",
            vhtml:"<h1>哈哈哈字是不是好大？",
            tx:"v-model绑定数据，修改试试吧"
        },
        methods:{
            alt :function(){
                alert("是不是有提示了？")
            }
        }
    })
</script>

这是一个声明式渲染 {{ msg }}类似于模板便签被插在HTML中。 v-text,v-html是另外两种数据绑定方式。

v-bind:titleVue中的特殊指令，可以简写为:title,

v-on:click绑定点击事件

v-model 可以双向绑定数据，试试修改程序中的数据。

MVVM

MVVM是一种架构模式，并非一种框架，是一种思想，一种组织和管理代码的艺术。它利用数据绑定、属性依赖、路由事件、命令等特性实现高效灵活的架构。

在MVVM中，View和View Controller是联系在一起，可以把它们视为一个组件，View和View Controller都不能直接引用Model，而是通过引用视图模型（ViewModel），ViewModel是存放View Controller所需要数据的地方（View Controller敢要，ViewModel就敢给），使用MVVM会轻微的增加代码量，但总体上减少了代码的复杂性、耦合性。