Vue的学习

一.模板语法（页面文本的动态修改）

1.原始HTML

双大括号会将数据解释为普通文本，而非HTML代码。为了输出真正的HTML，需要使用v-html指令

 

2.v-bind指令也可以简写为：这个符号

 

 二.条件渲染

v-if指令用于条件性的渲染一块内容，这块内容只会在指令的表达式返回true值的时候被渲染。

v-else指令来表示v-if的else块

 

v-show(在代码显示时不会被干掉)

 

 三.列表渲染

v-for把一个数组映射为一组元素

可以用v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items 形式的语法，其中items是原数据数组，而item则是被迭代的数组元素的别名。

把items换成newsList

 维护状态（如果要写的数据没有id就加index数组下标v-for（里边有2两个元素一个item另一个写index））

有id时这么写

 

没id时这么写

 

 

 四.事件处理

监听事件（可以理解为添加事件）

使用v-on指令（通常缩写为@符号）来监听DOM事件。用法v-on:click="methodName"或者@click="methodName"

事件处理方法（很多事件处理逻辑会更为复杂，所以直接都写在v-on指令中不行因此v-on可以接收一个需要调用的方法名称methods）

点击按钮消息被改变

 五.表单输入绑定

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理