Vue中的小胡子语法
这种用{{}}包裹变量的语法我们称之为小胡子语法，我们可以将data中的数据直接渲染到页面中(data写成函数返回对象的形式是为了组件数据的独立性)
<template>
<div>
<h1>{{ text }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
text: 'hello world'
}
}
}
</script>
methods 专门用来存储函数，我们可以将函数写在这里
<template>
<div id="app">
<button @click="f" />
</div>
</template>
<script>
export default {
data() {
return {
text: 'hello world'
}
},
//注意 在methods中定义的函数不可以写箭头函数，不然会导致this指向window，但这些函数内的嵌套函数可以写箭头函数
meyhods:{
f:function(){
//全写 函数名:function(){}
},
f(){
//简写
}
}
}
</script>
Vue中的指令
1.v-model用于表单中的数据双向绑定
<template>
<div>
<input type="text" v-model="text">
<h1>{{ text }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
text: 'hello world'
}
}
}
</script>
<style lang="less" scoped>
</style>
数据的双向绑定，也就是说被绑定v-model的input框只要修改了变量的值，下面使用的这个变量也会跟着改变。
v-model原理
v-model的原理其实就是v-bind:value加上v-on:input事件
<template>
<div id="app">
<!-- v-model是 :value 和 @input的结合体 -->
<input type="text" v-model="name">
<input type="text" :value="name" @input="fn">
<!-- :value 可以保证input的值会跟着num改变 -->
<h1>{{name}}</h1>
</div>
</template>
<script>
expoer default{
data: {
name: "小明"
},
methods: {
fn(ev) {
this.name = ev.target.value
}
}
}
</script>
2.v-on 简写: @ 用于绑定事件
<template>
<div id="app">
<button @click="fn"/>
</div>
</template>
<script>
expoer default{
methods: {
fn(ev) {
console.log('被点击了')
}
}
}
</script>
3.v-bind 简写: (冒号:) 用于标签中动态绑定数据
<template>
<div id="app">
<input :value="" />
<!--使用v-bind我们可以在标签中使用data中的属性 -->
</div>
</template>
<script>
expoer default{
data(){
return{
value:'我是被动态绑定的数据'，
}
}
methods: {
}
}
</script>
4.v-if & v-else 用于标签的出现和消失
<template>
<div id="app">
<div v-if="visble">
我是隐藏的
</div>
<div v-else>
我是显示的
</div>
</div>
</template>
<script>
expoer default{
data(){
return{
visble:false,
}
}
methods: {
}
}
5.v-show 用于标签的显示和隐藏
<template>
<div id="app">
<div v-show="visble">
我是显示的
</div>
</div>
</template>
<script>
expoer default{
data(){
return{
visble:true,
}
}
methods: {
}
}
</script>
v-if与v-show的区别
1.v-if只有在条件成立是才会去加载标签，而v-show会去加载所有使用了v-show的标签。
2.v-if的条件被改变为false时，v-if会把标签彻底销毁。而v-show会将标签隐藏(display属性)
3.v-if有比较大的切换开销，v-show有比较大加载开销。如果需要频繁切换的话推荐使用v-show
6.v-for
一个用来循环展示标签的指令 可以循环数组 数字 字符串 及对象 使用v-for指令的时候 我们一般都是需要在元素添加一个:key属性用来提升VUE的，虚拟DOM diff算法效率的一个行内属性
<template>
<div id="app">
<ul>
<li v-if="(item,index) in list" :key="index">{{item}}</li>
</ul>
</div>
</template>
<script>
expoer default{
data(){
return{
list:[{
id:1,
name:'第一'
},{
id:2,
name:'第二'
},{
id:3,
name:'第三'
}]
}
}
methods: {
}
}
</script>
7.v-once 只执行一次 vue渲染只渲染一次
8.v-cloak：这个指令的目的是为了解决小胡子语法的显示问题 配合css使用 数据出现之后 v-cloak就会消失
9.v-pre：优化性的指令 就是告诉vue在渲染结构的时候 那些结构不用处理
10.v-text:相当于原生innerText
11.v-html:相当于原生innerHTML 只在可信内容上使用v-html 永不用在用户提交的内容
<template>
<div id="app">
<input v-once />
<h1 v-cloak>{{name}}</h1>
<ul v-pre>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<div v-text="str"></div>
<div v-html="str"></div>
</div>
</template>
<script>
expoer default{
data(){
return{
data: {
name: "我是名字",
str: '<li>磊仔</li>'
}
}
}
}
</script>
<style>
[v-cloak] {
opacity: 0;
}
</style>
12.v-slot 插槽(提升组件的灵活性以及可扩展性) 简写：#
<slot></slot>可以让你在父组件中写入的内容可以展示在子组件中，slot-scope="xxx"(2.6之前的写法:插槽作用域),可以拿到子组件传递过来的值，子组件只需要在slot上定义一个行内属性将值传递过去，slot-scope="xxx"对应子组件中的slot标签的所有行内属性，如果要在父组件中使用从子组件拿到的数据，并渲染出不同的结构，可以使用template标签将结构包起来(将slot-scope写在template上)。v-slot为具名插槽。
<slot>默认值</slot>//父组件中没有传递内容slot标签的默认值就会起作用
<template #default="aaa">//#default === slot="default" slot-scope="aaa"(老写法)
<h1>hello</h1>
</template>
//v-slot 默认是#default 对应的是子组件中的slot标签，slot上的name属性默认就是default，可以自定义
//这样就可以将内容插入到指定的位置了
<template #aaa="bbb">
<h1>hello</h1>
</template>
//子组件
<slot name="aaa"></slot>
自定义指令
<template>
<div id="app">
<div v-color="color"></div>
</div>
</template>
<script>
expoer default{
directive('color', function(el, obj) {
console.log(arguments);
el.style.color = obj.value;
})
}
</script>
计算属性 computed
计算属性最后会被挂载到实例上
<template>
<div id="app">
{{numChange}}
</div>
</template>
<script>
expoer default {
data(){
return {
num: 1,
}
},
computed: {
numChange(){
return this.num++
/*虽然说 我们在这写的是一个函数 但是最终呈现出来的东西 是这个函数的返回结果
只要函数同步使用那些vue变量 那么 这个vue变量就可以称之为revNum的依赖
只要依赖不改变 这个函数就不会重新执行
计算属性有缓存:就是依赖不改变 函数不会重新执行*/
}，
//完整写法 用于使用计算属性设置一个值的时候
numChange:{
get() {
return this.value;
},
set(val) {
this.aaa = val
}
}
}
}
</script>
侦听器 watch--用于监听属性值的变化
<template>
<div id="app">
{{numChange}}
</div>
</template>
<script>
expoer default {
data(){
return {
num: 1,
obj: {
aa: 1,
bb: 2,
}
}
},
watch:{
num(){
console.log('num被改变了');
},
//另一种写法
obj: {
deep: true, //深度监听 对象及所有子代的值
immediate: true, //初始化的时候 触发handler
handler() {
console.log(this.obj);
}
}
}
}
</script>
computed和watch的区别
1.computed中的函数最后都会被挂载到实例上，而watch只能监听已经存在的属性
2.computed有缓存，性能更好。而watch没有缓存
什么时候使用计算属性? 当一个属性依赖于多个属性的时候 推荐使用计算属性，什么时候使用侦听器 多个属性依赖一个属性的时候推荐使用侦听器，项目中的数据都是通过计算属性连接过来的，项目中监听路由变化。
