vue介绍及快速安装基础入门教程

kano个人技术博客 web前端开发 1,203 次浏览 没有评论

kano技术博客今天来给大家介绍一款优秀的前端框架——Vue.js,Vue.js项目结构这两年的火热程度,只要是稍微留意前端资讯的开发者都不必再提了,本文是一个Vue.js教程的快速入门,旨在抛砖引玉。

vue.js

※ 为简便期间,下文中将简称为vue。

一、vue安装

只需要引入一个js:{

开发版本: https://cdn.jsdelivr.net/npm/vue/dist/vue.js

生产版本: https://cdn.jsdelivr.net/npm/vue

}

如果你想研究学习一下源码的话就引开发版本,否则引生产版本。

Vue还提供了一个构建项目的官方工具:vue-cli(vue脚手架),可以用来构建一个完整的webpack项目,用户需要了解Node.js的构建工具(npm)和webpack,不建议新手直接使用。

二、基本用法

首先我们来看一个简单的例子:

<div id="app">
  {{mess}}
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      mess: '花生'
    }
  });
</script>

运行,页面上输出:

vue入门

你的第一个Vue应用项目就创建出来了!我们使用 new Vue 的方法来创建Vue应用,el是我们要挂载Vue应用的根元素,在这里是id为app的元素;data是我们的Vue应用中需要的数据。然后我们看到直接在“{{}}”中写这个变量,变量就直接输出在网页中了。

接下来可以看到一件更神奇的事,在控制输入app.mess = “苹果”:

vue入门

页面上的“花生”变成了“苹果”

vue入门

这就是Vue的动态数据绑定!当数据发生变化的时候,视图就会实时响应,而不用手动的去渲染视图!如果读者之前没有用过mvvm类的框架的话,那么这个功能应该是比较惊艳的了。

每个vue实例都会代理其data对象里的所有的属性:{

var data = {a: 1}

var vm = new Vue({

data: data

})

vm.a === data.a // -> true

// 设置属性也会影响到原始数据

vm.a = 2

data.a // -> 2

// … 反之亦然

data.a = 3

vm.a // -> 3

需要注意的一点是,如果vue实例创建好之后在向其data属性中添加新属性,则不会触发视图更新,所以需要响应的数据应该提前都放到data属性中

}

三、插值

插值就是在html页面中输出变量或表达式的值的方法,在上面的例字中我们已经看到过,语法为{{<data>}},data是Vue的数据。{{}} 这种标签的学名是Mustache标签,放在Mustache标签内的文本称为绑定表达式。

之前只是在{{}}中把变量简单的打印输出出来,但实际上它支持任何合法的单个表达式(注意是表达式,逻辑语句什么的是无法执行的),如:

{{mess.split("").reverse().join("")}}

vue教程

四、指令

指令看上去就像是html标签中带有 "v-" 前缀的属性,指令的值限定为绑定表达式,也就是说指令的值实际上是和放在Mustache标签中的值一样的。下面介绍一下vue的常见指令及其作用。

 

1. v-if

控制是否把标签渲染到html中

<div class="d1" v-if="div1_show">
  div1内容
</div>
<div class="d2" v-if="div2_show">
  div2内容
</div>
 
data: {
  div1_show: false,
  div2_show: true
}

vue入门

可以看到页面中只显示了div2,我们再打开控制台:

vue.js

会发现只有第二个div

vue.js

也就是说,当v-if指令中的值为true或者是真值(能转化为true)的时候,标签显示,否则标签不显示。

有时候,我们想要控制其显示隐藏的元素并不在标签中,如:

<div class="d1">
  内容1  内容2
</div>

我们也想用v-if控制内容1和内容2的显示,但是如果强行加标签则会破坏原本的html结构,这时我们可以用到template元素:

<div class="d1">
  <template v-if="show1">
    内容1
  </template>
  <template v-if="show2">
    内容2
  </template>
</div>
 
data: {
  show1: false,
  show2: true
}

vue入门

结果只有内容2,我们再打开控制台看一下html:

vue.js

template标签并没有显示出来,所以当我们要控制其显示的内容并不是一个标签的时候,可以使用template,它并不会渲染到页面中。

2. v-show

控制元素是否显示,作用和v-if类似,不同的是v-show不会把元素从dom中移除,而是切换其display;而v-if元素将在条件为false时把元素从文档中移除

<div class="d1" v-show="show1">
  啊啊啊啊
</div>
 
data: {
  show1: false
}

这样页面不会显示d1标签,我们看一下标签:

