1.模板
2.computed 和 watch
3.class 和 style
4.条件
5.循环
6.事件
7.表单
一、模板
- 插值、表达式
-
-
<template>
<div>
p>文本插值 {{message}}</p><p> js 表达式 {{flag: 'yes' : 'no'}} (只能是表达式，不能是 js语句)</p>
</div>
</template> export default(){data(){return {message:'hello vue',flag: true}} }
-
-
- 属性
-
- data: 定义组件的初始数据
- props: 传递数据给子组件
- computed: 定义计算属性
- methods: 定义组件的方法
- watch: 监听组件的数据变化
- components: 注册子组件。将其他组件注册为当前组件的子组件，从而在模板中使用这些子组件
-
- 指令:
-
- v-if: 条件渲染指令，根据表达式的真假来决定是否渲染该元素
- v-show： 条件显示指令，根据表达式的真假来决定元素的显示和隐藏
- v-for: 列表渲染指令，根据数据源循环渲染列表元素
- v-bind： 属性绑定指令， 动态绑定属性
- v-on： 事件绑定指令，用于监听 DOM事件，并执行对应的方法
- v-model: 数据双向绑定指令，用于在表单和vue实例的数据之间建立双向绑定关系
- v-text： 文本插值指令，将数据插入到元素的文本内容中
- v-html： HTML 插值指令，将数据作为HTML解析并插入到元素中。会有XSS 风险，会覆盖
-
二、computed 和 watch
1.computed 介绍
-
-
- computed 用来监控自己定义的变量，该变量在data 内没有声明，直接在computed中定义。
- computed 中定义的属性值是对象时，那么对象中会定义一个get 方法和 一个set 方法，获取时调用get方法，数据变化时调用set方法
- computed 中定义的属性值是函数时，那么默认会走get方法，必须要有一个返回值，函数的返回值就是该属性的属性值
- computed 中定义的属性值会被缓存，只有当依赖数据发生变化时才会重新计算，这样可以避免重复计算提高性能（当页面重新渲染，或者页面中多处引用时，只要值不变就会直接从缓存中获取结果，不会重新计算）
-
<template><div><p>{{perName}}</p></div>
</template>
export default {data(){per:{name: '张三',age: 18}}computed: {perName(){return this.per.name}}
}
2. watch 介绍
-
-
- watch 是检测data 内声明的数据。
- watch 监听简单数据，可以获得新旧两个值
- watch 检听对象时，需要使用深度监听，此时拿到的新旧两个值时一样的（因为他们存储的指针地址是同一个）。所以深度监听可以检测到数据变化，但不能检测到哪个属性发生了变化
- watch 监听props 组件传过来的值时，第一次加载页面时不会执行，需要设置immediate:true 才会在第一次加载时执行
-
3.二者区别：
-
-
- computed 监听的数据在 data中 没有声明；而 watch 监听的数据必须是data 中声明的数据 或者props传过来的
- computed 不支持异步； 而 watch 支持异步操作
- computed 具有缓存，页面重新渲染，值不变时，会直接返回之前计算的结果，不会重新计算。而watch 没有缓存功能，页面重新渲染时，数据不变也会执行
- computed 计算属性值是函数时，默认使用get方法。如果属性值是对象时，属性值有一个get 和 set 方法。当数据变化时调用set方法
-
三、class 和 style
四、条件
五、循环
六、事件
七、表单
