下面总结Vue2的语法知识
1、插值语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue插值语法</title>
<script type="text/javascript" src="../javascriptdemo/vue.js"></script>
</head>
<body>
<div id="root">
<p>{{msg}}</p> <!--变量 -->
<p>{{23+10}}</p> <!--表达式 -->
<p>{{true ? 'java':'python'}}</p> <!-- 三元表达式-->
<p>{{getVal()}}</p> <!-- 函数-->
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;
//创建Vue实例
//el指定当前Vue实例为哪个容器服务，值通常为CSS选择器
new Vue({
el:'#root',
data:{
msg:'hello',
val:'vue'
},
methods:{
getVal(){
return this.val;
}
}
})
</script>
</html>2、指令语法
<body>
<div id="root">
<!-- v-bind 绑定 ，将url当做JavaScript表达式执行-->
<a v-bind:href="url">百度</a>
<!--简写方式 : -->
<a :href="url">百度</a>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;
//创建Vue实例
//el指定当前Vue实例为哪个容器服务，值通常为CSS选择器
new Vue({
el:'#root',
data:{
url:'http://baidu.com'
},3、数据绑定
单向数据绑定：前端输入的不能改变代码中的； 双向数据绑定：前端输入的可以同时改变代码中的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue指令语法</title>
<script type="text/javascript" src="../javascriptdemo/vue.js"></script>
</head>
<body>
<div id="root">
单向数据绑定：<input type="text" v-bind:value='name'><br>
双向数据绑定：<input type="text" v-model:value="name"><!--v-model只能用在表单类标签中 -->
<!--p v-model:x='name'></p--><!--错误使用方式 -->
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;
//创建Vue实例
//el指定当前Vue实例为哪个容器服务，值通常为CSS选择器
const vm = new Vue({
el:'#root',
data:{
name:'vue'
},
methods:{
}
})
</script>
</html>4、v-on绑定点击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue指令语法</title>
<script type="text/javascript" src="../javascriptdemo/vue.js"></script>
</head>
<body>
<div id="root">
<!--绑定点击事件 -->
<button v-on:click="showInfo">点我提示信息</button>
<!--简写为 @click -->
<button @click="showInfo">show</button>
<!--传参 -->
<button @click="showNum(123)">showNum</button>
<!--传递 event -->
<button @click="showEvent($event)">showevent</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;
const vm = new Vue({
el:'#root',
data:{
name:'vue'
},
methods:{
showInfo(){
alert(this.name);
},
showNum(num){
alert(num);
},
showEvent(event){
alert(event.target.innerText);//得到的是 showevent
}
}
})
</script>
</html>5、事件修饰符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件修饰符</title>
<script type="text/javascript" src="../javascriptdemo/vue.js"></script>
<style type="text/css">
*{
margin:20px
}
.demo1{
height:50px;
background-color:skyblue
}
</style>
</head>
<body>
<div id="root">
<!--阻止默认事件 .prevent-->
<a href="http://www.atguigu.com" @click.prevent="showInfo">{{name}}</a>
<!--阻止事件冒泡 -->
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">点我提示</button>
</div>
<!--事件只触发一次 -->
<button @click.once="showInfo">点我</button>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#root",
data:{
name:"尚硅谷"
},
methods:{
showInfo(){
alert("欢迎来到尚硅谷")
}
}
})
</script>
</html>6、键盘事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>键盘事件</title>
<script type="text/javascript" src="../javascriptdemo/vue.js"></script>
</head>
<body>
<div id="root">
<input type="text" placeholder="按下回车enter提示输入" @keyup.enter="showInfo"/>
<input type="text" placeholder="按下delete或者backspace提示" @keyup.delete="showInfo"/>
<input type="text" placeholder="按下方向右键提示" @keyup.right="showInfo"/>
<input type="text" placeholder="按下Ctrl键提示" @keydown.ctrl="showInfo"/>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
name:'尚硅谷'
},
methods:{
showInfo(e){
console.log(e.target.value);
}
}
})
</script>
</html>7、计算属性computed
get函数的返回值就作为fullName的值。 get函数被调用的前提：
- 初次读取计算属性值时；
- 所依赖的数据发生变化时。
相较于普通函数，计算属性的优势在于，如果多次调用fullName，只会在第一次时调用get函数，然后将结果存在内存中（缓存机制）。而使用普通函数时，每次调用fullName，都会重新调用该函数进行计算。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue指令语法</title>
<script type="text/javascript" src="../javascriptdemo/vue.js"></script>
</head>
<body>
<div id="root">
姓：<input type="text" v-model:name="firstName"><br>
名：<input type="text" v-model:name="lastName"><br>
全名：<span>{{fullName}}</span>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;
const vm = new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三'
},
computed: {
fullName:{
get(){
return this.firstName+"-"+this.lastName;
}
}
},
})
</script>
</html>简写 直接将最终值的变量名当做函数名，省略get函数
computed: {
fullName(){
return this.firstName+"-"+this.lastName;
}
},8、监视属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue指令语法</title>
<script type="text/javascript" src="../javascriptdemo/vue.js"></script>
</head>
<body>
<div id="root">
<p>当前温度是{{temp1}}</p>
<p>未来温度是{{temp2}}</p>
<button type="button" @click="changeTemp">改变温度</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;
const vm = new Vue({
el:'#root',
data:{
temp1:10,
temp2:0
},
methods:{
changeTemp(){
this.temp2+=5;
}
},
watch: {
temp2(newValue, oldValue) {
//console.log(newValue,oldValue)
if(newValue-this.temp1>=10){
alert("寒潮来了");
}
}
},
})
</script>
</html>9、绑定class样式
一共有三种情况下的使用方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绑定class样式</title>
<script type="text/javascript" src="../javascriptdemo/vue.js"></script>
<style>
.basic{
border: 4px solid black;
background-color: white;
width:300px;
height:450px;
}
.normal{
background-color: lightblue
}
.happy{
background-color: firebrick;
}
.sad{
background-color: yellowgreen;
}
.atguigu1{
color: blue;
}
.atguigu2{
font-size: 30px;
}
.atguigu3{
background-color: aquamarine;
width:300px;
height: 300px;
}
</style>
</head>
<body>
<div id='root'>
<!--绑定class样式，字符串写法，适用于样式的类名不确定，需要动态绑定 -->
<div class="basic" :class="mood" @click="changeMood">{{name}}</div></br>
<!-- 绑定class样式，数组写法，适用于样式个数不确定、名字不确定-->
<div :class="arr">{{name}}</div></br>
<!--绑定class样式，对象写法，适用于样式个数确定，名字确定，但是要动态选择是否使用 -->
<div class="atguigu1" :class="classObj">{{name}}</div>
</div>
</body>
<script type="text/javascript">
const vm=new Vue({
el:'#root',
data:{
name:"尚硅谷",
mood:'normal',
arr:['atguigu1','atguigu2','atguigu3'],
classObj:{
atguigu2:true,
atguigu3:false
}
},
methods:{
changeMood(){
const arr=['normal','happy','sad']
this.mood=arr[Math.floor(Math.random()*3)]
}
}
})
</script>
</html>10、绑定style样式
可以动态改变某个标签的某些样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绑定style样式</title>
<script type="text/javascript" src="../javascriptdemo/vue.js"></script>
<style>
</style>
</head>
<body>
<div id='root'>
<div :style="styleObj" @click="changeSize">{{name}}</div>
</div>
</body>
<script type="text/javascript">
const vm=new Vue({
el:'#root',
data:{
name:"尚硅谷",
styleObj:{
fontSize:'20px',
color:'green'
},
sizeArr:[10,20,30,40,50,60,90]
},
methods:{
changeSize(){
//随机切换字体大小
let index = Math.floor(Math.random()*8);
this.styleObj.fontSize=this.sizeArr[index]+'px';
//this.styleObj.fontSize='60px'
this.styleObj.color='red';
}
}
})
</script>
</html>11、条件渲染
v-show 只是控制标签的显示或隐藏，适合频繁切换显示或隐藏某个标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../javascriptdemo/vue.js"></script>
<style>
</style>
</head>
<body>
<div id='root'>
<div>n的值为：{{n}}</div>
<button @click="n++">+1</button>
<div v-show="n === 1">java</div>
<div v-show="n === 2">python</div>
<div v-show="n === 3">javascript</div>
</div>
</body>
<script type="text/javascript">
const vm=new Vue({
el:'#root',
data:{
name:"尚硅谷",
n:0
},
methods:{
}
})
</script>
</html>v-if v-else-if 适合多条件判断，会直接新增该标签或删除该标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../javascriptdemo/vue.js"></script>
<style>
</style>
</head>
<body>
<div id='root'>
<div>n的值为：{{n}}</div>
<button @click="n++">+1</button>
<div v-if="n === 1">java</div>
<div v-else-if="n === 2">python</div>
<div v-else-if="n === 3">javascript</div>
<div v-else>c++</div>
</div>
</body>
<script type="text/javascript">
const vm=new Vue({
el:'#root',
data:{
name:"尚硅谷",
n:0
},
methods:{
}
})
</script>
</html>12、列表渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../javascriptdemo/vue.js"></script>
<style>
</style>
</head>
<body>
<div id='root'>
<ul>
<li v-for="s in students" :key="s.id"><!--如果有id这样的唯一表示，推荐使用这种方法-->
{{s.name}}-{{s.age}}-{{s.sex}}
</li>
</ul>
<ul>
<li v-for="(s,index) in students" :key="index"><!-- index是数组下标-->
{{s.name}}-{{s.age}}-{{s.sex}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
const vm=new Vue({
el:'#root',
data:{
name:"尚硅谷",
students:[
{id:1,name:'张三',age:20,sex:'男'},
{id:2,name:'李四',age:23,sex:'女'},
{id:3,name:'王五',age:22,sex:'男'},
]
},
methods:{
}
})
</script>
</html>13、列表过滤
监视属性写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../javascriptdemo/vue.js"></script>
<style>
</style>
</head>
<body>
<div id='root'>
<input type="text" v-model="keyword" placeholder="模糊查询">
<ul>
<li v-for="s in filterStudents" :key="s.id"><!--如果有id这样的唯一表示，推荐使用这种方法-->
{{s.name}}-{{s.age}}-{{s.sex}}
</li>
</ul>
<ul>
<li v-for="(s,index) in filterStudents" :key="index"><!-- index是数组下标-->
{{s.name}}-{{s.age}}-{{s.sex}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
const vm=new Vue({
el:'#root',
data:{
name:"尚硅谷",
keyword:'',
students:[
{id:1,name:'张三',age:20,sex:'男'},
{id:2,name:'李四',age:23,sex:'女'},
{id:3,name:'王五',age:22,sex:'男'},
{id:4,name:'王三',age:22,sex:'男'},
{id:5,name:'王四',age:22,sex:'女'},
],
filterStudents:[]
},
// 计算属性写法
watch: {
keyword:{
immediate:true,//让一开始显示全部，即查询条件为 ‘’
handler(val){
//数组过滤函数filter，返回一个新数组
this.filterStudents = this.students.filter((s)=>{
return s.name.indexOf(val) !== -1;
})
}
}
},
})
</script>
</html>计算属性写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../javascriptdemo/vue.js"></script>
<style>
</style>
</head>
<body>
<div id='root'>
<input type="text" v-model="keyword" placeholder="模糊查询">
<ul>
<li v-for="s in filterStudents" :key="s.id"><!--如果有id这样的唯一表示，推荐使用这种方法-->
{{s.name}}-{{s.age}}-{{s.sex}}
</li>
</ul>
<ul>
<li v-for="(s,index) in filterStudents" :key="index"><!-- index是数组下标-->
{{s.name}}-{{s.age}}-{{s.sex}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
const vm=new Vue({
el:'#root',
data:{
name:"尚硅谷",
keyword:'',
students:[
{id:1,name:'张三',age:20,sex:'男'},
{id:2,name:'李四',age:23,sex:'女'},
{id:3,name:'王五',age:22,sex:'男'},
{id:4,name:'王三',age:22,sex:'男'},
{id:5,name:'王四',age:22,sex:'女'},
],
},
computed: {
//一开始就会计算一次
filterStudents() {
return this.students.filter((s)=>{//返回这个匿名数组给 filterStudents数组
return s.name.indexOf(this.keyword) !== -1;
})
}
},
})
</script>
</html>14、列表排序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../javascriptdemo/vue.js"></script>
<style>
</style>
</head>
<body>
<div id='root'>
<input type="text" v-model="keyword" placeholder="模糊查询">
<button @click="sortType = 0">原顺序</button>
<button @click="sortType = 1">年龄升序</button>
<button @click="sortType = 2">年龄降序</button>
<ul>
<li v-for="s in filterStudents" :key="s.id"><!--如果有id这样的唯一表示，推荐使用这种方法-->
{{s.name}}-{{s.age}}-{{s.sex}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
const vm=new Vue({
el:'#root',
data:{
name:"尚硅谷",
keyword:'',
sortType:0,
students:[
{id:1,name:'张三',age:29,sex:'男'},
{id:2,name:'李四',age:23,sex:'女'},
{id:3,name:'王五',age:25,sex:'男'},
{id:4,name:'王三',age:12,sex:'男'},
{id:5,name:'王四',age:42,sex:'女'},
],
},
computed: {
//一开始就会计算一次
filterStudents() {
let tempArr = this.students.filter((s)=>{
return s.name.indexOf(this.keyword) !== -1;
});
//在过滤后的数组中排序
if(this.sortType){
tempArr.sort((s1,s2)=>{
return this.sortType === 1 ? s1.age-s2.age : s2.age-s1.age;
})
}
return tempArr;//需要返回
}
},
})
</script>
</html>
15、Vue.set()设置对象属性
只能给data里面的对象添加属性，不能给data添加属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue数据绑定</title>
<script type="text/javascript" src="../javascriptdemo/vue.js"></script>
</head>
<body>
<div id="root">
<p>姓名：{{persons.name}}</p>
<p>年龄：{{persons.age}}</p>
<p v-if="persons.sex">性别：{{persons.sex}}</p>
<button @click="addSex">添加性别</button>
</div>
<script type="text/javascript">
new Vue({
el:"#root",
data(){
return{
persons:{
name:'张三',
age:20,
}
}
},
methods:{
addSex(){
//(待添加属性的对象，属性名，值)
Vue.set(this.persons,'sex','男');
}
}
})
</script>
</body>
</html>
16、收集表单数据
v-model有三个修饰符：
- lazy 失去焦点再收集数据
- number 输入的字符串转换成有效数字
- trim 输入的内容首尾空格过滤
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue数据绑定</title>
<script type="text/javascript" src="../javascriptdemo/vue.js"></script>
</head>
<body>
<div id="root">
<form @submit.prevent="submitForm">
账号：<input type="text" v-model.trim="account"><br><br>
密码：<input type="text" v-model="password"><br><br>
性别：<label><input type="radio" name="sex" value="man" v-model="sex">男</label>
<label><input type="radio" name="sex" value="female" v-model="sex">女</label><br><br>
年龄：<input type="number" v-model.number="age"><br><br>
爱好：<label>学习<input type="checkbox" value="study" v-model="hobby"></label>
<label>游戏<input type="checkbox" value="game" v-model="hobby"></label>
<label>打球<input type="checkbox" value="ball" v-model="hobby"></label><br><br>
所属校区：
<select v-model="city">
<option value="">请选择</option>
<option value="beijin">北京校区</option>
<option value="shenzheng">深圳校区</option>
<option value="shanghai">上海校区</option>
<option value="wuhan">武汉校区</option>
<option value="chengdu">成都校区</option>
</select><br><br>
其他信息：<textarea cols="30" rows="5" v-model="others"></textarea><br><br>
<input type="checkbox" v-model="argee">阅读并接受<a href="#">用户协议</a><br><br>
<button>提交</button>
</form>
</div>
<script type="text/javascript">
new Vue({
el:"#root",
data(){
return{
account:'',
password:'',
sex:'',
age:18,
hobby:[],
city:'',
others:'',
argee:false
}
},
methods:{
submitForm(){
//转成JSON打印出表单数据
console.log(JSON.stringify(this._data))
}
}
})
</script>
</body>
</html>
17、过滤器
过滤器中可以完成一些简单的格式化操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../javascriptdemo/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js"></script>
</head>
<body>
<div id='root'>
<p>{{fmtTime}}</p><br><br>
<p>{{Date.now() | timeFormater('YYYY年MM月DD日')}}</p>
<p>{{Date.now() | timeFormater('YYYY年MM月DD日') | mySlice}}</p>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false
new Vue({
el:"#root",
data:{
time:''
},
computed:{
fmtTime(){
return dayjs(Date.now()).format('YYYY-MM-DD HH:mm:ss');
}
},
// 过滤器
filters: {
timeFormater(value,str="YYYY年MM月DD日 HH:mm:ss") {
return dayjs(value).format(str);
},
mySlice(value){
return value.slice(0,4);
}
}
})
</script>
</html>18、v-text指令
<div id="root">
<!--插值语法，只替换对应的内容 -->
<p>你好，{{name}}</p><br><br>
<!-- v-text 会将绑定的name直接替换到标签包裹的内容中 -->
<p v-text="name">hello,</p>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#root",
data:{
name:"尚硅谷"
},
})
19、v-once指令
使用了v-once的标签，内容只解析一次，后续不会改变，变为静态的内容了
<div id="root">
<p v-once>n初始值为：{{n}}</p><br>
<p>现在n值为：{{n}}</p>
<button @click="n++">n++</button>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#root",
data:{
name:"尚硅谷",
n:1
},
})
可以看到初始值不再变化
20、mounted挂载函数
实现一个闪烁的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../javascriptdemo/vue.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="root">
<h2 :style="{opacity}">欢迎学习Vue</h2>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#root",
data:{
opacity:1
},
mounted(){
setInterval(()=>{
this.opacity -= 0.01;
if(this.opacity <= 0){
this.opacity = 1;
}
},15)
}
})
</script>
</html>