vue教程

标签的display设为了none

3. v-else

跟在v-if后面使用,作用类似条件运算符的if..else,这里就不多做解释了。需要注意虽然v-if和v-show都是控制元素的显示,但是v-else不能跟在v-show后面。

<div class="d1" v-if="show1">
  啊啊啊啊
</div>
<div class="d2" v-else>
  额鹅鹅鹅
</div>

附:v-if vs. v-show 关于二者的区别,贴一段官方文档的解释

在切换 v-if 块时,Vue.js 有一个局部编译/卸载过程,因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。

v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——在条件第一次变为真时才开始局部编译(编译会被缓存起来)。

相比之下,v-show 简单得多————元素始终被编译并保留,只是简单地基于 CSS 切换。

一般来说,v-if 有更高的切换消耗而v-show 有更高的初始渲染消耗。因此,如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好。

4. v-for

用来遍历输出一个数组,用法类似 for..in 循环,非常常用的一个指令

<span v-for="item in arr1">
  {{item}}
</span>
 
data: {
  arr1: ['哈哈哈', '呵呵呵', '咩咩咩']
}

vue教程

如果我们遍历时需要数组的下标,可以使用如下写法:

<span v-for="(item, key) in arr1">
  {{item}} {{key}}
</span>

vue教程

另外v-for还有一种特殊用法:

<span v-for="i in 10">
  哈哈哈
</span>

vue教程

页面上输出了10遍“哈哈哈”,也就是说如果你只是单纯的想把某个标签输出指定次数时很好用(个人调列表样式时经常使用)。

5. v-bind

绑定html属性,可在任意html属性中使用,相当于属性中的{{}}:

<img v-bind:src="src1" alt="">
<a v-bind:href="href1">链接到百度</a>
 
data: {
  src1: '/xiao/a.jpg',
  href1: 'http://www.baidu.com/'
}

vue教程

因为属性绑定很常见,vue对齐有一个简写,“v-bind:<属性名>”可以简写成“:<属性名>”:

<img :src="src1" alt="">
<a :href="href1">链接到百度</a>

我们一般都会使用简写

6. v-on

会在下面的“方法和时间处理器”中介绍

五、方法和事件处理器

在Vue中使用 v-on 指令来监听事件,使用methods中的方法来做事件处理函数,比如原生js中的onclick事件,在vue中用v-on:click来监听,下面来看一个例子:

<div v-on:click="dian()">
  {{tx1}}
</div>
 
data: {
  tx1: '哈哈哈'
},
methods: {
  dian: function () {
    alert('点了!');
  }
}

当我们点击元素的时候,可以看到弹框:

vue教程

上面出现了一个之前我们没见过的Vue属性:methods,这里面存的是Vue的方法,如上面写的“dian”方法,在v-on:click中就可以直接写里面作为事件处理器。

事件处理也是非常常用的功能,也有一个简写,“v-on:事件名”可以简写成“@:事件名”,如上面的“v-on:click”可以简写成“@click”。实际的应用中一般也是用简写的。

事件修饰符:用来处理事件的一些简便写法。

1. stop和prevent

在事件处理器中经常需要调用 event.preventDefault() 或 event.stopPropagation(),在vue中可以通过.stop和.prevent修饰符轻松做到,如:{

v-on:click.stop  阻止点击事件冒泡

v-on:click.stop.prevent 可以一起使用,阻止默认点击事件并阻止事件冒泡(比如用在<a>这种点击默认行为是跳转的标签)

v-on:submit.prevent 阻止表单提交

}

2. 键盘码和常用按键名

在监听键盘事件时,我们经常需要检测 keyCode。Vue.js 允许为 v-on 添加按键修饰符,这样我们就可以在处理函数中省去对按键的判断了,如:{

v-on:keydown.65="fun1" 当keyCode为65时才调用方法fun1

}

记住keyCode比较困难,每次用到的时候需要去查一下js的keyCode表,所以vue对常用按键提供了别名:{

enter  tab  delete  esc  space  up  down  left  right

这样,在监听按下空格时,使用 @keyDown.space 就可以了

可以自定义按键别名:Vue.directive('on').keyCodes.f1 = 112  这样使用时就可以用 f1 作为 keyCode(112) 的别名了

}

跟随kano个人博客的讲解想入门vue的小伙伴能摸清个门路了吧。好东西就需要不断的分享给有需要的人,感兴趣的话今后kano还会分享更多关于vue组件、路由、vue2.0等等细节性的知识点,欢迎持续关注!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Go