前言:Vue是一款前端渐进式框架,可以提高前端开发效率。
特点:
Vue通过MVVM模式,能够实现视图与模型的双向绑定。简单来说,就是数据变化的时候, 页面会自动刷新, 页面变化的时候,数据也会自动变化。MVVM(Model-View-ViewModel)是一种软件设计模式,由微软WPF(用于替代WinForm,以前就是用这个技术开发桌面应用程序的)和Silverlight(类似于Java Applet,简单点说就是在浏览器上运行WPF)的架构师Ken Cooper和Ted Peters开发,是一种简化用户界面的事件驱动编程方式。
引入Vue.js maven方式:
<!-- 在线导入 -->
<!-- 开发环境版本,包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 本地导入 -->
<script src="node_modules/vue/dist/vue.js"></script>
或者:点击去Vue.js (vuejs.org)https://cn.vuejs.org/
Vue的基本参数:
el:元素的挂载位置值可以dom元素
data:是数据
模板语法
差值表达式:
指令:就是命令,自定义属性,指令格式以v-开始,如v-cloak
v-text:填充纯文本比差值表达式更加简洁
v-html:存在安全问题.可编译标签,不能在第三方上使用
v-pre:显示原始信息,不经过编译,让vue语法失效,写法与v-cloak一致
v-once:只进行一次编译,不会随着数据的变化页面也随之变化
数据响应式:数据的变化页面也随之变化,用vm做为vue对象名
v-model:双向的数据绑定,数据的变化页面也随之变化
m v vm设计思想
在页面修改数据是view在向model传数据
在控制器修改数据是model在向view传数据
事件绑定:
v-on==@
this. :当前的vue对象
接收参数用 p 最后一个参数永远是$event
v-on:click.stop:阻止向上冒泡,阻止事件冒泡,如果有嵌套,只执行本身事件
v-on:click.prevent:阻止本身默认行为
按键修饰符:
.enter回车键
.esc退出键
.delete删除键
自定义按键:
Vuc.config.keyCode.f1=65
属性绑定
<a V-bind:href='url'>==<a :href='url'>
样式绑定
实操:
<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
<style type="text/css">
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<div v-cloak>{{ msg }}</div>
<div v-text="msg+1"></div>
<div v-html="msg1"></div>
<div v-pre>{{ msg }}</div>
<div v-once>{{ msg }}</div>
<div>{{ msg1 }}</div>
<input type="test" v-model="msg1"/>
<div>{{ num }}</div>
<button v-on:click="num++">点击</button>
<button @click="num++">点击1</button>
<button @click="handle">点击2</button>
<button @click="handle('123','456',$event)">点击3</button>
<div v-on:click="handle1">
<button v-on:click.stop="handle2">点我4</button>
</div>
<a href="http://www.baidu.com" v-on:click.prevent="handle3">百度</a>
<div>
<input type="text" v-model="username" v-on:keyup.enter="handle3">{{ username }}
<input type="text" v-model="pass" v-on:keyup.delete="handle4">
<input type="text" v-model="pass" v-on:keyup.f1="handle5">
</div>
<div>
<a v-bind:href="test">去百度</a>
<a :href="test">去百度</a>
</div>
<div>
<input type="text" v-bind::value="info" v-on:input="handle7">{{ info }}
</div>
</div>
</body>
<script type="text/javascript">
Vue.config.keyCodes.f1 = 65
var vm=new Vue({
el:"#app",
data:{
msg:"hello,world",
msg1:"<h1>hello,vue</h1>",
num:0,
username:"hi",
pass:"123",
test:"http://www.baidu.com",
info:"",
},
methods: {
handle:function(p,p1,event){
console.log(this==vm);
console.log(p,p1);
console.log(event.target.innerHTML);
this.num++;
},
handle1:function(){
this.num++;
},
handle2:function(){
},
handle3:function(){
console.log(this.username)
},
handle4:function(){
this.pass="";
},
handle5:function(event){
console.log(event.keyCode)
},
handle7:function(event){
this.info=event.target.value;
}
},
})
</script>
</html>
对象语法
isactive
inerror
数组语法
activeClass
erriveClass
style样式
对象语法
实操:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<style type="text/css">
.active{
border: 1px solid aqua;
width: 200px;
height: 200px;
}
.error{
background-color: rebeccapurple;
}
</style>
<body>
<div id="app">
<!--针对的是class样式-->
<!--对象语法-->
<div v-bind:class="{active:isactive,error:iserror}">
111
</div>
<button v-on:click="handle">切换</button>
<!--数组语法-->
<div v-bind:class="[activeClass,errorClass]">
222
</div>
<button v-on:click="handle1">切换</button>
<!--针对的是style样式-->
<!--对象语法-->
<div v-bind:style="{color:'yellow',border:'2px solid aqua',width:'200px',height:'200px'}">
333
</div>
<button v-on:click="handle2">切换</button>
<!--数组语法-->
<div v-bind:style="[widthstyle,heightstyle]">
444
</div>
<button v-on:click="handle3">切换</button>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
isactive:true,
iserror:true,
activeClass:"active",
errorClass:"error",
widthstyle:{
width:"300px",
border:"2px solid yellow ",
background:"red"
},
heightstyle:{
height:"300px"
}
},
methods: {
handle:function(){
this.isactive=!this.isactive;
this.iserror=!this.iserror;
},
handle1:function(){
this.activeClass="";
this.errorClass=""
},
handle2:function(){
},
handle3:function(){
this.heightstyle.height="100px";
}
}
})
</script>
</body>
</html>
分支循环结构
v-if
v-else
v-else-if
v-show
v-if控制元素是否渲染到页面
v-show控制元素是否显示(已经渲染到页面了)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="score>=90">优秀</div>
<div v-if="score<90&&score>=80">中等</div>
<div v-if="score<80&&score>=60">一般</div>
<div v-if="score<60">不及格</div>
<div v-show="flag">测试</div>
<button v-on:click="handle">显示成绩</button>
<ul>
<li v-for="item in fruit">{{ item }}</li>
<li v-for="(item, index) in fruit">{{ item+"---"+index }}</li>
<li :key="item.id" v-for="(item, index) in myfruit">
<span>{{item.ename}}</span>
<span>{{item.cname}}</span>
<span>{{item.id}}</span>
</li>
<li v-for="(v,k,i) in obj">{{v+"---"+k+"---"+i}}</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
score:59,
flag:false,
fruit:["apple","banana","orange"],
myfruit:[{
id:1,
ename:"apple",
cname:"苹果"
},{
id:2,
ename:"banana",
cname:"香蕉"
},{
id:3,
ename:"orange",
cname:"橘子"
}],
obj:{
name:"王五",
age:20,
sex:"男"
}
},
methods: {
handle:function(){
this.flag=!this.flag
}
}
})
</script>
</body>
</html>
vue常用特性
表单操作
number:转化为数值
trim:去掉开始与结尾的空格
lazy:将input事件转化为change事件