一、Vue.js安装教程
方法一:去 Vue.js 的官网上直接下载 vue.min.js 放到你的项目目录下, 并用标签引入。
链接地址:https://cn.vuejs.org/v2/guide/installation.html。
方法二:使用CDN,在HTML文件头部引入
<script src="https://unpkg.com/vue/dist/vue.js">script>
二、Vue常用语法
更多详细教程见官网api,链接:https://cn.vuejs.org/v2/api
Vue主要由2大块组成:指令、组件,今天先了解指令(组件以后再详细介绍),首先了解一下文本插值,{{…}}(双大括号)将会是以后学习过程中最常用到的符号,{{ }}内可以用来绑定属性、绑定JS的表达式,举个例子:
<div id="test1">
<span>{{"你好,我今年"+(message+2)+"岁了"}}span>
div>
<script type="text/javascript">
new Vue({
el: '#test1',
data: {
message: 1
}
})
script>
打印结果:你好,我今年3岁了。
括号里的内容可以是简单的数学表达式,也可以是字符串拼接,官方给的标准是支持所有JavaScript 表达式,但只能操作文本。要操作节点就需要使用指令,指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM(之前介绍过Vue与响应式),Vue的指令都是以属性的方式添加的。
注意使用Vue时,HTML代码部分,必须要有一个大的容器来包裹你要操作的内容,并且给这个容器加一个id,以便js操作。Js部分,知道面向对象的都应该比较熟悉这种操作方式,new出来一个Vue函数实例,然后传参。具体套路就是
HTML部分:
<div id=”test”>
<span>span>
<div>div>
div>
JS部分:
new Vue({
el:”#test”,
data:{
message:””
}
});
一定要注意的细节就是id名前面一定要有#号,还有Vue的第一个字母一定要大写,因为传入的数据是{}json格式,所以一定要用逗号隔开。
1、v-html
这个指令是用来插入标签的。原生JS插入一个dom节点是很麻烦的,但是Vue帮我们简化了这个步骤。
<div id="test3">
<div v-html="msg">div>
div>
<script type="text/javascript">
new Vue({
el:"#test3",
data:{
msg:'你好,我是通过v-html插入进来的'
}
});
script>
打开控制台会发现多了一个标签。
2、v-model
这个指令仅用于表单控件,、
、
,可以很轻松的实现表单控件和数据的双向绑定。
<div id="test6">
<textarea type="" name="" v-model="msg">textarea>
<br>
<span>{{msg}}span>
div>
<script type="text/javascript">
new Vue({
el:"#test6",
data:{
msg:"我输出什么,它就跟着我输出什么"
}
});
script>
3、v-show
切换元素的 display CSS 属性来显示隐藏目标。
<div id="test4">
<p v-show="msg">我可以隐藏p>
div>
<script type="text/javascript">
new Vue({
el:"#test4",
data:{
msg:true
}
});
script>
将msg的值改为false
4、v-if
好玩儿的来了。下面我会配合几个指令做一个点击显示隐藏的效果
<div id="test5">
<button v-on:click="eventByZM">点我button>
<div v-if="switchByZM" class="show1">div>
<div v-else class="show2">div>
div>
<script type="text/javascript">
new Vue({
el:'#test5',
data:{
switchByZM:true
},
methods:{
eventByZM(){
this.switchByZM = !this.switchByZM
}
}
});
script>
顺便可以感受一下jQuery写的点击切换
<button id="btn">点我button>
<div class="show1">div>
<div class="show2">div>
<script type="text/javascript">
var ready = true;
$('.show2').css("display","none")
$('#btn').on('click',function(){
if(ready){
$('.show1').css("display","none")
$('.show2').css("display","block")
ready = false;
}else{
$('.show2').css("display","none")
$('.show1').css("display","block")
ready = true;
}
});
script>
之前有说过jQuery会频繁操作dom节点,造成浏览器性能问题,这里就可以看出来了。
这里用了三个指令:v-on:click,v-if,v-else。
v-on : click 可以简写为@click,它是用来绑定事件的,Vue最新版本支持的事件有
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
v-if和v-else一般成对出现,注意一点,v-if和v-show的区别在于,v-if在切换时元素及它的数据绑定 / 组件会被销毁并重建,而v-show是切换它的display css样式,两者是不同的。
5、V-bind
V-bind可以直接简写为:,这个属性常用于标签的href属性,
标签的src属性
<div id="test7">
<a :href="taobao">淘宝a>
div>
<script type="text/javascript">
new Vue({
el:"#test7",
data:{
taobao:"https://www.taobao.com/"
}
});
script>
以后会经常用到。
6、v-text
v-text这个指令,我的理解就是它是用来复制指定文本用的
<div id="test2">
<span v-text="msg">span>
<p>{{msg}}p>
<p>{{msg}}p>
<p>{{msg}}p>
<p>{{msg}}p>
div>
<script type="text/javascript">
new Vue({
el:"#test2",
data:{
msg:"你好,我是指令v-text"
}
});
script>
打印结果:
你好,我是指令v-text
你好,我是指令v-text
你好,我是指令v-text
你好,我是指令v-text
你好,我是指令v-text
常用的指令大概就是这几个。官网的教程比较详细,为了方便理解,我都把简化版的练习代码放在文章里面了,有空的话还是建议自己敲一遍加深理解。