一. vue中的指令
{{ }}可以用来把数据显示在视图上，但它的功能还是相当有限的。例如，如果是一个列表数据（数组）希望使用循环来显示，它就做不到了。所以我们需要继续学习vue的指令系统。
1.指令
vue提供了指令（directive）功能，这些指令都是以v-开头(例如：v-for )，它们从形式上来看是标签的自定义属性（只不过是由vue提供的） 。
示例：
作用
指令必须用在某个标签（或者是组件）上， 用来扩展标签的原有功能。
学习vue，一个主要的学习内容就是各种指令的用法
指令列表:
v-bind
v-on
v-model
v-for
v-text
v-html
v-if
v-show
v-if,v-else-if, v-else
小结
- vue提供指令系统来增强标签的能力，
- 指令都是以 v- 开头的, 每个指令都有自己独特的作用
- 指令的学习基本上没有先后顺序关系的，先学哪一个，后学哪一个都可以。
- 指令要与具体的标签结合一起使用
- 一个标签上也可以使用多个指令
2.vue指令v-bind
问题导入
如何动态设置img的src的内容
<img src="{{图片的地址}}">
作用
v-bind用来动态绑定标签上的属性的值。（标签上的属性值不能使用插值表达式来设置）。
3.vue指令-v-for
语法:
<li v-for="(item, idx) in arr" :key="idx">{{ item }}</li>
索引可以省略目标结构可以是：数组 / 对象 / 数字
代码:
效果:
点击一次变换位置:
4.vue指令v-text和v-html
语法:
-
-
v-text="vue数据变量" -
v-html="vue数据变量"
-
小结
v-text把值当成普通字符串显示, v-text ===> innerText
v-html把值当做html解析,v-html ===> innerHTML
5.vue指令v-show和v-if
作用
控制标签的可见与不可见
语法
- <标签 v-show="vue变量" />
- <标签 v-if="vue变量" />
如果vue变量的值为true，就可见，否则就不可见。
原理:
- v-show 用的display:none隐藏 (频繁切换使用)
- v-if 直接从DOM树上添加或移除
v-if显示
v-show隐藏
v-if显示
v-show显示
6.vue指令v-if,v-else-if,else
格式:与js中的if选择结构是一致的。
<标签 v-if="条件"> </标签>
<标签 v-else-if="条件"> </标签>
<标签 v-else-if="条件"> </标签>
<标签 v-else> </标签>
用v-if与v-else-if条件
5.v-on和methods
作用
给标签绑定事件
语法:
1. <标签 v-on:事件名="要执行的*少量代码*" >
2. <标签 v-on:事件名="methods中的函数" >
3. <标签 v-on:事件名="methods中的函数(实参)">
页面展示效果:
6.vue基础-MVVM设计模式
目的
了解MVVM的设计模式，理解数据驱动视图 的含义 vue框架采用了mvvm的设计思想；
数据驱动视图演示
MVVM详解
模式说明：MVVM = Model + View + ViewModel
1. MVVM，一种软件架构模式，决定了写代码的思想和层次
● M： model数据模型 (data里定义)
● V： view视图 （template里定义html页面结构）
● VM： ViewModel视图模型 (vue组件实例this)
2. MVVM通过数据双向绑定让数据自动地双向同步 不再需要操作DOM
● V（修改视图） -> M（数据自动同步）
● M（修改数据） -> V（视图自动同步）
