-
注册组件app
查看全部 -
一、v-bind对vue元素属性的操作v-bind:src = "属性名'
二、对方法1的简写,通过class
属性:isRed (isRed是用来判断是否展现这个属性)
查看全部 -
时间绑定:on
查看全部 -
渲染循环列表
查看全部 -
控制模块隐藏
查看全部 -
模板指令:数据渲染
查看全部 -
1、data 数据字段(this.a ,this.b);
2、methods 方法字段;
3、watch 监听字段;
查看全部 -
需要自己写一下
查看全部 -
<template>
<div id="app">
<h1 v-text="title"></h1>
<input v-model="newItem" v-on:keyup.enter="addNew"/>
<ul>
<li v-for="item in items" v-bind:class="[finished:items.isFinshed]" v-on:click="change(item)"></li>
</ul>
</div>
</template>
<script>
var vm = new Vue({
data: {
title: "this is a todo list",
items: [
{
label: "cooding",
isFinished:true
}, {
label: "book",
isFinished: true
}
],
newItem:''
},
methods: {
change: function (item) {
item.isFinished != isFinished
},
addNew: function () {
this.item.push({
label: this.newItem,
isFinished: true
})
this.newItem=""
}
}
});
</script>
<style>
.finished {
color:redd;
}
</style>
查看全部 -
从.vue到页面
查看全部 -
1、data 数据字段(this.a ,this.b);
2、methods 方法字段;
3、watch 监听字段;
4、数据渲染:v-text、v-html、{{}};
5、控制模块隐藏:v-if、v-show;
6、渲染循环列表:v-for;
7、事件绑定:v-on (v-on:click 或者 @click);
8、属性绑定:v-bind (v-bind:class 或者 :class);
查看全部 -
el 相当于 element
查看全部 -
1-1
吸收了react的组件化(数据展现分离)
吸收了angular的指令和页面操作的方法。
官网:cn.vuejs.org
<div id="app"> {{ message }} </div>
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
Hello Vue!
查看全部 -
新建一个vue对象的时候你可以设置他的属性,其中最重要的包括三个,分别是data,methods.watch。
其中data代表vue对象的数据,methods代表vue对象的方法,watch设置了对象监听的方法。
Vue对象里的设置通过html指令进行关联。
重要的指令包括 :
v-text渲染数据
v-if控制显示
v-on绑定事件
v-for循环渲染等
查看全部 -
一、v-bind:class简写成:class 二、class 1、:class="{isFinished:item.isFinished}",控制是否有这个class 2、:class="[isRed,isBlue]",添加2个class
查看全部
举报