一侮叮、指令
v-model
雙向綁定，監(jiān)聽用戶的輸入事件悼瘾，更新數(shù)據(jù)
<input v-model="message">
<input class="ipt_travelTit" type="text" v-model.trim="title" @keyup.enter="login" @keydown.up="upclick" placeholder="請(qǐng)輸入您的游記標(biāo)題" /> // 去掉input內(nèi)容前后空格 監(jiān)聽回車事件
v-bind
能夠及時(shí)對(duì)頁面的數(shù)據(jù)進(jìn)行更改
必須是變量囊榜，不能是常量
縮寫 v-bind :html屬性
'{red:isred}'
'isred ? "red" : "blue"'
'[{red: "isred"}, {blue: "isblue"}]'
v-bind:class="activeNumber === n + 1 ? 'active' : ''"
<p v-bind:class="someclass"></p>
不加 v-bind 那么 someclass 就是個(gè)常量审胸，沒有任何動(dòng)態(tài)數(shù)據(jù)參與。當(dāng)加上 v-bind 之后卸勺，它的值 someclass 不是字符串砂沛，而是vue實(shí)例對(duì)應(yīng)的 data.someclass 這個(gè)變量。
<input v-bind:value="message" v-on:input="message = $event.target.value" />
<input :value="message" @input="message =
三目運(yùn)算 動(dòng)態(tài)class名
<input type="button" class="sumbitBtn" :class="isChecked == true? 'checked' : ''" value="確認(rèn)">
<p class="tt_ft" v-bind:class="{'ckeck' : checkAllFlag}">全選</p> // checkAllFlag為true渲染出 ckeck class名
v-on
縮寫 v-on @方法
<input :value="name" v-model="body">
v-bind 產(chǎn)生的效果不含有雙向綁定曙求，所以 :value 的效果就是讓 input的value屬性值等于 data.name 的值碍庵，而 v-model 的效果是使input和 data.body 建立雙向綁定，因此首先 data.body 的值會(huì)給input的value屬性悟狱，其次静浴，當(dāng)input中輸入的值發(fā)生變化的時(shí)候，data.body 還會(huì)跟著改變芽淡。
阻止冒泡
@click.stop=""
v-for
item in/of 數(shù)據(jù)json
<ul>
<li v-for="item in arr">{{item.name}}</li>
</ul>
v-show
控制元素顯示與隱藏
show布爾值
<div v-show="show">
</div>
new Vue({
el: '#box',
data() {
return {
show: true
}
}
})
v-text
讀取文本內(nèi)容
<div>
<p v-text="msg"></p>
</div>
new Vue({
el: '',
data() {
return {
msg: 'aaa'
}
}
})
v-html
<div>
<p v-html="msg"></p>
</div>
new Vue({
el: '',
data() {
return {
html: '<p>123</p>'
}
}
})
v-if v-else v-else-if
只有一個(gè)會(huì)被渲染出來
v-once
只渲染一次
@click.once="show"
v-cloak 防閃爍
使用 v-cloak 防止頁面加載時(shí)出現(xiàn) vuejs 的變量名马绝，使用方法如下：在做外層的div 里面添加v-cloak，css里面display：none
<div>
<div v-cloak="">歡迎{{msg}}</div>
</div>
new Vue({
el: '',
data() {
return {
msg: '1111'
}
}
})
[v-cloak] {
display: none;
}
v-pre
在模板中跳過vue的編譯挣菲，直接輸出原始值
如下面例子網(wǎng)網(wǎng)頁會(huì)渲染出 歡迎{{msg}}
<div>
<div v-pre>歡迎{{msg}}</div>
</div>
new Vue({
el: '',
data() {
return {
msg: '1111'
}
}
})
{{}} 輸出
出來變量富稻，也可以加方法
<li v-for="(item,index) in dateList" :class="item.isSign =='0' ? 'activeQ': ''"
key="index"
>
{{getDay(item.id)}}
</li>
getDay (day) {
var arr = day.split('-');
let dayN = arr[2];
return dayN;
}
v-if v-else v-else-if
只能執(zhí)行一個(gè)
和v-for一起使用時(shí) v-for優(yōu)先級(jí)更高
二、選項(xiàng)/數(shù)據(jù)
data 相當(dāng)于react的state
methods 模板調(diào)用的函數(shù)白胀，需寫在methods里面
props 接收父組件的數(shù)據(jù)
propsData 只存在new的示例中
var vm = new Comp({
propsData: {
msg: 'hello'
}
})
偵聽屬性watch
響應(yīng)數(shù)據(jù)的變化椭赋，
<div id="watch-example">
<p>{{ answer }}</p>
<input v-model="question">
</div>
var watchVM = new Vue({
el: '#watch-example',
data：{
answer: 'answer',
question: '',
},
watch: {
question: function() {
// question發(fā)生改變執(zhí)行此函數(shù)
}
}
})
計(jì)算屬性computed
var vm = new Vue({
el: '#app',
data: {
message: 'hello',
},
computed: {
reversedMessage: function() {
return this.message.split('').reverse().join('')
}
}
})
三、生命周期
beforeCreate 實(shí)例初始化之前
created 實(shí)例創(chuàng)建完成或杠，還沒開始掛載
beforeMount 掛載之前被調(diào)用
mounted el已掛載到實(shí)例上 可調(diào)用nextTick
buforeUpdate 數(shù)據(jù)更新時(shí)調(diào)用
updated dom已更新
activated keep-alive組件激活時(shí)調(diào)用
deactivated 組件停用時(shí)調(diào)用
beforeDestroy 實(shí)例銷毀之前調(diào)用
destroyed 實(shí)例銷毀后調(diào)用
errorCaptured 子孫組件錯(cuò)誤調(diào)用
四哪怔、選項(xiàng)/組合
parent
在子組件
console.log(this.$parent)
root
console.log(this.$root) // 當(dāng)前組件樹的根vue實(shí)例
mixins
定義一部分屬性或者公共的方法，在每個(gè)組件之中使用向抢，方法參數(shù)在各函數(shù)之間不共享认境，沒有任何通信
在調(diào)用自身鉤子之前調(diào)用
注：當(dāng)父組件也有相同屬性時(shí)以父組件/實(shí)例為準(zhǔn)
import minxin from 'xxxx.js'
new Vue({
mixins: [minxin]
})
extends
與minxins類似，但優(yōu)先級(jí)次于父組件挟鸠，對(duì)父組件擴(kuò)充
var CompA = {
updated : function(){
console.log('我是擴(kuò)展的updated');
},
methods:{
//下面這個(gè)并沒有被執(zhí)行叉信，如果方法名一樣，只執(zhí)行構(gòu)造器里面的原生方法艘希，混入跟擴(kuò)展類似
add:function(){
console.log('我是擴(kuò)展出來的方法');
this.num++;
}
}
}
// 在沒有調(diào)用 `Vue.extend` 時(shí)候繼承 CompA
var CompB = {
extends: CompA,
...
}
name
只有作為組件選項(xiàng)時(shí)起作用
delimiters
改變純文本插入分隔符
function
render () {
<div>
{()=> this.func()}
</div>
}
vue mvvm module模型 view視圖 controller控制器 vm視圖數(shù)據(jù)之間的傳遞
import Header from '@/components/public/header/header'
export default {
props: ['shopId']
name: 'mall',
components: {
Header
},
data () {
return {
msg: '商城首頁'
}
},
mounted(){// 數(shù)據(jù)請(qǐng)求
this._timeOut = setInterval(() => {
do something
},2000)
},
mounted(){
this.init();
beforeDestroy() { // 清除計(jì)時(shí)器
clearInterval(this._timeOut);
}
},
created () {
},
updated() {
window.scroll(0, 0);
},
methods: {
init(){
}
},
watch: {
shopId(newValue, oldValue) {
console.log(newValue)
this.init();
}
},
mixins: [http]
}
<div id="app">
<say-hello></say-hello>
<my-name :name="username"></my-name>
</div>
<script>
// 子組件sayHello
Vue.component("sayHello", {
template: "<h1>${this.$parent.username}</h1>",
delimiters: "${}", // 改變純文本插值語法 ${xxx}
})
var app = new Vue({
el: "#app",
data: {
username: 'xxxx',
},
components: {
"myName": {
template: `<div>
<p>{{name}}</p>
<P>{{this.$parent.month}}</P>
</div>`,
props: ["name"],
}
}
})
</script>
