-
注冊組件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
查看全部
舉報