Vue简单入门

Vue的简介

Vue.js 是一套构建用户界面的渐进式框架。关于渐进式,指的是使用可以从简单到复杂,简单的可以只是为一个页面渲染数据,而复杂的是利用组件、路由等构建一个大型的应用。

相比于Angular和React,Vue的限制相比之下就少了很多,不需要使用指定的依赖注入、模块以及组件定义。Vue可以使用其他优秀的库,并且可以和已经开发的应用进行融合,而不需要重新开始。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。这使得Vue容易上手,学习成本比较低。

Vue采用的是MVVM模式
MVVM模型

ViewModel是Vue的一个实例,其DOM Listeners帮助监听DOM元素的变化,将变化传递给Model进行相应的改变,Data Bindings则监听Model中数据的改变,然后将改变传递给View层,对DOM进行相应的改变。这样就完成了View和Model的双向绑定。

Vue的引入

Vue可以通过cdn上面的文件引入

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

也可以通过

npm install vuejs

然后在文件中引入本地的vuejs即可。

Vue的简单使用

引入vuejs文件后,在js文件中创建一个Vue实例

var vm = new Vue({ 
    el:"#el", 
    data:{
        hello:"Hello Vuejs!"
    } 
}); 

然后在html文件中将这个实例挂载到一个元素上面,这里不推荐挂载到body元素上,Vue会对这种情况进行报错。

<div id="el">
    <div>{{hello}}</div>
</div>

这样这段html会被渲染成Hello Vuejs!的文本。

Vue的常用指令

v-model

可以在input、textarea等元素上创建双向绑定。

<div id="el">
    <p>{{message}}</p>
    <input type="text" v-model="message">
</div>
<script>
    var vm = new Vue({
        el: "#el",
        data: {
            message: "Hello Vuejs!"
        }
    })
</script>

这里写图片描述
初始时会显示Hello Vuejs!,在改变输入框的内容后,显示的内容会根据输入框中的内容进行同样的改变。
而在控制台中如果输入

vm.message = "Hello World!"

这里写图片描述
则显示的内容与输入框的内容都会改变为Hello World!。这是Vue双向绑定的一种使用。

v-if

v-if是条件渲染指令,根据表达式的真假对元素进行插入或者删除。

<div id="el">
    <p v-if="yes">YES</p>
    <p v-if="no">NO</p>
    <p v-if="age <= 25">age <= 25</p>
</div>
<script>
    var vm = new Vue({
        el: "#el",
        data: {
            yes: true,
            no: false,
            age: 25
        }
    })
</script>

这里写图片描述
渲染出来后YES和age <= 25都会显示,而NO不会显示。
这里写图片描述
同时通过控制台可以看到第二个p元素是没有渲染出来的。

v-show

v-show和v-if类似,都是条件渲染语句,不同在于v-show即使条件为false也是会被渲染在html文本中,只是style中的display属性改为了none。
这里写图片描述
v-show的使用与v-if类似。

v-else

v-else必须跟在v-if或者v-show后面,当条件不符合时,会显示v-else中的元素,而是否渲染在文本中则取决于前面使用的是v-if还是v-show。

v-for

v-for是一个遍历渲染,语法与js中遍历语法类似。

<div id="el">
    <div v-for="i in arr">
        <p>{{i}}</p>
    </div>
</div>
<script>
    var vm = new Vue({
        el: "#el",
        data: {
            arr: [1, 2, 3]
        }
    })
</script>

渲染后显示为
这里写图片描述
这里需要注意的是,由于vue的监听机制,如果改变数组序号或者直接给数组赋值的话,vue是不会监听到这种变化的,需要通过push、pop、split等方法改变数组,vue才会监听到变化并进行相应的渲染。

v-on

v-on用于监听DOM事件,然后监听到事件时调用相应的函数进行处理。

<div id="el">
    <p v-if="yes">YES</p>
    <div v-on:click="convert()">Convert</div>
</div>
<script>
    var vm = new Vue({
        el: "#el",
        data: {
            yes: true
        },
        methods: {
            convert: function() {
                yes = !yes;
            }
        }
    })
</script>

当点击Convert时,YES的文本会在显示和隐藏中不断切换。

阅读更多
文章标签: vue-js
个人分类: vue-js
上一篇系统分析与设计 作业2
下一篇系统分析与设计 Assignment4
想对作者说点什么? 我来说一句

Vue.js学习教程

2018年06月26日 64B 下载

没有更多推荐了,返回首页

关闭
关闭