前面提到过Angular,这次就讲讲同为前端框架的Vue。

 

Vue.js是什么？

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

如何安装vue.js?

这里介绍两种引入方式：

<1>通过<script>标签引入

•  

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

<2>使用NPM命令安装

•  

npm install vue

vue.js使用：

每个 Vue 应用都需要通过实例化 Vue 来实现，语法如下：

•  
•  
•  

var v = new Vue({   // 代码代码 })

‍

接下来让我们通过实例来看下 Vue 构造器中需要哪些内容:

•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  

<div id="minevue"> <h1>title : {{title}}</h1> </div> <script type="text/javascript"> var vm = new Vue({ el: '#minevue', data: { title: "helloWord" }, methods:{ getData:function(){ return this.title; } } }) </script

这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。

接下来我们看看如何定义数据对象。

data 用于定义属性，实例中属性为： title。

methods 用于定义的函数，可以通过 return 来返回函数值。

{{ }} 用于输出对象属性和函数返回值。

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。

基础模板语法：

{{}}：数据绑定；

•  
•  
•  

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

v-html:输出富文本标签内容；

•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  

<div id="app"> <div v-html="message"></div> </div> <script> new Vue({ el: '#app', data: { message: '<h1>菜鸟教程</h1>' } }) </script>

v-bind:html属性中的值;

•  
•  
•  
•  

<!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a>

v-if:条件语句；

•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  

<div id="app"> <p v-if="seen">现在你看到我了</p> </div> <script> new Vue({ el: '#app', data: { seen: true } }) </script>

v-else:常与v-if联合使用；

•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  

<div id="app"> <div v-if="Math.random() > 0.5"> Sorry </div> <div v-else> Not sorry </div> </div> <script> new Vue({ el: '#app' }) </script>

v-else-if：用作 v-if 的 else-if 块；

•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  

<div id="app"> <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div> </div> <script> new Vue({ el: '#app', data: { type: 'C' } }) </script>

*v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

v-on:监听 DOM 事件;

•  
•  
•  
•  
•  

<form v-on:submit.prevent="onSubmit"></form> <!-- 完整语法 --> <a v-on:click="doSomething"></a> <!-- 缩写 --> <a @click="doSomething"></a>

v-model:双向数据绑定；

•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  

<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div> <script> new Vue({ el: '#app', data: { message: 'Runoob!' } }) </script>

v-show:根据条件展示元素；

•  

<h1 v-show="true">Hello!</h1>

 

这次分享就到这里了，感兴趣的朋友可以自己试一下，有html,css，javascript基础者更容易上手哦!

 

附：个人博客：http://blog.hongxiawangluo.com/

 

赠：免费vue学习资料视频，关注公众号，回复“ vue课程”获得