目录
一、插值
1.插入文本内容
语法:{{ }}、v-text=" "
例:
{{msg}}
v-text="msg"
插入多个值:
{{ }}:
<div v-text="xs+mz">{{msg}}{{msg2}}</div>
v-text=" "
<div v-text="msg+msg2"></div>
区别:
1.用 {{ }} 页面加载页面时会有闪烁的问题,v-text 不会有;
2.用 {{ }} 页面可以编辑,v-text 不可编辑。
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 引入vue.js文件 -->
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="aa">
<!-- 1.{{msg}} 插值 -->
<h1>{{msg}}我是字?</h1>
<!-- 2.v-text 插值 -->
<h1 v-text="msg">我是字?</h1>
<!--
{{msg}}和v-text插值的区别:
1.用{{msg}}页面加载页面时会有闪烁的问题,v-text不会有;
2.用{{msg}}页面可以编辑,v-text不可编辑。
-->
<!-- 3.v-html 插入html代码,例:文本框-->
<h1 v-html="input"></h1>
<!-- 4.v-bind 给标签添加HTML属性,例:v-bind:id="值来自Vue实例里面定义的属性,如(id、color)-->
<!-- 4.1.一个标签可以添加多个v-bind -->
<!-- 4.2.v-bind 可以忽略 v-bind 不写 -->
<h1 v-bind:id="id">bb</h1>
<h1 :style="color">bb</h1>
<br/>
<!-- 5.表达式 -->
{{2>1?"正确":"错误"}}<br/>
{{substr.substr(0,2)}}<br/>
{{slice.slice(0,6).toUpperCase()}}<br/>
{{number + 1}}<br/>
{{ok ? 'YES' : 'NO'}}
</div>
</body>
<script type="text/javascript">
setTimeout(()=>{
// 创建Vue实例
var vue = new Vue({
el:"#aa",// 挂载点/管理边界
data:{// JSON格式
msg:"Hellow Vue!",
input:"<input type=text/>",
id:"bb",
color:'color:red',
substr:'abcdefg',
slice:'abcdefg',
number:1,
ok:'ok'
}
});
},400)
</script>
</html>
页面运行效果:
二、指令
指的是带有“v-”前缀的特殊属性。
1.v-if|v-else|v-else-if
根据其后表达式的bool值进行判断是否渲染该元素。
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入vue.js文件 -->
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="aa">
<!-- 1.v-if|v-else|v-else-if -->
<h1 v-if="score>90">你太棒了!</h1>
<h1 v-else-if="score<90">继续努力哦!</h1>
<h1 v-else>还行吧!</h1>
</div>
</body>
<script type="text/javascript">
// 创建Vue实例
var vue = new Vue({
el:"#aa",// 挂载点/管理边界
data:{
score:99
}
});
</script>
</html>
打印结果为:你太棒了!
2.v-show
与v-if类似,只是会渲染其身后表达式为false的元素,而且会给这样的元素添加css代码:style="display:none"。
案例:显示/隐藏 组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入vue.js文件 -->
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="aa">
<!-- 图片的显示/隐藏 -->
<button v-on:click="flag=!flag">图片的显示/隐藏</button>
<div v-html="img" v-show="flag"></div>
</div>
</body>
<script type="text/javascript">
// 创建Vue实例
var vue = new Vue({
el:"#aa",// 挂载点/管理边界
data:{
flag:true,
img:'<img src="图片路径.jpg" />'
}
});
</script>
</html>
页面运行效果:
3.v-for
类似JS的遍历。
案例:
1.遍历数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入vue.js文件 -->
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="aa">
<!-- v-for -->
<!-- 遍历数组 -->
<ul>
<!-- 循环遍历li,把array数组里面的每个值赋给li -->
<li v-for="item in array">{{item}}</li>
<br/>
<!-- 取出遍历的li的下标 -->
<li v-for="(item,i) in array">{{item}} 下标:{{i}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
// 创建Vue实例
var vue = new Vue({
el:"#aa",// 挂载点/管理边界
data:{
array:['wq','jm','ly','zt','wxy','zcs']
}
});
</script>
</html>
页面运行效果:
2.遍历对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入vue.js文件 -->
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="aa">
<!-- v-for -->
<!-- 遍历对象 -->
<ul>
<!-- v-for="key,val,i in Dog"中,val是键,kay是值,i是下标 -->
猫:<li v-for="val,key,i in cat">{{key}}={{val}} 下标:{{i}}</li>
</br>
老鼠:<li v-for="val,key,i in mouse">{{key}}={{val}} 下标:{{i}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
// 创建Vue实例
var vue = new Vue({
el:"#aa",// 挂载点/管理边界
data:{
cat:{
name:'汤姆',
sex:'公',
age:2
},
mouse:{
name:'杰瑞',
sex:'公',
age:1
}
}
});
</script>
</html>
页面运行效果:
3.遍历数组对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入vue.js文件 -->
<script type="text/jscript" src="js/vue.js"></script>
</head>
<body>
<div id="aa">
<!-- 遍历数组对象 -->
<ul>
<li v-for="cm in catandmouse">
编号:{{cm.id}};名字:{{cm.name}};性别:{{cm.sex}};年龄:{{cm.age}}。
</li>
</ul>
</div>
</body>
<script type="text/jscript">
// 创建Vue实例
var vue = new Vue({
el:'#aa',// 挂载点/管理边界
data:function(){
return{
catandmouse:[
{id:1,name:"图多盖洛",sex:"母",age:1},
{id:2,name:"天使杰瑞",sex:"公",age:2},
{id:3,name:"剑客莉莉",sex:"母",age:1},
{id:4,name:"国王杰瑞",sex:"母",age:1},
{id:5,name:"泰妃",sex:"公",age:0},
{id:6,name:"布奇",sex:"公",age:1}
]
}
},
});
</script>
</html>
页面运行效果:
4.v-bind
动态绑定属性,给标签添加HTML属性。
Vue 为 v-bind 提供了特定简写
简写前:<a v-bind:href="url">...</a>
简写后:<a :href="url">...</a>
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入vue.js文件 -->
<script type="text/jscript" src="js/vue.js"></script>
</head>
<body>
<div id="aa">
<!-- v-bing -->
<!-- 1.一个标签可以添加多个v-bind -->
<!-- v-bind 可以简写,例:v-bind:id="id" 可以写成 :id="id" -->
<a :id="id" v-bind:href="href">百度一下</a>
<h1 :style="color">哈哈</h1>
</div>
</body>id
<script type="text/jscript">
// 创建Vue实例
var vue = new Vue({
el:'#aa',// 挂载点/管理边界
data:function(){
return{
id:'bb',
href:"http://www.baidu.com",
color:'color:red'
}
}
});
</script>
</html>
页面运行效果:
控制台查看效果:
5.v-on
给目标元素绑定事件。
Vue为v-on指令提供了特定简写
简写前:<a v-on:click="doSomething">...</a>
简写后:<a @click="doSomething">...</a>
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入vue.js文件 -->
<script type="text/jscript" src="js/vue.js"></script>
</head>
<body>
<div id="aa">
<!-- v-on -->
<!-- v-on 可以简写,例:v-on:click="click" 可以写成 @click="click" -->
<button v-on:click="click">点击</button>
</div>
</body>
<script type="text/jscript">
// 创建Vue实例
var vue = new Vue({
el:'#aa',// 挂载点/管理边界
methods:{
click:function(){
alert("你点了我~");
}
// 也可以简写为
// click(){
// alert("你点了我~");
// }
}
});
</script>
</html>
页面运行效果(点击按钮弹出对话框):
如果要绑定其他事件,修改click的值就可以了。
例如(双击事件):
<button v-on:dblclick="click">双击</button>
6.v-model
用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值。
案例一:双向数据绑定姓氏和名字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>双向数据绑定</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="aa">
<!-- 姓氏:文本框 -->
姓氏:<input type="text" v-model="xs" />
<br/>
<!-- 名字:文本框 -->
名字:<input type="text" v-model="mz" />
<br/>
<!-- 插值 -->
姓名:<div v-text="xs+mz"></div>
</div>
<script type="text/jscript">
// 创建Vue实例
var vue = new Vue({
el:'#aa',// 挂载点
data:{// JSON格式
xs:'',
mz:''
}
});
</script>
</html>
页面运行效果:
双向数据绑定
案例二:v-for/v-model一起绑定[多选]复选框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入vue.js文件 -->
<script type="text/jscript" src="js/vue.js"></script>
</head>
<body>
<div id="aa">
<!-- 复选框 -->
<div v-for="cm in catandmouse">
<input type="checkbox" v-bind:value="cm.name" v-model="array" />{{cm.name}}
</div>
<h1 v-if="array.length > 0">{{array}}</h1>
</div>
</body>
<script type="text/jscript">
// 创建Vue实例
var vue = new Vue({
el:'#aa',// 挂载点/管理边界
data:function(){
return{
catandmouse:[
{id:1,name:"图多盖洛",sex:"母",age:1},
{id:2,name:"天使杰瑞",sex:"公",age:2},
{id:3,name:"剑客莉莉",sex:"母",age:1},
{id:4,name:"国王杰瑞",sex:"母",age:1},
{id:5,name:"泰妃",sex:"公",age:0},
{id:6,name:"布奇",sex:"公",age:1}
],
array:[]
}
}
});
</script>
</html>
页面显示效果:
7.v-html
用于输出html代码。
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入vue.js文件 -->
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-html="msg"></h1>
</div>
</body>
<script type="text/javascript">
vue = new Vue({
data:{
msg: '<input></input>'
}
}).$mount("#app");
</script>
</html>
三、参数
一些指令能够接收一个“参数”,在指令名称之后以冒号表示。
例如:
<a v-bind:href="url">...</a>
在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定;
<a v-on:click="doSomething">...</a>
在这里 click 参数是监听的事件名。
四、动态参数
从2.6.0开始,可以用方括号括起来的 JavaScript 表达式作为一个指令的参数。
例:
<a v-bind:[attrname]="url"> ... </a>
同样地,你可以使用动态参数为一个动态的事件名绑定处理函数
例:
<a v-on:[evname]="doSomething"> ... </a>
注:动态参数表达式有一些语法约束,回避大写。
例:
evName无效,evname有效
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入vue.js文件 -->
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="aa">
<!-- 动态参数 -->
<a :[href]="link">百度一下</a>
</div>
</body>
<script type="text/javascript">
// 创建Vue实例
var vue = new Vue({
el:"#aa",// 挂载点/管理边界
data:{
href:'href',
link:'http://www.baidu.com'
}
});
</script>
</html>
五、过滤器
1.全局过滤器
语法:
Vue.filter('filterName', function (value) {
// value 表示要过滤的内容
});
2.局部过滤器
语法:
new Vue({
filters:{'filterName1':function(value){}},
filters:{'filterName2':function(value){}}
});
vue允许你自定义过滤器,被用作一些常见的文本格式化,格式如下:
<!-- 在两个大括号中 -->
{{ name | capitalize }}
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>
注1:过滤器函数接受表达式的值作为第一个参数
注2:过滤器可以串联
{{ message | filterA | filterB }}
注3:过滤器是JavaScript函数,因此可以接受参数:
{{ message | filterA('arg1', arg2) }}
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入vue.js文件 -->
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="aa">
<!-- 局部过滤器 -->
<h1>{{str|toUpper|slice}}</h1>
<!-- 全局过滤器 -->
<h1>{{str2|toUpper2}}</h1>
</div>
</body>
<script type="text/javascript">
// 全局过滤器
Vue.filter('toUpper2',function(value){
return value.toUpperCase();
});
// 创建Vue实例
var vue = new Vue({
el:"#aa",// 挂载点/管理边界
data:{// JSON格式
str:'abcdefg',
str2:'abcdefg'
},
// 局部过滤器
filters:{
'toUpper':function(value){
return value.toUpperCase();
},
'slice':function(value){
return value.slice(2,4);
}
}
});
</script>
</html>
页面显示效果:
六、计算属性
计算属性可用于快速计算视图(View)中显示的属性(这些计算将被缓存,并且只在需要时更新)。
语法:
computed:{
xxx1:function(v){
},
xxx2:function(v){
}
}
案例:求出学生的总成绩
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入vue.js文件 -->
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="aa">
<!-- 计算属性 -->
<h1>学生的总成绩是:{{scoreSum}}。</h1>
</div>
</body>
<script type="text/javascript">
// 创建Vue实例
var vue = new Vue({
el:"#aa",// 挂载点/管理边界
data:{
students:[
{id:1,name:"图多盖洛",sex:"母",score:100},
{id:2,name:"天使杰瑞",sex:"公",score:100},
{id:3,name:"剑客莉莉",sex:"母",score:90},
{id:4,name:"国王杰瑞",sex:"公",score:50},
{id:5,name:"泰妃",sex:"公",score:10},
{id:6,name:"布奇",sex:"公",score:88}
]
},
// 计算属性
computed:{
// 求出学生的总成绩
scoreSum:function(){
var sum = 0;
// 循环遍历学生对象
for(var i = 0; i < this.students.length; i ++){
// 取出成绩并和sum进行求和
sum += this.students[i].score;
}
return sum;// 返回总成绩
}
}
});
</script>
</html>
七、监听属性
监听属性 watch,我们可以通过 watch 来响应数据的变化。
语法:
watch:{
xxx:function(v){
}
}
xxx:代表被监听的属性,必须存在
案例:通过监听属性完成天、小时、分钟、秒的转换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入vue.js文件 -->
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="aa">
<!-- 通过监听属性完成天、小时、分钟、秒的转换 -->
<input type="text" v-model="day" />:天,
<input type="text" v-model="hour" />:小时,
<input type="text" v-model="minute" />:分钟,
<input type="text" v-model="second" />:秒。
</div>
</body>
<script type="text/javascript">
// 创建Vue实例
var vue = new Vue({
el:"#aa",// 挂载点/管理边界
data:{// JSON格式
catandmouse:[
{id:1,name:"图多盖洛",sex:"母",age:1},
{id:2,name:"天使杰瑞",sex:"公",age:2},
{id:3,name:"剑客莉莉",sex:"母",age:1},
{id:4,name:"国王杰瑞",sex:"母",age:1},
{id:5,name:"泰妃",sex:"公",age:0},
{id:6,name:"布奇",sex:"公",age:1}
],
day:'',
hour:'',
minute:'',
second:''
},
// 监听
watch:{
day:function(arg){// 天
this.hour = arg * 24;
this.minute = this.hour * 60;
this.second = this.minute * 60;
},
hour:function(arg){// 小时
this.day = arg / 24;
},
minute:function(arg){// 分钟
this.day = arg / 60 / 24;
},
second:function(arg){// 秒
this.day = arg / 60 / 60 / 24;
}
}
});
</script>
</html>
完。