一、VUE的介绍
面试或者笔试要问
- 类似于 view,vue是一套构建用户界面的`渐进式框架
Vue 只关注视图层, 采用
自底向上增量开发`的设计。- 采用MVVM设计模式
- vue是基于MVVM(M:model(数据处理) V:view VM:viewmodel(业务逻辑层))设计模式,支持数据的双向绑定(v-model)
- MVC设计模式:
M model数据层(进行价格之类的数据处理) 、V:view视图层、C:conreol控制层(判断、循环等逻辑) 与js不同的是不需要再获取元素了
二、vue的安装
2.1 下载vue.js直接引入
<script src="vue.js"></script>
2.2 通过CDN加载
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
2.3 npm安装
npm install vue -g
npm install vue-cli -g
通过
npm run dev 启动项目(2.0) npm run serve(3.0)
npm run build 打包项目
三、vue的基本使用
- 1.el为vue的作用范围,代表元素标签,作用是将div联系起来(相当于挂载)
- 2.data为vue的数据,有对象和函数两种形式,若是对象,里面写键值对,里面的值可以在标签使用或则js里使用
- 3.methods里面的方法需要用逗号隔开
- 4.this绑定了整个vue实例,所以this.变量名可以获取值
- 5.
标签
里面获取data的值
5.1、{ {data里面的变量名}}
5.2、{ {方法名()}}
和4.1里面的插值 - 6.必写data、el、methods
<div id="app">
<!-- 1.{
{变量名}}获取值 -->
<p>{
{msg}}</p>
<!-- 2.{
{方法名()}}获取值 -->
<p>{
{getData()}}</p>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
new Vue({
// 选项(必写el、data、methods)
// 3.0.el代表element:元素标签
// 3.1.这里写最大div的id名称,建议用id
// 3.2.作用:将div联系起来(相当于挂载),不需要获取了
el:'#app',
// 4.普通的data 里面写键值对
// 作用:里面的值可以在标签使用或者js里面使用
data:{
msg:'学习vue'
},
// 5.1组件时的data(简写方法)
// data(){
// return{}
// },
// 6.方法(里面的方法需要简写)
methods:{
getData(){
// 6.1this绑定了整个vue实例
// 6.2所以this.msg可以获取值
return this.msg
}
}
})
</script>
四、vue的常见指令(重点)
4.1vue的插值
<!-- 方式一:采用{
{变量名}}插入文本值 -->
<p>{
{text}}</p>
<!-- vue指令 -->
<!-- 方式二:v-text="data的变量名"插文本值 -->
<p v-text="text"></p>
<!-- 方式三:v-html="data的变量名"插文本值 -->
<p v-html="msg"></p>
<!-- 方式四:{
{方法名()}}插入值 -->
<p>{
{getData()}}</p>
v-text和v-html的区别
- 1.v-html相当于innerHtml,可以识别标签+文本 注意:v-html不建议动态渲染标签,容易受到xss攻击。禁止在提交内容上使用
- 2.v-text相当于innerText,可以识别文本
<div id="app">
<!-- 方式一:采用{
{变量名}}插入文本值 -->
<p>{
{text}}</p>
<!-- vue指令 -->
<!-- 方式二:v-text="data的变量名"插文本值 -->
<p v-text="text"></p>
<!-- 方式三:v-html="data的变量名"插文本值 -->
<p v-html="msg"></p>
<!-- 方式四:{
{方法名()}}插入值 -->
<p>{
{getData()}}</p>
<!-- v-text和v-html的区别
1.v-html相当于innerHtml,可以识别标签+文本 注意:v-html不建议动态渲染标签,容易受到xss攻击。禁止在提交内容上使用
2.v-text相当于innerText,可以识别文本
-->
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
msg:'<b>学习vue</b>',//不建议写标签
text:'插值'
},
methods:{
// 6.1简写方法
getData(){
return this.msg
}
}
})
</script>
4.2 vue中的条件语句
- v-if=“布尔值”,true则显示,false则隐藏(标签名都不在了)
- v-else
- v-else-if
<div id="app">
<!--
v-if="布尔值",true则显示,false则隐藏(标签名都不在了)
v-else
v-else-if
-->
<!-- 单向分支 -->
<p v-if="true">我显示了</p><!--显示-->
<p v-if="false">我隐藏了</p><!--隐藏-->
<p>赚大钱</p>
<!--双向分支-->
<p v-if="flag">认真学习</p>
<p v-else>好好玩耍</p>
<!-- 多分支 从大到小 -->
<p v-if="score>=90">你真棒!</p>
<p v-else-if="score>=60">革命没成功!继续努力</p>
<p v-else>你是猪吗</p>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
flag:'true',
score:90
},
methods:{
}
})
</script>
4.3 vue的显示隐藏
方式一:v-if的隐藏 true显示 false隐藏(标签都不在了)
<p v-if="false">我们来玩捉迷藏</p>
方式二:2.v-show的隐藏 true显示 false隐藏
<p v-show="false">你来找找我在哪儿</p>
v-if和v-show的区别:
v-if 隐藏是直接将该元素移除
v-show是将元素设置为display:none进行隐藏
<div id="app">
<!-- 1.v-if的隐藏 true显示 false隐藏(标签都不在了)-->
<p v-if="false">我隐藏了</p>
<!-- 2.v-show的隐藏 true显示 false隐藏 -->
<p v-show="true">see you</p>
<!-- 3.v-if和v-show的区别
3.1v-if隐藏就是直接移除元素(标签)
3.2v-show隐藏通过display:none;进行隐藏
-->
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
},
methods:{
}
})
</script>
4.4vue点击事件
<div id="app">
<!--双向分支-->
<p v-if="flag">认真学习</p>
<p v-else>好好玩耍</p>
<!-- 点击事件 -->
<button v-on:click="change">切换</button>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
flag:'true',
},
methods:{
change(){
this.flag=!this.flag
}
}
})
</script>
4.5绑定样式
1.v-bind可以简写为":"
2.方法一:传入对象,多个对象采用","连接;写法:v-bind:class="{class名:true/data里面的变量}
3.方式二:传入数组 写法v-bind:class=[data的变量1,data的变量2],这个会自动解析数组里面的值
4.方式三:内联样式(不推荐)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.gbColor{
width: 300px;
height: 50px;
line-height: 50px;
text-align: center;
background: lightblue;
}
.color{
color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- 1.方法一:传入对象,多个对象采用","连接;写法:v-bind:class="{class名:true/data里面的变量}"
-->
<p v-bind:class="{gbColor:isActive,color:true}">鞠婧祎</p>
<!-- 2.方式二:传入数组 写法v-bind:class=[data的变量1,data的变量2],这个会自动解析数组里面的值 -->
<p v-bind:class=[bg,textColor]>满月之下请相爱</p>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
isActive:true,
// 值写class名称
bg:'gbColor',
textColor:'color'
}
})
</script>
</body>
</html>
4.6vue的事件处理
- 1.v-on可以简写为@,":"也不要了,比如@click
- 2.方法一:直接调用处理数据 num++
- 3.方法二:触发处理函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
width: 300px;
height: 50px;
line-height: 50px;
text-align: center;
background: #ccc;
}
p.active{
background: lightseagreen;
}
</style>
</head>
<body>
<!-- 1.v-on可以简写为@,":"也不要了,比如@click -->
<div id="app">
<!-- 2.事件绑定
2.1方法一:直接调用处理数据 num++
2.2方法二:触发处理函数
2.3按键修饰符 写法:比如@keyup.按键别名、v-on:click.stop .stop阻止冒泡 .once只触发一次
-->
<!-- 方式一:直接调用处理数据 -->
<p v-on:click="changeColor()" v-bind:class="{active:isActive}"><button v-on:click.stop="num--">-</button>{
{num}}<button v-on:click.stop="num++">+</button></p>
<input v-on:keyup.enter="submit()"/>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
num:1,
isActive:false
},
methods:{
changeColor(){
this.isActive=!this.isActive
},
submit(){
console.log(111)
}
}
})
</script>
</body>
</html>
4.7事件修饰符
.stop 阻止事件冒泡行为
.prevent 阻止事件默认行为
.capture 使用事件捕获模式
.self 阻止事件委派(只能当前元素触发事件而不是子元素)
.once 事件只触发一次
- 写法:比如v-on:click.stop
4.8按键修饰符
.enter 回车键
.tab tab键
.delete (捕获 “删除” 和 “退格” 键)
.esc ESC键
.space 空格键
.up 上键
.down 下键
.left 左键
.right 右键
.ctrl Ctrl键
.alt alt键
.shift shift键
.meta meta键
写法:比如@keyup.按键别名
4.9循环出数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;padding: 0;}
ul{
list-style: none;
display: flex;
justify-content: space-between;
}
ul>li{
width: 240px;
height: 466px;
}
ul>li .meiyuan{
color: #e4393c;
}
ul>li .price{
color: #e4393c;
font-size: 20px;
}
ul>li .desc{
font-size: 12px;
color: gray;
}
#wrap{
width: 1300px;
margin: 100px auto;
}
</style>
</head>
<body>
<div id="wrap">
<ul>
<li v-for="(val,index) in pic" :key="val.id">
<!-- 标签里面获取v-for里面的值:{
{变量名.data里面的变量名}} -->
<img :src=`image/${val.path}`>
<p><span class="meiyuan">{
{val.meiyuan}}</span><span class="price">{
{val.price}}</span></p>
<p class="desc">{
{val.desc}}</p>
</li>
</ul>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el:'#wrap',
data:{
pic:[
{
path:'jjy1.jpg',
meiyuan:'¥',
price:"199",
desc:'鞠婧祎雷初同款白色海军领毛呢外套女秋呢子大衣 图片色 S'
},
{
path:'jjy2.jpg',
meiyuan:'¥',
price:"299",
desc:'鞠婧祎雷初夏同款泰迪熊大衣中长羊羔毛卷毛外套女预售 同款外套 S'
},
{
path:'jjy3.jpg',
meiyuan:'¥',
price:"250.04",
desc:'雷初夏鞠婧祎同款衣服连帽衫宽松卫衣白色宽松卫衣 图片色 S'
},
{
path:'jjy4.jpg',
meiyuan:'¥',
price:"299.04",
desc:'鞠婧祎同款小香风针织条纹宽松时尚毛衣女 上衣 L'
},
{
path:'jjy5.jpg',
meiyuan:'¥',
price:"399.04",
desc:'鞠婧祎雷初夏同款黑色丝绒上衣波点网纱拼接预售 同款上衣 S'
}
]
},
methods:{
}
})
</script>
</body>
</html>
4.10双向数据绑定
- 1.
什么是双向绑定:先解释单向绑定,view拿到data的数据不能跟新了,有了v-model,view数据更新,data也能更新,从而让页面也能更新,比如在输入框上面输入值,下面的p标签会实时更新值
- 2.
双向绑定是MVVM设计模式
- 3.
什么是vue,它是渐进式框架,是MVVM设计模,有着丰富的指令
- 4.v-model绑给需要更新数据的,比如input输入框、form表单、单选框、复选框、下拉框
- 5.写法:v-model=“data里面的变量名”
- 6.v-model可以删除
<div id="app">
<!--输入框 -->
<input type="text" v-model="msg">
<p>{
{msg}}</p>
<hr>
<!--2.小购物车 -->
单价:<input type="text" v-model="price"/><br>
数量:<input type="number" v-model="num"/>
总价:<p>{
{price*num}}</p>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
msg:'',//这里为初始数据,可以不写
price:10,
num:2,
msg2:'',
sex:'',
foods:[],
city:'成都'
},
methods:{
}
})
</script>
4.11vue的表单
- 1.vue中采用v-model进行数据双向绑定
- 2.单选框 v-model里面写的变量一样的而且还是字符串,value里面的值给v-model了
- 3.复选框 v-model里面的变量是数组,value给v-model
- 4.下拉框中name和v-model给select,value给option
<div id="app">
<!--3.单选框 v-model里面写的变量一样的而且还是字符串,value里面的值给v-model了 -->
<input type="radio" name="sex" value="男" v-model="sex"/>男
<input type="radio" name="sex" value="女" v-model="sex"/>女
<input type="radio" name="sex" value="保密" v-model="sex"/>保密
<p>性别:{
{sex}}</p>
<!-- 4.复选框 v-model里面的变量是数组,value给v-model -->
<hr >
<h2>复选框</h2>
<p>你最想吃啥:</p>
<input type="checkbox" name="foods" value="重庆火锅" v-model="foods">重庆火锅
<input type="checkbox"