javascript vue.js 前端 Javaweb第四章---Vue与指令(入门必看）

//引入vue.js文件

而如代码中，通过v-model指令，text文本框和数据模型data，完成了双向绑定，文本框的值和 message保持一致

二.指令

        由上面，我们可以发现一个新奇的东西，v-model，这便是指令。

指令：HTML标签上带有v-前缀的特殊属性，不同指令不同含义。

常用指令：

指令        作用v-bind为HTML标签绑定属性值，如设置 href,css样式等 v-model 在表单元素上创建双向数据绑定v-on为HTML标签绑定事件v-if条件性的渲染某元素，判定为true时渲染,否则不渲染v-else-ifv-elsev-show根据条件展示某元素，区别在于切换的是display属性的值v-for列表渲染，遍历容器的元素或者对象的属性

v-bind

        为标签绑定属性值，可是有人会问，我们不需要这个也可以绑定啊，可是这是动态绑定诶，

使用时，可以直接省略v-bind

例如：以上代码，当游戏链接出错时，未使用指令，需要一个一个去修改；使用了指令，则可以直接在data数据模型一键修改。

v-on

        为HTML标签绑定事件，在Vue当中创建methods方法。

注：事件不再是onclick，而是click，去掉了on。

v-if、v-else-if、v-else

        这三个配套使用，用法与 Java中的if、else if、else 一致，一般用于标签中，是进行条件判断。当成立时，则会显露出 文本 中的文本内容。

注：如果不成立，浏览器检查中的元素是不存在该行代码的。

未成年

青年

中年

  v-show

        作用与v-if等指令一样，但是会显示出 不符合条件的代码行

 v-for 

        循环，遍历，当数据模型data 里含有数组时，可以使用

语法格式：

{{ 变量名 }}

获取索引：

{{下标值+1}}:{{ 变量名 }}

三.Vue生命周期

生命周期：指一个对象从创建到销毁的整个过程。

Vue生命周期有8个阶段：每触发一个阶段便会自动执行一个生命周期的方法,也称钩子方法。

状态阶段周期beforeCreate创建前created创建后beforeMount挂载前mounted挂载完成beforeUpdate更新前update更新后beforeDestory销毁前destory销毁后

Vue生命周期完整过程: 

 代码示例：

注：Java程序员只要掌握mounted()方法.

结：Vue主要依赖各种指令，生命周期每一个阶段都有其对应的执行方法。

                                                                                ----------懒惰的tq02

精彩链接

评论可见，请评论后查看内容，谢谢！！！

 您阅读本篇文章共花了：