亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

vue是一個雙向的綁定，vue和視圖層之間的數據傳遞

組件的注冊 在App.vue中 import Header from? new Vue ({ componts:[Header],

組件之間的通信 props:['msg']? ?<header msg='something'>

index.html 是項目的入口? main.js注冊了一個App的組件，

import App from './App'? 等價于 var App = require('./App')

1. vue的所有數據在 new vue({data:{}})中

2. 方法在 methods中

3. 監聽在 watch 監聽data中的數據

4. 數據渲染 v-text v-html {{}}
   

5. v-if v-show 對標簽的隱藏

6. v-for 渲染列表循環

7. v-on 事件綁定 v-on:click="doThis" or @click="doThis"

8. v-bind 屬性綁定 v-bind:src="imageSrc" :class="{red:isRed}"
   

1. .vue 通過webpack打包

2. js 是new vue（{}）的一個對象
   

v-if元素的的隱藏,.直接不渲染這個DOM元素的

v-show元素的顯示 通過css的display:none，在代碼里是可以看到這個DOM元素的。

watch是監聽數據data里的變量

父給子傳：props （父的值傳到子的prop）

組件之間的調用

export的對象會成為new Vue({參數})的參數

v-bind

js文件中注冊組建用new Vue（{}）;組件中注冊組件等等先用export default{};兩者均需要先用import...from...引入vue文件！注意：組件中注冊的組件，其注冊代碼也要寫在<script>中。組件=vue

vue引入模板并注冊

vue參數：

????data = 數據，該頁面所有數據寫在這里，

???????????????????????????data : {? "a" : 1, "b" :? true }

????methods = 方法，所有函數寫在這里，

????????????????????????????methods : {? someMethod : function (someThing) {...}? }

????watch = 用于監聽data內屬性值的變化，

????????????????????????????watch : {? 'a' : funcion (val, oldval) {...}? }

模板指令：

????v-html = 插入html并渲染，

????????????????????????????v-html="a"，類似jQuery.html()

????v-text = 插入dom文本，

????????????????????????????v-text="a"，類似jQuery.text()

????v-if = 控制頁面是否渲染該元素，

????????????????????????????v-if="isTrue"，值為isTrue對應的data值（布爾型）

????v-show = 已渲染完成，

????????????????????????????控制display=>none/block，v-show="isTrue"，

????????????????????????????值為isTrue對應的data值（布爾型）

????v-for = 循環渲染元素，

????????????????????????????v-for="item in list"，item每次遍歷的元素，list遍歷的集合

????v-on = 綁定點擊事件，

????????????????????????????v-on:click="doThis", @click="doThis"，兩種寫法，doThis寫在methods里

????v-bind = 屬性綁定，

????????? ??????????v-bind:src="imageSrc"，綁定src屬性，

????????????????????????????值為imageSrc對應的data值（字符串）

????????????????? ? :class="{ red: isRed }"，綁定樣式，

????????????????????????????樣式內容為red，isRed對應的data值（布爾型）控制是否顯示

????????????????????:class="[ classA, classB ]"，綁定樣式名，

????????????????????????????分別綁定樣式名為classA對應的data值（字符串），

????????????????????????????和classB對應的data值（字符串）

????????????????????:class="[ classA, { classB: isB, classC: isC } ]"，混合使用：

????????????????????????????綁定classA對應的data值；

????????????????????????????樣式名為“classB”，isB對應的data值（布爾型）控制是否綁定；

????????????????????????????樣式名為“classC”，isC對應的data值（布爾型）控制是否綁定