-
屬性綁定與雙向數(shù)據(jù)綁定：
<div id="root">
? <div v-bind:title="title">{{msg}}</div>
? <input v-model="msg">//v-model雙向數(shù)據(jù)綁定
? <div :title="title">{{msg}}</div>//:(v-bind:的簡寫)屬性綁定
</div>
實例：
new Vue({
? ? el:"#root",
? ? data:{
? ? ? msg:"hello",
? ? ? title:"this is my word"
? ? }
? })
查看全部 -
vue實例中的數(shù)據(jù)、事件與方法
<div id="root">
????<h1>{{msg}}</h1>//插值表達式
????<h1 v-text="msg"></h1>//輸出轉(zhuǎn)義后的內(nèi)容，即純文本
????<h1 v-html="msg"></h1>//輸出未轉(zhuǎn)義的內(nèi)容，即可輸出HTML內(nèi)容
</div>
<div id="root1" v-text="msg"> //使用了標簽之后，vue實例msg將覆蓋內(nèi)容，即包含的三個h1被移除
? <h1>{{msg}}</h1>
? <h1 v-text="msg">kkkk</h1>//kkkk內(nèi)容被msg覆蓋
? <h1 v-html="msg"></h1>
</div>
面向數(shù)據(jù)編程：
<div id="root">
? <div v-on:click="handleClick">{{msg}}</div>//綁定方法
? <div @click="handleClick">{{msg}}</div>//@（v-on:的簡寫）
</div>
new Vue({
? ? el:"#root",
? ? data:{//數(shù)據(jù)項
? ? ? msg:"hello"
? ? },
? ? methods:{//實例中的方法
? ? ? handleClick:function(){
? ? ? ? alert(123)
? ? ? ? this.msg="world"http://this指的是本實例，數(shù)據(jù)驅(qū)動視圖，想改變數(shù)據(jù)的顯示不再需要改變dom內(nèi)容，直接改變數(shù)據(jù)項的內(nèi)容，數(shù)據(jù)發(fā)生變化，vue自動更新dom
? ? ? }
? ? }
? })
查看全部 -
掛載點，模板，實例之間的關系
<div id="root">//掛載點，vue只處理掛載點中的內(nèi)容
????<div></div>//模板
</div>
<div id="root"><div>//掛載點，掛載點之內(nèi)的內(nèi)容就是模板
實例（可以有多個，分別操作不同的dom對象）：
new Vue({
????el:"root",
????template:'<h1>hello {{msg}}</h1>',//模板，可以寫在掛載點內(nèi)部，也可以寫在實例中的template屬性里，都寫了則實例中的覆蓋掛載點
????data：{
????????msg:"hello world"
????}
}）
查看全部 -
安裝（小白級別）：
開發(fā)環(huán)境：
1、引入vue.js文件<script src="./vue.js"></script>
2、引入CDN<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
生產(chǎn)環(huán)境：安裝生產(chǎn)版本，或者CDN版本帶上版本號
引入：
在<head>標簽中引入，防止抖屏。
創(chuàng)建實例：
<div id="root">
? <h1>{{msg}}</h1>
</div>
在<script>中new Vue()
<div id="root">{{msg}}</div>
new Vue({//傳參
????el:"root",//綁定dom，Vue不推薦開發(fā)者直接操作dom
????data：{//保存vue實例中的數(shù)據(jù)
????????msg:"hello world"
????}
}）
原生寫法（手動操作dom）：
var dom? = document.getElementById("root")
dom.innerHTML = "hello world"
查看全部 -
全局樣式：對多個組件有效；
<style> ????... </style>
局部樣式：對當前組件有效。
<style?scoped> ????... </style>
一般使用局部樣式，可以對組件樣式進行解耦。
查看全部 -
在之前使用new Vue定義一個Vue實例(組件)時，數(shù)據(jù)存放在data對象里，代碼如下：
new?Vue({ ????el:?'#app', ????data:?{ ????????msg:?'hello?vue' ????} })但使用vue-cli時，存放數(shù)據(jù)的data屬性不再是對象了，而是一個函數(shù)，函數(shù)的返回值是一個對象。
export?default?{ ????data:?function()?{ ????????return?{ ????????????msg:?'hello?vue' ????????} ????} }使用ES6語法簡化為：
export?default?{ ????//?data?()?{}?表示data是一個函數(shù) ????data?()?{ ????????return?{ ????????????msg:?'hello?vue' ????????} ????} }查看全部 -
<template>...</template>標簽內(nèi)部只允許有一個根標簽（如div），即所有的標簽要包裹在一個根標簽內(nèi)，代碼如下：
<template> ????<div> ????????<div>...</div> ????????<ul>...</ul> ????????... ????</div> </template>
查看全部 -
父組件模板里的方法指的是父組件里的方法，子組件模板里的方法指的是子組件里的方法。
父組件：new Vue(...)，父組件的模板(template)：div#app里的所有DOM標簽
子組件：Vue.component(...)，子組件的模板(template)：Vue.component('todo-item', {template: '...'})中的template屬性
查看全部 -
子組件向外部進行一個發(fā)布（觸發(fā)事件），那么父組件在模板里創(chuàng)建子組件的時候，同時可以監(jiān)聽子組件觸發(fā)的事件
查看全部 -
父/子組件如何通信：
父組件向子組件傳值是通過在組件上綁定屬性的方式，如:content、:index這兩個屬性
子組件向父組件傳值是通過發(fā)布-訂閱模式，子組件通過this.$emit('事件', '值')方法觸發(fā)事件傳遞值，父組件監(jiān)聽對應事件可以獲取到傳遞過來的值
查看全部 -
在Vue中，父組件向子組件傳遞值是通過屬性的形式。
查看全部 -
每一個Vue組件都是一個Vue實例，也可以說每一個Vue實例都是一個Vue組件。對于代碼中的new Vue(...)這個大的Vue實例來說，它里面如果沒有定義template屬性的話，那就會把掛載點標簽(<div id="app">...</div>)中的所有DOM標簽當做template(模板)。
查看全部 -
使用Vue.component()方法來定義Vue的組件。
每一個Vue的組件都是一個Vue的實例，一個Vue項目就是由很多Vue的實例組成。
既然每一個Vue的組件都是一個Vue的實例，那么在定義組件時也可以有data、template、methods等屬性
查看全部 -
概念：Vue實例、掛載點、模板、組件
Vue實例：new Vue({...})
掛載點：<div id="app">...</div>
模板：掛載點內(nèi)的代碼
組件：Vue.component(...)
查看全部 -
v-if：該指令控制元素的存在與否
v-show：該指令控制元素的顯示與否，通過來實現(xiàn)
v-for：該指令控制元素的循環(huán)。通常每個元素要帶上:key屬性來提升頁面元素渲染的性能
查看全部
舉報