本文共 1875 字，大约阅读时间需要 6 分钟。

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 指令

作用:   都是用来获取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=“变量名”

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

转载地址：http://dfazi.baihongyu.com/