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元素 推荐 自己自定义容器 将所有代码写在容器内部

     <div id="app">
    代码
 </div>

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

4.第一案例总结

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

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

作用:   都是用来获取vue实例data中声明数据
语法:   在哪个标
签展示数据直接在哪个标签上 书写 v-text="变量名" v-html="变量名"

v-text {{}}区别:
    1.v-text获取数据会将标签原始内容进行覆盖  {{}}获取数据直接将数据插入到指定位置   {{}} 插值表达式
    2.v-text获取数据避免因为网络环境较差情况{{}}取值出现插值闪烁问题

v-text、v-html区别：  innerText innerHtml
    1.v-text获取数据直接渲染到页面的指定位置
    2.v-html获取数据先解析数据里面html标签然后在将解析标签渲染到页面上

6.v-on 指令

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

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

} } });

7. v-if v-show 指令

作用: 用来控制html标签有条件的展示 语法: 如果控制哪个html展示与否 直接在对应html标签中 v-if|show=“false” v-if|show=“vue实例中data中声明变量” 区别: 1.v-if 控制标签展示底层操作DOM树通过控制对标签删除 添加 控制标签的展示 2.v-show 控制标签展示底层利用css的display属性来控制展示 推荐

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=“变量名”

如果大家觉得还不错，点赞，收藏，分享，一键三连支持我一下~