一.{{}} - 胡须表达式
表达式里面写在哪里? - 表达式写在HTML的标签中
表达式里面写什么? - 可以直接写data中的数据,也可以写基本的js语句
<template>
<div>
<p>{{name}}</p>
<p>{{num == 1 ? name : num}}</P>
</div>
</template>
<script>
export default{
data(){
return {
name:'xxx',
num: 1
}
}
}
</script>
二.基本配置项
el: // 挂载dom
data: // 准备数据
components: {
“标签名”: 引入的组件的变量名 // 注册组件
}
watch:{} //监听
methods:{} //书写方法
computed:{ //计算属性
函数名() { 整个函数的返回结果 可以直接使用函数名,把函数当成一个普通属性使用。
return 结果
}
}
filters:{ // 过滤器
函数名(msg) { // 函数中,可以对msg进行各种格式处理,返回什么,页面就能输出什么
return xxx
}
}
注意:
(1)计算属性,函数必须有返回值,函数的名字接收返回值,当成一个属性来使用。
(2)计算属性,有依赖缓存,只有依赖的数据发生改变,才会重新计算,否则,不会重新计算,直接使用缓存
(3)计算属性有getter和setter,但是一般都不用setter
(4)filter的使用:<h1> {{ msg | 过滤器函数名 }} </h1>
三.基本指令
1.什么是指令?
指令是写在标签上的一种自定义属性,主要是把vue实例中的数据,输出到html中(vue实例对象和html关联)。
<标签 id=”” class=”” v-*=”xxx”></标签>
2.常用指令
(1)v-text <div id=”” class=”” v-text=”xxx”></div> =》 <div id=”” class=””>xxx</div>
(2)v-html - 可以解析标签
(3)v-show - 频繁的切换 - 修改的display属性
(4)v-if - 用户权限之类的 - 删除或重建DOM
(5)v-else-if
(6)v-else
<h3 v-if=' score > 50'>xxx</h3> //>50显示
<h3 v-else-if=' score > 20'>xxx</h3> //>20显示
<h3 v-else=' score > 10'>xxx</h3> //>10显示
(7)v-for 遍历
<li v-for='(item,index) in arr' :key='index'>{{item}}</li> //遍历数组
<li v-for='(item,key,index) in obj' :key='index'>{{item}}</li> //遍历对象
注意:v-for遍历操作数组,实现改变时-
如: arr[index] = [1,2,5,] // 数组自身改变,不能更新Dom结构
vue内部对数组的方法进行了重写 - 继续原生js操作,然后进行更新了界面
因此,要界面数据更新,必须使用vue重写后的方法
(8) v-model 双向数据绑定 - 只能使用于表单,让表单和数据双向绑定。
适用的标签: input(输入框 单选框 多选框) select textarea
(9) v-on - 绑定事件 (简写 @)
<标签 v-on:事件类型=”函数名”></标签>
v-on @click
阻止默认事件 - @click.prevent =
阻止冒泡事件 - @click.stop =
按enter键触发 - @click.enter = /@click.13
传递一个值 @click='geta(12,$event)' //默认函数不传值,会自动传入$event
geta(num,event){
console.log(event.target.innerHtml)
}
(10)v-bind - 给属性绑定动态数据
语法: <标签 v-bind:属性=”表达式” ></标签>
简写: <标签 :属性=”表达式” ></标签>
v-bind绑定style
语法: <标签 :style=”{ color: ‘red’, backgroundColor: ‘green’ }” ></标签>
v-bind绑定class
语法:<标签 v-bind:class=”{ 类名1: flag1, 类名2: flag2 }” ></标签>
注意:flag是true,就有这个类,是false,就没有这个类