目录
基本使用
<!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>
</head>
<body>
<div id="app">
<input type="text" v-model="username">
<p>Hello,{{username}}</p>
</div>
</body>
<script src="JS/vue.js"></script>
<script>
var vm=new Vue({
el: '#app',
data: {
username: 'gg'
}
});
</script>
</html>- 引入vue.js
- 创建vue对象
el：指定根element（选择器）
data：初始化数据（页面可以访问）
- 双向数据绑定：v-model
- 显示数据：{{xxx}}
理解Vue的MVVM
MVVM：第一个m表示model，第一个v表示view，后面vm表示viewmodel
model：模型，数据对象（data）
view：视图，模板页面
viewmodel：视图模型（本质上是view的实例）
模板语法
模板的理解：动态的html页面，包含了一些js代码，双大括号表达式，指令（都以v-开头的自定义标签属性）
- 双大括号表达式
语法：{{exp}} 功能：向页面输出数据
可以调用对象的方法
- 强制数据绑定
功能：指定变化的属性值
完整写法：v-bind:xxx='yyy' //yyy会作为表达式解析执行
简洁写法：:xxx='yyy'
<body>
<div id="app">
<input type="text" v-model="username">
<p>Hello,{{username}}</p>
<img v-bind:src="img1" width="200px">
</div>
</body>
<script src="JS/vue.js"></script>
<script>
var vm=new Vue({
el: '#app',
data: {
username: 'gg',
img1: 'https://cn.vuejs.org/images/logo.svg'
}
});
</script>- 绑定事件监听
功能：绑定指定事件名的回调函数
完整写法：v-on:click='xxx'
简洁写法：@click='xxx'
回调函数可带参
<body>
<div id="app">
<input type="text" v-model="username">
<p>Hello,{{username}}</p>
<button v-on:click="test">button</button>
</div>
</body>
<script src="JS/vue.js"></script>
<script>
var vm=new Vue({
el: '#app',
data: {
username: 'gg',
},
methods: {
test(){
alert("gg");
}
}
});
</script>计算属性
在computed属性对象中定义计算属性的方法，在页面中使用{{方法名}}来显示计算的结果。
初始化显示或相关的data属性数据发生改变，计算并返回当前属性值。
计算属性存在缓存，多次读取只执行一次get()计算
<body>
<div id="app">
<input type="text" v-model="username">
<p>Hello,{{name}}</p>
</div>
</body>
<script src="JS/vue.js"></script>
<script>
var vm=new Vue({
el: '#app',
data: {
username: 'gg'
},
computed:{
name(){
return this.username+'gg'; //这里的this指的是vm对象
}
}
});
</script>监视属性
通过vm对象的$watch()或watch配置来监视指定的属性。当属性变化时，回调函数自动调用，在函数内部进行计算
<body>
<div id="app">
<input type="text" v-model="username">
<p>Hello,{{name}}</p>
</div>
</body>
<script src="JS/vue.js"></script>
<script>
var vm=new Vue({
el: '#app',
data: {
username: 'gg'
},
//监视属性
watch:{
username:function(val){
this.name=val+'!';
}
}
});
//对象的方法(对象的属性和方法前面都会加上'$'
vm.$watch('username',function(){
alert('gg');
})
</script>计算属性的set()与get()
get()：回调函数，当需要读取当前属性值时回调，根据相关的数据计算并返回当前属性值
set()：回调函数，监视当前属性值的变化。当属性值发生改变时回调，更新相关的属性值
<body>
<div id="app">
姓<input type="text" v-model="first"> <br>
名<input type="text" v-model="last"> <br>
姓名<input type="text" v-model="full">
</div>
</body>
<script src="JS/vue.js"></script>
<script>
var vm=new Vue({
el: '#app',
data: {
first:'g',
last:'g'
},
computed:{
full:{
get(){
return this.first+' '+this.last;
},
set(val){
var name=val.split(' ');
this.first=name[0];
this.last=name[1];
}
}
}
});
</script>class与style绑定
class绑定：:class='xxx'
xxx可以是字符串、对象、数组
style绑定：:style="{color: activeColor , fontSize: font_Size + 'px'}"
其中activeColor和font_Size是data属性
<style>
.aclass{
color: red;
}
.bclass{
color:green;
}
.cclass{
font-size: 30px;
}
</style>
</head>
<body>
<div id="app">
<p :class="a">xxx是字符串</p>
<p :class="{aclass:isa,bclass:isb}">xxx是对象</p>
<button @click="fun1">button</button>
</div>
</body>
<script src="JS/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
a:'aclass',
isa:true,
isb:false
},
methods: {
fun1(){
this.a='cclass';
this.isa='false';
this.isb='true';
}
},
});
</script>条件渲染
条件渲染指令：
v-if v-else v-show
<body>
<div id="app">
<p v-if="ok">成功</p>
<p v-else>失败</p>
<p v-show="ok">show成功</p>
<p v-show="!ok">show失败</p>
<button @click="ok=!ok">button</button>
</div>
</body>
<script src="JS/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
ok:false
}
});
</script>列表渲染
列表显示
数组：v-for / index
对象：v-for / key
数组更新检测
vue本身只是监视了persons的改变，没有监视数组内部数据的改变
vue包含一组观察数组的变异方法，所以它们也将会触发视图更新，这些方法如下：
push() pop() shift() unshift() splice() sort() reverse()
<body>
<div id="app">
<h2>v-for遍历数组</h2>
<ul>
<li v-for="(item, index) in persons" :key="index">
{{index}}---{{item.name}}---{{item.age}}
<button @click="del(index)">删除</button>
<button @click="update(index,{name:'1',age:1})">更新</button>
</li>
</ul>
<h2>v-for遍历对象</h2>
<ul>
<li v-for="(value, key) in persons[1]" :key="key">
{{key}}---{{value}}
</li>
</ul>
</div>
</body>
<script src="JS/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
persons:[ //vue本身只是监视了persons的改变，没有监视数组内部数据的改变
{name:'Tom',age:18},
{name:'Bob',age:16},
{name:'Mike',age:15}
]
},
methods:{
del(index){
this.persons.splice(index,1);
},
update(index,newP){
//并没有改变persons本身，数组内部发生了变化，但并没有调用变异方法，vue不会更新界面
//this.persons[index]=newP;
this.persons.splice(index,1,newP);
}
},
});
</script>列表的搜索与排序
<body>
<div id="app">
<input type="text" v-model="searchName">
<ul>
<li v-for="(item, index) in filterPersons" :key="index">
{{index}}---{{item.name}}---{{item.age}}
</li>
</ul>
<button @click="setOrder(1)">年龄升序</button>
<button @click="setOrder(2)">年龄降序</button>
<button @click="setOrder(0)">原本顺序</button>
</div>
</body>
<script src="JS/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
searchName:'',
order:0, //0表示原本，1表示升序，2表示降序
persons:[
{name:'Tom',age:18},
{name:'Bob',age:15},
{name:'Mike',age:16}
]
},
computed:{
filterPersons(){
//取出相关的数据
const {searchName,persons,order}=this;
//最终需要显示的数据
var fPersons;
fPersons=persons.filter(item=>item.name.indexOf(searchName)>=0);
if(order!=0){
fPersons.sort(function(p1,p2){//sort函数：如果返回负数，p1在前；返回正数，p2在前
if(order==2)
return p2.age-p1.age;
else
return p1.age-p2.age;
})
}
return fPersons;
}
},
methods:{
setOrder(val){
this.order=val;
}
},
});
</script>
扫一扫
693
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
