碎言博客

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

J.sky 2020-01-10 21:18:43 Vue

Vue.js 简介

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

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

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

第一个Vue实例

<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="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:title Vue中的特殊指令,可以简写为 :title ,

v-on:click 绑定点击事件

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

MVVM

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

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

发现错误?想参与编辑? 在 GitHub 上编辑此页!

如果您有什么问题,欢迎加入Python/Javascript学习讨论群询问

Python/Javascript学习QQ群号:217840699