vue的六大指令

首先导入js文件

上图在括号内传参，使用大括号，#为选择器，选择控制app

 上图中data对象就是渲染到页面上的数据，在div行中间双括号需要被渲染的数据

 

 第一部分 内容渲染指令

 

v-text缺点：使用v-text会覆盖掉p标签里面的指令，上图中就是把性别给覆盖掉 

 

 {{}}插值表达式开发中用的最多

 例子

 

第二部分 属性绑定指令 

 属性绑定注意点 ：插值表达式只能用在元素内容节点中不能用在属性节点中

接下来是v-bind的使用

placeholder是给标签框中加入提示词

 v-bind:可以简化使用，如下图所示

 

 

 元素的title属性，就是把鼠标放上去之后，会出现一个如图所示的提示，出现一个box3

 

 代码为

 

 

第三部分 事件绑定指令 

 

 

 上面的函数可以简写，简写如下图所示

console.log('ok')就是在控制台打印一个ok，如下图所示 ，下图把ok替换成了sub处理函数

 

 

当点击+1按钮之后可以实现数值增大，上述两行代码也可简写为如下图所示

 

 上述操作都是加一，那么我们想加别的数字，可以利用add（n）进行传参，如下图所示

 

v-on指令也可以被简写，可以简写为@

 第四部分 事件对象$event

 $event用来传参

 e.target.style.backgroundColor = 'red'给背景进行换色

 第五部分 事件修饰符

绑定事件同时阻止默认行为用@click.prevent

 

 

 以下是个阻止事件冒泡的例子

 第六部分 按键修饰符

 

 下图中，按下键盘中的esc，文本框中输入的内容就会消失

 第七部分 双向绑定指令

 

 v-model可以把数据源里面的数据呈现到文本框里面

代码如下

 

 下面代码中加入了一个v-bind，这个是单向绑定，更改文本框中间的内容，只有他自己改变，其他的文本框不改变

v-model可配合如下使用

下面是一个select下拉框的例子，里面使用了v-model，city的默认值是2，那么下拉框中的默认值就是上海

 ——————————————————————————————————————————

如果不用.number,那么我们如果把1变成11，那么结果就是112，这是字符串的拼接。使用.number之后就是数字的加减

 .trim用法：可以去除空格，在文本框中输入的空格会自动消失

 

 .lazy的用法：我们鼠标还在文本框中并且还在删除数据的过程中，不会立刻同步到后台，只有当指针离开文本框之后，才会更新数据

第八部分 条件渲染指令

 

 我们再打开页面进行测v-if来进行判断true和false，并且自动的显示和移除

而v-show则是动态的生成和隐藏style样式来进行显示和移除

 v-if和v-else的配合使用

第九部分 列表渲染指令 

 列表渲染就是list中每生成一行，ul中就会生成一行li

 

 上面代码的效果展示如下

 

 上面展示出来的效果比较难看，我们引入bootstrap

 

 table-bordered是添加边框，table-hover是鼠标放上去之后高亮，table-striped是隔行变色

 上述代码中我们没有用到v-forl来进行循环，下面我们就用v-for

 v-for中的索引

这里的index也可用别的单词代替，不是固定的，这时候索引从零开始， ：title是加上属性绑定，下图中鼠标放到文本框中就会出现提示

 我们再使用v-for的时候必须用到key，不用的话可能会报错

 label标签的for属性

我们常见把框选中，鼠标只能再框里面电，而我们使用label标签的for属性就可以点击文字，这样框里面也会打勾

下面第一个是没改进的代码，第二个是改进的代码

 

 form表单有自动提交的功能，使用prevent可以阻止网页刷新

 上述add方法可以优化为以下内容