第十期分享:前端框架之VUE(一)

75人浏览 / 0人评论

前面提到过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课程”获得

 

 

 

 

 

 

 

 

 

 

 

 

 

 

全部评论