一.{{}} - 胡须表达式
表达式里面写在哪里？ - 表达式写在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，就没有这个类
