Vue 入门 指令

Vue 入门 指令

1.vue 介绍

vue 前端 javascript 框架 作用: 简化页面js操作 双向绑定 机制 vue 前后端分离基础

2.使用vue 2.x

dev: vue.js 学习 (警告 提示 源代码) prod: vue.min.js 推荐

3.vue 第一环境

a.引入 vue.js 核心js文件

b.在页面创建 vue实例对象 通过vue实例管理整个页面 html body: 注意: vue 官方不推荐直接vue作用html body元素 推荐 自己自定义容器 将所有代码写在容器内部

new Vue({ el: "#app", //用来vue实例作用范围 日后可以在vue作用范围书写vue相关语法 指令 data:{ //用来vue实例绑定一系列数据 js 字符串 ..... 对象(数组 对象 对象数组) 日后可以在vue作用范围内 使用 {{变量名}} 获取data中数据 msg: "hello vue" } })

4.第一案例总结

1.el元素书写任何css选择 id class ... 推荐 id2.data用来vue绑定一些数据 日后在data定义数据使用{{变量名}}获取3.{{变量名}}获取数据 进行算术运算 逻辑运算 调用获取数据对应类型相关方法

5.v-text 指令 和 v-html 指令

6.v-on 指令

作用： 用来给页面html标签绑定事件 语法： 给哪个html标签事件 直接对应标签上书写 v-on：事件名 =“事件处理函数名|事件处理函数名()” 简化: @ 符号 简化 v-on: @事件名=“事件处理函数名|事件处理函数名(传递参数)”

new Vue({ el:"" data:{}, methods:{ //用来给vue实例定义一系列函数 事件处理函数名:function(形参){}, 事件处理函数名(形参){

} } });

7. v-if v-show 指令

8. v-bind 指令

作用: 用来将html标签的属性进行绑定,绑定给vue实例进行统一管理 好处: 如果没有绑定标签属性写死的,无法动态修改 绑定之后,日后修改vue中属性值达到修改标签属性效果 语法: 绑定html标签哪个属性 直接在标签的对应属性上 v-bind:属性名=“vue管理变量名” 简化语法: v-bind:属性名=“变量名” ==== :属性名=“变量名”

9.v-for 指令

作用: 用来在html标签中遍历vue实例中相关数据 展示到页面 语法: 遍历数组: v-for="(value,index) in 数组变量名" 遍历对象: v-for="(value,key,index) in 对象变量名" 遍历对象数组: v-for="(value,index) in 对象数组变量名" 注意: 推荐在遍历加入 :key=“唯一值”

10.v-model 指令

作用: 将html (form)标签的value属性进行绑定,交给vue进行管理 语法: 直接对应form标签上加入 v-model=“变量名”

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。