什么是vue.js
-
Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）
-
Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！
-
Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）
基本指令
vue.min.js 官网下载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
<span>{{msg}}</span>
</div>
</body>
<script type="text/javascript">
创建一个vue的实例,当页面引入vue.min.jshou,浏览器的内存中会存在一个vue的构造函数
new 出来的 vue对象就是 MVVM中的 VM调度者
var vm = new Vue({
el:'#app',当前的vue实例,会控制页面中id是app的区域
data:{data属性中,存放的时el区域要用到的数据
msg:'hello vue '
}
})
</script>
</html>
v-cloak 指令
当引用的vue.js库没有完成加载时,html中的{{msg}}表达式就会展示成原始代码
可以在标签中加上 v-cloak,在style中设置display：none即可
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
<div id="app">
<span v-cloak>{{msg}}</span>
</div>
插值表达式
- {{msg}}
会出现上述表达式展示源码问题，但是该方式不会影响标签中除表达式外的其他内容
例：<span>这是{{msg}}的内容</span>
- v-text="msg"
不会出现上述表达式展示源码问题，但是该方式会覆盖标签中的内容
例：<span v-text="msg">vue text</span>
若msg是abc 则vue text将被替换成abc
- v-html="msg"
如果需要向页面中写入HTML标签时,则需要使用 v-html
<div id="app">
<span v-html="msg1"></span>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
msg:'<h2>我是H2</h2>'
}
})
</script>
v-bind 用于绑定属性的指令
var vm = new Vue({
el:'#app',
data:{
value1:'按钮'
}
})
<input type="button" value="value1" name="" >
效果如下：
image.png
<input type="button" v-bind:value="value1" name="" >
效果如下：
image.png
v-bind 简写方式, 效果一样
<input type="button" :value="value1" name="" >
v-on:click 标签绑定单击事件
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
value1:'按钮',
},
methods:{在这里定义当前vue实例用到的函数
show:function(){ alert("绑定点击事件") }
}
})
<input type="button" value="按钮1" name="" v-on:click="show" >
v-on： 简写方式 @
<input type="button" value="按钮1" name="" @click="show" >
在methods中的函数如果想要获取data中定义的属性值
可以通过this.属性名获取,this.方法名
var vm = new Vue({
el:'#app',
data:{
msg:'hello vue ',
value1:'按钮',
},
methods:{
show:function(){ alert("绑定点击事件") },
show2:function(){ alert(this.msg); }
}
})
vue会监听data中属性值的变化,并且实时更新到页面中
<div id="app">
<span v-cloak>{{msg}}</span>
<input type="button" value="按钮3" name="" @click="show3" >
</div>
var vm = new Vue({
el:'#app',
data:{
msg:'hello vue ',
},
methods:{//在这里定义当前vue实例用到的函数
show3:function(){ this.msg='msg value changed'; }
}
})
-
点击按钮3之前页面展示
image.png
-
点击按钮3之后页面展示
image.png
事件修饰符
- stop 阻止事件冒泡
var vm = new Vue({
el:'#app',
data:{
msg:'hello vue ',
msg1:'<h2>我是H2</h2>',
value1:'按钮',
},
methods:{
show4:function(){ alert('4'); },
show5:function(){ alert('5'); }
}
})
<div @click="show5">
<input type="button" value="按钮4" name="" @click.stop="show4" >
</div>
- capture 监听捕获事件
var vm = new Vue({
el:'#app',
data:{
msg:'hello vue ',
msg1:'<h2>我是H2</h2>',
value1:'按钮',
},
methods:{
show4:function(){ alert('4'); },
show5:function(){ alert('5'); }
}
})
<div @click.capture="show5">
<input type="button" value="按钮4" name="" @click.stop="show4" >
</div>
结果： 【点击按钮4,会先弹出5 ,再弹出4.】
- self 只有元素本身可以触发绑定的事件
var vm = new Vue({
el:'#app',
data:{
msg:'hello vue ',
msg1:'<h2>我是H2</h2>',
value1:'按钮',
},
methods:{
show4:function(){ alert('4'); },
show5:function(){ alert('5'); }
}
})
<div @click.self="show5">
<input type="button" value="按钮4" name="" @click="show4" >
</div>
结果： 【点击div时,只会弹出5 ,不再弹出4.】
v-model 实现数据双向绑定；只能用于表单元素
var vm = new Vue({
el:'#app',
data:{
msg:'hello vue ',
}
})
<input type="text" value="按钮7" name="" v-model="msg" >
结果：【当文本框中的值改变时,data中的msg也随之改变】
v-once 如果展示的信息后续不需要再修改,可以使用该指令,可以提高性能
vue中样式的操作
- :class="['类选择器','类选择器',..]" 括号中的类选择器一定要有单引号括起来
- 如果没有单引号,则会被当做data中的属性，例如案例代码中的 flag
- 括号中可以使用表达式
<style type="text/css">
div{
width: 300px;
height: 100px;
}
.showStyle1{
color:blue;
}
.showStyle2{
font-size:30px;
}
.showStyle3{
background-color: green;
}
</style>
<div :class="['showStyle1','showStyle2',flag?'showStyle3':'']">
div中的内容
</div>
var vm = new Vue({
el:'#app',
data:{
flag:true,
}
})
-
当flag为true时，效果如下 （请自行忽略我的程序员配色）
image.png
-
当flag为false时，效果如下
image.png
简写方式,效果相同
<div :class="['showStyle1','showStyle2',{showStyle3:flag}]">
div中的内容
</div>
:class={样式名：boolean,样式名：boolean,...} 效果同上
<style type="text/css">
div{
width: 300px;
height: 100px;
}
.showStyle1{
color:blue;
}
.showStyle2{
font-size:30px;
}
.showStyle3{
background-color: green;
}
</style>
<div :class="{showStyle1:true, showStyle2:true, showStyle3:false}">
div中的内容
</div>
:class="data中属性" 效果同上
var vm = new Vue({
el:'#app',
data:{
styleObj:{showStyle1:true, showStyle2:true, showStyle3:false}
}
})
<div :class="styleObj"> div中的内容 </div>
v-for 指令 用于遍历数组、集合
ar vm = new Vue({
el:'#app',
data:{
list1:['一班','二班','三班','四班','五班']
},
methods:{//在这里定义当前vue实例用到的函数
}
})
item 是数组或集合中的每个实例，只是一个变量名称，写法不是固定的
<p v-for="item in list1">{{item}}</p>
v-for="(item,i) in List" i 是每个实例的下标,从 0 开始
遍历复杂集合
var vm = new Vue({
el:'#app',
data:{
list2:[
{id:'1' ,name :'zsa1'},
{id:'2' ,name :'zsa2'},
{id:'3' ,name :'zsa3'}
]
},
methods:{//在这里定义当前vue实例用到的函数
}
})
<p v-for="user in list2">编号：{{user.id}},姓名：{{user.name}}</p>
如果 in 后面是一个数字 ,count则从1 开始
<p v-for="count in 10">{{count}}</p>
分支结构
- 只有表达式符合成立的标签才会展示
var vm = new Vue({
el:'#app',
data:{
score:'69'
},
methods:{//在这里定义当前vue实例用到的函数
}
})
<div id="app">
<p v-if="score>80 && score<90">良好</p>
<p v-else-if="score>80 && score<100">优秀</p>
<p v-else="score<80">及格</p>
</div>
v-show 功能与v-if相同，区别在于v-show的条件表达式为false时，实际上标签已经存在网页中，只不过设置成display:none
而v-if 并不会将标签画出
var vm = new Vue({
el:'#app',
data:{
showFlag:false
},
methods:{//在这里定义当前vue实例用到的函数
}
})
<div id="app">
<div v-show="showFlag">演示v-show</div>
</div>
-
查看网页源码
image.png
v-for 与 v-if 集合使用
<p v-if="user.id=='2'" v-for="user in list2">编号：{{user.id}},姓名：{{user.name}}</p>
vue 的常用特性
- 表单特性 ：表单中的组件都是基于v-model进行数据绑定的
- 单选框,复选框,下拉选不需要配置相同的name组,只要绑定相同的v-model即可
<input type="radio" name="" value="1" v-model="sex"> 男
<input type="radio" name="" value="2" v-model="sex"> 女
var vm = new Vue({
el:'#app',
data:{
sex:'1'
},
methods:{//在这里定义当前vue实例用到的函数
}
})
- sex 初始值时1 ,页面则默认选择男
- 注意： 下拉选的v-model 绑定在<select> 标签中
表单修饰符
- v-model.number 将字符串转为数字
- v-model.trim 去除字符串两边的空白字符
网友评论