1.绑定style
<p :style="{fontSize:'48px',color:'blue'}"></p>
<p :style="styObj"></p>
<script>
new Vue({
data:{
styObj:{fontSize:'36px',color:'pink'};
}
})
</script>
2.绑定类class
<h1 :class="vue Data属性"></h1>
<h1 :class="color"></h1>
new Vue({
data:{
color:'gold';
}
})
<style>
.gold{background-color:gold;}
</style>
3.对象绑定
<h1 :class="{class名:布尔值}"></h1>
<h1 :class="{pink:flag,blue:isLog}"></h1>
当flag为真的时候，h1被绑定，pinkclass否则都不帮
- 事件
<h1 v-on:事件名="方法处理函数"><h1>
<h1 v-on:click="say()"></h1>
<script>
new Vue({
methods:{
say(){//语句，能通过this获取vue实例的data属性和methods方法}
}
})
</script>
- 简写
<h1 @:事件名="方法处理函数"></h1>
- 修饰符
<h1 @click.once="方法处理函数"></h1>
@keyup.enter enter键盘被弹起
- 列表渲染
<li v-for="(item,index) in lists":key="index">{{item}}</li>
- 条件渲染
<p v-if="布尔值"></p> dom
<p v-else></p>
<p v-show="布尔值"></p> css
- 属性绑定
v-bind:属性名
:属性名
- 文本绑定
{{}}
v-text=""
v-html=""
computed 计算
watch 监听
directive指令
handler 处理
localstorage 本地存储
created 创建完毕
deep 深的
4.什么是vue
轻量级 渐进式 js框架
取angular指令
取react组件
尤雨溪
5.vue里面的内置指令
- 文本
{{}}
v-text 绑定文本内容
v-html 绑定html内容
- 属性
v-bind:属性名="" 绑定属性
- 事件
v-on:事件名="" 事件名
- 条件
v-if
v-else
v-show
//区别：v-if 直接移除html节点 v-show 通过css方式隐藏元素
6.列表渲染指令
v-for:{(item.index) in list}
绑定class
:class={class名:布尔值}
- style渲染
:style={fontSize:"24px",color:"red"}
- vue对象三大属性
var app = new Vue({
el:"", // vue渲染的范围
data:{}, // vue里面的数据
methods:{} // vue里面的方法
})
