- v-model:双向数据绑定和单向数据绑定：使用 v-model 进行双向数据绑定
功能与v-bind类似,不过数据可同步改动,即修改标签中的元素数,对应的Vue实例对象中data对应的数据也会发生变化
- v-html:按照html的格式进行取值
<div id="app" >
<!--这种直接取出来的数据是带有span标签的-->
{{content}}
</div>
<!--v-html(这种取出来是不带标签的):将html格式数据渲染出来-->
<div id="app" v-html="content">
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
content:"<span style='color: red;'>这是内容</span>"
}
})
</script>
- v-if判断指令
<!--age是否大于18，等于18，小于18-->
<div id="app">
<span v-if="age > 18">成年了</span>
<span v-else-if="age < 18">未成年</span>
<span v-else="age == 18">踩线了</span>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
age:18
}
})
</script>
- v-for:循环指令
<body>
<ul id="app">
<!--<li>a</li>
<li>b</li>
<li>c</li>-->
<li v-for="item in arrs">{{item}}</li>
</ul>
<script>
var app = new Vue({
el:'#app',
data:{
arrs:['aa','bb','cc']
}
})
</script>
</body>
- 对象集合
<body>
<ul id="app">
<!--(item,index)前面的是元素,后面的是元素顺序,这是固定的位置,不能更改-->
<li v-for="(item,index) in arrs">{{index}}-{{item.name}}</li>
</ul>
<script>
var app = new Vue({
el:'#app',
data:{
arrs:[
{id:1,name:'zs',age:18},
{id:2,name:'ls',age:19},
{id:3,name:'ww',age:20}
]
}
})
</script>
</body>
- v-on:事件绑定,可简写成@,如v-on:click //绑定点击事件-->(@click注意了,这里的@后面是没有冒号的)
<body>
<ul id="app">
<!--(item,index)前面的是元素,后面的是元素顺序,这是固定的位置,不能更改-->
<!--$event:表示事件信息封装对象,写法是固定的,这里表示的就是z整个事件对象,-->
<li v-on:click="choseClick($event)" v-for="(item,index) in arrs">{{index}}-{{item.name}}</li>
<!--以下写法与上面的效果一样-->
<!--<li @click="choseClick" v-for="(item,index) in arrs">{{index}}-{{item.name}}</li>-->
</ul>
<script>
var app = new Vue({
el:'#app',
data:{
arrs:[
{id:1,name:'zs',age:18},
{id:2,name:'ls',age:19},
{id:3,name:'ww',age:20}
]
},
methods:{
//这个就是事件函数
choseClick:function (ev) {
//拿到事件对象
console.log(ev);
//获取当前的事件元素(也就是当前项目中的li元素)
console.log(ev.currentTarget);
alert(11);
}
}
})
</script>
</body>
- 事件传参
<ul>
<li v-for="u in list" v-on:click="choseClick($event,u.id,u.name)">
{{u.id}}-{{u.name}}-{{u.age}}-{{u.sex==1?'男':'女'}}
</li>
</ul>
methods:{
choseClick:function (e, id, name) {
console.log(e.currentTarget, id, name);
}
}
- el:用来指定编译器从什么地方开始解析语法(可以简单理解为将Vue实例对象绑定在页面的那个标签上的)
- data:用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中
- methods:放置页面中的业务逻辑，js函数一般都放置在methods中(可以简单理解为存放自定义方法的方法区)
- filters:过滤器集合,专门存放过滤器的
<body>
<ul id="app">
<li v-for="(item,index) in arrs">
{{index}}-{{item.name}}-{{item.sex | sexFilter}}</li>
</ul>
<script>
var app = new Vue({
el:'#app',
data:{
arrs:[
{id:1,name:'zs',age:18,sex:1},
{id:2,name:'ls',age:19,sex:0},
{id:3,name:'ww',age:20,sex:-1}
]
},
filters:{
dataFormat:function () {
//多用来做数据格式转换
},
sexFilter:function (sex) {
if (sex == 0){
return '女'
}else if(sex == 1){
return '男'
}else {
return '保密'
}
}
}
})
</script>
</body>
- mounted:是一个函数,在Vue实例对象创建时调用,也就是data之前,常用来初始化data中的数据
<body>
<ul id="app">
<li v-for="(item,index) in arrs">
{{index}}-{{item.name}}-{{item.sex}}</li>
</ul>
<script>
var app = new Vue({
el:'#app',
data:{
arrs:[
/*{id:1,name:'zs',age:18,sex:1},
{id:2,name:'ls',age:19,sex:0},
{id:3,name:'ww',age:20,sex:-1}*/
]
},
mounted:function () {
console.log('先执行了吧');
let _this = this;
//模拟请求获取数据
$.get('/data/employ-data.json',function (data) {
console.log(data);
_this.arrs = data;
})
}
})
</script>
</body>
