Vue基础认识

最新推荐文章于 2023-12-28 16:07:48 发布
最新推荐文章于 2023-12-28 16:07:48 发布
阅读量88 收藏
点赞数
文章标签： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yukicm/article/details/92842775
版权

Vue

jsx:javascript + xml

​ 可以让我们在dom结构中输写javascript

mustache语法糖

  • ​ mustache支持js的数据类型:

​ 数据类型

  1. 第一种划分：
    基础数据类型： number string boolean
    复杂数据类型: Object( array function )
    特殊数据类型: null undefined
  2. ​ 第二种划分：
    ​ 初始数据类型: number string boolean null undefined
    ​ 引用数据类型: object( array function )
  • mustache不支持console.log和alert

mustache 绑定 dom的属性

案例： v-html
分析： 发现dom元素直接有了一个内容
      这种属性绑定就是为了操作dom

结论： 这种属性绑定的形式就是为了操作dom，我们给这种属性起了一个好听的名字
        Vue 1.0 叫它 属性指令（ 借鉴Angular来的 ）
        Vue 2.0 统称为 ‘指令’

        指令是用一个  v-xxx   表示

        指令是用来操作dom

    Vue中不允许直接操作dom

    mustache语法   ---  属性写法 的属性值是直接写数据的，不需要使用 {{ }} 
    
   HTML:
   <div id="app">
    <p v-html = "h"></p>
    <p v-text = "msg"></p>
    <p v-text = " flag && 1 || 2 " > </p>
  </div>
  
  JS:
     var vm = new Vue({
    el: '#app',
    data: {
     msg: 'hello Vue.js',
     h: '<h3> hello Vue.js </h3>',
     flag: true
    }
  })
指令
<body>
  <div id="app">
    <h3> v-show </h3>
      <p v-show = "showFlag"> v-show指令 </p>
    <hr>
    <h3> v-if - 单路分支 </h3>
      <p v-if = "ifFlag"> v-if - 指令的单路分支 </p>
    <h3> v-if - 双路分支 </h3>
      <p v-if = "ifFlag">  双路分支 成立  </p>
      <p v-else> 双路分支不成立 </p>

    <h3> v-if - 多路分支 </h3>
    <p v-if = " type === 'A'"> A </p>
    <p v-else-if = " type === 'B'"> B </p>
    <p v-else> C </p>
  </div>
</body>
<script>
  /* 
    指令： ( 是绑定在dom属性上 )
        v-html: 可以解析标签型数据( 可以将一个数据展示在一个dom的内容中（ 相当于使用了  innerHTML ）)
        v-text：可以将一个数据展示在一个dom的内容中（ 相当于使用了  innerHTML ）
        条件渲染的指令
          v-show 
            可以控制一个dom的显示隐藏（ 这个指令操作的是dom的display属性 ）
          v-if
            可以控制一个dom的存在与否（ 创建 和 销毁 ）
          v-else
          v-else-if 

    面试题（ 实用题 ） 【 钻石 】
        1. v-if  vs  v-show 区别
        2. 实用： 项目中 如何选择这两个使用

          - v-if 操作的是dom元素（ 组件 ） 的创建或是销毁
          - v-show 操作的是dom元素的display属性
          - v-if可以有多种使用形式： 单路分支， 多路分支， 双路分支
          - v-show 只能写一个单路形式

          一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
          因此，如果需要非常频繁地切换，则使用 v-show 较好；
          如果在运行时条件很少改变，则使用 v-if 较好。
    
  */
  var vm = new Vue({
    el: '#app',//给跟实例一个模板（ 挂载 ）
    data: { 
      showFlag: true,
      ifFlag: false,
      type: 'A'
    }
  })
</script>

<body>
  <div id="app">
    <h3> 数组 </h3>
    <ul>
      <li v-for = " (item,index) in arr ">
        <p> item :{{ item }} --  index: {{ index }}</p>
      </li>
    </ul>
    <hr>
    <h3> 对象 </h3>
    <ul>
      <li v-for = "(item,key,index) in obj"> 
        <p> value: {{ item }} -- key: {{ key }} -- {{ index }} </p>
      </li>
    </ul>
    <hr>
    <h3> json </h3>
    <ul>
      <li v-for = "(item,index) of json">
        <p> id: {{ item.id }} </p>
        <p> task: {{ item.task }} </p>
        <p> {{ index }} </p>
      </li>
    </ul>
    <hr>
    <h3> 嵌套 </h3>
    <ul>
      <li v-for = " item in lists ">
        <p> id: {{ item.id }} </p>
        <ul>
          <li v-for = "todo in item.todos">
            todos中的数据 -- {{ todo }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</body>
<script>
  /* 
    v-for
      1. 数组  v-for = " (item,index) in arr "       item是arr中每一个元素
      2. 对象  v-for = "(item,key,index) in obj "        item是obj的属性值
      3. json类型数据
      4. 嵌套类型数据
  */

  // for( var i = 0 ; i < 100; i ++ ){}

  // for( var i in arr ){}

  // for ( var i of arr ) {}

  new Vue({
    el: '#app',
    data: {
      arr: [1,2,3,4],
      obj: {
        id: 1,
        name: '骏哥',
        sex: 'man',
        age: 18
      },
      json: [
        {
          id: 1,
          task: '敲代码1'
        },
        {
          id: 2, 
          task: '敲代码2'
        }
      ],
      lists: [
        {
          id: 1,
          todos: {
            id: 1,
            name: '连城'
          }
        },
        {
          id: 2,
          todos: {
            id: 2,
            name: '文武'
          }
        }
      ]
    }
  })
</script>

<body>
  <div id="app">
    <h3> 数组 </h3>
    <ul>
      <li v-for = " (item,index) in arr " v-bind:key = "index">
        <p> item :{{ item }} --  index: {{ index }}</p>
      </li>
    </ul>
    <hr>
    <h3> 对象 </h3>
    <ul>
      <li v-for = "(item,key,index) in obj" v-bind:key = "index"> 
        <p> value: {{ item }} -- key: {{ key }} -- {{ index }} </p>
      </li>
    </ul>
    <hr>
    <h3> json </h3>
    <ul>
      <li v-for = "(item,index) of json" v-bind:key = " item.id ">
        <p> id: {{ item.id }} </p>
        <p> task: {{ item.task }} </p>
        <p> {{ index }} </p>
      </li>
    </ul>
    <hr>
    <h3> 嵌套 </h3>
    <ul>
      <li v-for = " item in lists " :key = "item.id">
        <p> id: {{ item.id }} </p>
        <ul>
          <li v-for = "todo in item.todos">
            todos中的数据 -- {{ todo }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</body>
<script>
  /* 
    v-for
      1. 数组  v-for = " (item,index) in arr "       item是arr中每一个元素
      2. 对象  v-for = "(item,key,index) in obj "        item是obj的属性值
      3. json类型数据
      4. 嵌套类型数据

    key: 
      给没一个循环的列表添加一个唯一的标识

      使用指令 v-bind 来绑定 key

      <div v-for = " (item,index) in lists" v-bind: key = " item.id "></div>

      如果有id，那么我们就使用id，如果没有，我们才会选择index

      v-bind: 单项数据绑定： 将一个数据绑定在一个dom的属性上

      简写

      <div v-for = " (item,index) in lists" :key = " item.id "></div>
  */

  // for( var i = 0 ; i < 100; i ++ ){}

  // for( var i in arr ){}

  // for ( var i of arr ) {}

  new Vue({
    el: '#app',
    data: {
      arr: [1,2,3,4],
      obj: {
        id: 1,
        name: '骏哥',
        sex: 'man',
        age: 18
      },
      json: [
        {
          id: 1,
          task: '敲代码1'
        },
        {
          id: 2, 
          task: '敲代码2'
        }
      ],
      lists: [
        {
          id: 1,
          todos: {
            id: 1,
            name: '连城'
          }
        },
        {
          id: 2,
          todos: {
            id: 2,
            name: '文武'
          }
        }
      ]
    }
  })
</script>
class
<body>
  <div id="app">
    <h3> v-class </h3>
    <hr>
    <h3> vue中类名添加第一种 </h3>
    <p class="size bg_color"></p>
    <hr>
    <h3> vue中类名添加第二种 - 对象的形式</h3>
    <p :class = "{ size: true,bg_color: false }"></p>
    <p :class = "{ size: true, bg_color: true }"></p>
    <p :class = "{ [s]: true, [bg_color]: true }"></p>
    <p :class = "{ [s]: 5>3?true: false, [bg_color]: true }"></p>
    <hr>
    <h3> vue中类名添加的第三种形式 - 数组形式（ 推荐 ）</h3>

    <p :class = "['size','bg_color']"></p>

    <p :class = "[ s, bg_color ]"></p>

    <p :class = "[ flag? s:'box', bg_color]"></p>
    <p :class = "[ flag? s:'box', bg_color]"  class = "yyb"></p>

  </div>
</body>
<script>
  /* 
    vue中如何给dom添加类名
      1. 直接在dom上绑定类名
      2. vue中类名绑定 - 对象形式
          目的： dom身上属性class  要和  数据绑定 
          解决：v-bind
          数据中key，我们起的和绑定的对象中的key一样，但是你得知道这两个东西不一样

              <p :class = "{ size,bg_color }"></p>
                  size是自定义的属性， 它的属性值是undefined， 相当于是false
              <p :class = "{ size: true, bg_color: true }"></p>
                  size也是自定义属性，他的属性是true,那么就会加上去
              <p :class = "{ [s]: true, [bg_color]: true }"></p>
                
          格式： v-bind:class = "{ 属性： boolean }"
          格式： v-bind:class = "{ [data]： boolean }"

      3. vue中类名绑定的形式 - 数组的形式    【 推荐 】
        格式： v-bind:class = "[ 数据 ]"

      4. 类名绑定不会覆盖原先的类名

      5. 为什么要绑定类名
          指令是用来操作dom
          目的： 为了将来通过数据来操作类名，类名操作dom

  */
  new Vue({
    el: '#app',
    data: {
      msg: 'hello Vue.js',
      s: 'size',
      bg_color: 'bg_color',
      flag: true
    }
  })


  var a = {
    name: 'yyb'
  }
  var b = {
    name: 'liancheng'
  }
style
<body>
  <div id="app">
    <h3> style </h3>
    <hr>
    <h3> style - 对象形式 </h3>
    <p :style = "{ width: size.width,height: size.height,background: 'red'}"></p>

    <h3> style - 数组的形式 </h3>

    <p :style = "[ { width: '100px',background: 'blue'},{ height: '100px' } ]"></p>

    <p :style = "[ size,bg ]"></p>
  </div>
</body>
<script>
  /* 
    样式的绑定： 
      v-bind: style = ""
      1. 对象的形式
      2. 数组的形式
  */
  new Vue({
    el: '#app',
    data: {
      size: {
        width: '100px',
        height: '100px'
      },
      bg: {
        background: 'purple'
      }
    }
  })
</script>
事件

事件
问题： javascript事件添加有几种形式

  1. 事件绑定
    dom.onclick = function () {}
    dom: 事件源
    on: 绑定事件的形式
    click: 事件类型
    function（）{} 事件处理函数

  2. 事件监听 ： addeventListener

  3. 直接在标签中绑定事件

    vue采用了第三种，也是通过属性的形式绑定在dom身上

<div v-on:click = "事件名称"></div>

<body>
  <div id="app">
    <button v-on:click = "helloHandler( 100 )"> 点击 </button>
    <button @click = "helloHandler( 200 )"> 点击 </button>
  </div>
</body>
<script>
  /* 
    事件
       v-on使用

       事件源
       事件绑定形式
       事件类型
       事件处理程序 
            参数
            事件对象

       v-on:eventType = " handlerName "

       简写  v-on:    --- > @


      问题： 函数调用有哪些方法？
          直接调用 ()
          事件

  事件对象也可以正常使用

        在事件处理程序中， 写e就可以了
   */
  var vm = new Vue({
    el: '#app',
    methods: {
      // 存放事件处理程序
      helloHandler ( num ) {
        alert( num )
      }
      /*
       helloHandler ( e ) {
        console.log( e )
      }*/
    }
  })
  console.log( 'vm', vm )
  </script>

 问题： 如果事件处理程序中有三个参数，第三个参数才是事件对象e,如何实现

      分析： 我们发现事件处理程序中的第三个参数 e 不在是事件对象了，而是一个undefined

      解决： 在函数执行时，传入一个实际参数 $event 来代表事件对象

   */
  var vm = new Vue({
    el: '#app',
    methods: {
      // 存放事件处理程序
      helloHandler ( a,b,e ) {
        console.log( a )
        console.log( b )
        console.log( e )
      }
    }
  })

<body>
  <div id="app">
    <button @click = "add"> + </button>
    <button @click = "remove"> - </button>
    <button @click = "indexHandler"> 修改第二条数据 </button>
    <ul>
      <li v-for =" item in lists " :key = "item.id">
        {{ item.task }}
      </li>
    </ul>
    <hr>
    <button @click = "arrChange"> 修改第二条数据 </button>
    <ul>
      <li v-for = " (item,index ) in arr " :key = "index">
        {{ item }}
      </li>
    </ul>
  </div>
</body>
<script>
  /* 
    业务： 点击这个按钮，添加一条新的数据放在列表数据中


    问题： 下标是不能检测变动的，但是我们现在看到了它检测到了

    问题： 如果我们通过 length = 0 , 来清空一个数组，那么vue检测不到这个变动 
    
    解决方法： 使用splice

    问题： 我们直接修改一个数组下的一个数据时，发现下标不能检测变动了

    解决方法： 使用 Vue.set / this.$set

   */
  new Vue({
    el: '#app',
    data: {
      arr: [1,2,3],
      lists: [
        {
          id: 1,
          task: '锻炼1'
        },
        {
          id: 2,
          task: '敲代码'
        }
      ]
    },
    methods: {
      add () {
        // console.log( this )
        this.lists.push({
          id: this.lists.length + 1,
          task: '打篮球'
        })
      },
      remove () {
        this.lists.pop()
      },
      indexHandler () {
        //将列表中的第二个数据中的task任务修改为 撸猫
          this.lists[1] = {
            id: 2,
            task: '骏哥'
          }
        
        // 将整个列表清空
          // this.lists.length = 0

          // this.lists.splice( 0 )

      },
      arrChange () {
        // this.arr[ 1 ] = '骏哥'  不可以检测到的

        // this.$set( this.arr,'1','骏哥' )
        Vue.set( this.arr,'1','骏哥')
      }
    }
  })
</script>
双向数据绑定
<body>
  <div id="app">
    <input type="text" v-model = "msg">
    <p> {{ msg }} </p>
  </div>
</body>
<script>
  /* 
    v-model
      双向数据绑定
      默认绑定value值
      v-model应用于表单元素
   */
  new Vue({
    el: '#app',
    data: {
      msg: 'hello Vue.js'
    }
  })
</script>

MVVM框架

vue是 MVVM 框架

​ M： Model 数据
​ V： View 视图
​ VM: ViewModel 视图模型（ new Vue() ）

yukicm
关注
Vue的认识与介绍
fcc627的博客
07-31 1140
当数据发生变化是，vue自动更新视图 Vue2.0的原理是利用了 Object.definedProperty 中的setter/getter 代理数据，监控对数据的操作。（这也是为什么vue不支持ie8 以及更早的ie浏览器的原因） Vue3.0原理：通过ES6的新特性proxy来劫持数据，当数据改变时发出通知Vue提供了 MVVM数据绑定和一个可组合的组件系统,具有简单、灵活的API。从技术上讲，Vue.js集中在MVVM模式上的视图模型层,并通过双向数据绑定连接视图和模型。 具体了解请参考我的上一篇博
vue3版openlayers基础脚手架
08-24
在本项目中，“vue3版openlayers基础脚手架”是一个使用Vue3框架构建的...通过这个项目，开发者不仅可以深入理解Vue3和OpenLayers的结合使用，还能掌握WebGIS开发的基本技能，并对前端开发中的类型安全有更深入的认识。
vue 的认识与介绍
热门推荐
webxiaoma
06-04 3万+
今天来总结一些我对vue的认识与介绍，可能有时候我们可以不用对一个框架去有很深的认识，就可以去完成我们的工作，但是对于一个框架有基础的理解对我们开发和学习是很有帮助的，让我们很清楚的知道这个框架是做什么的，我们该用来做些什么。一、渐进式框架Vue 什么是渐进式框架。 vue官网说：Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue
Vue 基础
weixin_45213851的博客
06-19 110
1.模板语法 (1)插值 a.文本 {{}} {{ msg }} 是 this.msg 简写 this.$data.msg -> this.msg -> msg b.纯HTML v-html ，防止XSS,CSRF c.表达式 (2)指令：是带有 v- 前缀的特殊属性 v-bind v-if v-show v-on:cl...
QQ如何设置关闭“可能认识的人”推荐
microcosmv的博客
04-01 7368
参考链接：QQ如何设置关闭“可能认识的人”推荐登陆-主面板的设置-权限设置-防骚扰-不允许向我推荐。。。打上对钩即可。
vue基础认识
society_kang的博客
04-09 253
vue 是一个国产框架 vue.js创作者：尤雨溪 vue.js于2014年2月份正式发布 2015年10月27日正式发布1.0.0版本 2016年4月27日发布2.0预览版本 从一到二变化比较大 有一部分语法不再支持 哪一个版本合适就使用哪一个 vue从出现就受到了前端开发者的青睐 vue是渐进式的javaScript框架，如果说是一个库主要提供api为主，如果说是框架他是一提供一些基础性的服务为主。vue底层有虚拟DOM的支撑、有双向数据绑定的支撑，像这些概念都是一些基础性的服务可以节省实际开发的
Vue基本认识
阳光下的冷静的博客
11-27 281
Vue.js是什么？ Vue是一套用于动态构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持库类结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 Vue的特点： 遵循 MVVM 模式，见下图1 编码简洁, 体积小, 运行效率高, ...
Vue 入门——基本认识
Sachin的博客
07-01 446
Vue 入门——基本认识Vue 基本认识1 Vue 是什么2 Vue 特点3 Vue 扩展插件4. 简单 demo Vue 基本认识 本文写作初衷，最近给同事分享了一下 Vue 的入门教程，但是，感觉在分享过程中，讲得比较乱，没有达到预期的效果；另外，在翻看官方文档中，发现有很多知识原来自己没有注意的地方，因此，通过本系列文章巩固一下自己的学习。 个人觉得 vue 官方文档已经讲解的非常好了，更...
vue简单认识与入门
LuLuhua的博客
12-28 1809
随着互联网技术的爆发，越来越多的前端开发技术如雨后春笋般出现，在众多的 JavaScript 前端框架中，Vue.is 无疑是最出色的(曾经一项针对 JavaScript 的调查表明，Vue.is 有着 89%的开发者满意度)。相比其他前端框架，如 Angular 和 React，Vue.is 框架在实现上更容易，程序员上手更快。使用 Vue.is 技术不仅提高了开发的效率，也改善了开发的体验。
Vue基础day3学习资料.zip
03-31
Vue.js 是一款非常流行的前端...通过系统学习这些资料，学习者不仅可以掌握Vue的基本语法，还能建立起对Vue生态系统的初步认识，为后续深入学习Vue的高级特性以及与其他工具（如Vuex、Vue Router）集成打下坚实基础。
vue基础技术pdf
02-25
Vue.js是一种渐进式的JavaScript框架，由尤雨溪（一位...通过这些基础知识，我们可以对Vue有一个全面的认识，从基本的构建用户界面到复杂应用的开发，Vue都提供了必要的工具和概念，使得开发者可以高效地构建Web应用。
vue学习记录一：vue基础认识和指令
吮指原味鸡的博客
02-24 136
VUE一、什么是VUE 一、什么是VUE
jdk-1.8(8u211-windows-x64)
10-07
jdk-8u211-windows-x64
光储并网直流微电网simulink仿真模型，光伏采用mppt实现最大功率输出 储能由蓄电池和超级电容构成的混合储能系统 为了
10-07
光储并网直流微电网simulink仿真模型，光伏采用mppt实现最大功率输出。 储能由蓄电池和超级电容构成的混合储能系统。 为了确保微网并网时电能质量，采用二阶低通滤波法对光伏输出功率进行抑制，
失物招领信息交互平台 SSM毕业设计 源码+数据库+论文（JAVA+SpringBoot+Vue.JS）.zip
最新发布
10-07
失物招领信息交互平台 SSM毕业设计 源码+数据库+论文（JAVA+SpringBoot+Vue.JS） 启动教程：https://www.bilibili.com/video/BV1GK1iYyE2B
GTT2602-VB一种N-Channel沟道SOT23-6封装MOS管
10-07
30V;6A;RDS(ON)=30mΩ@VGS=10V;VGS=20V;Vth=1.2V
基于51单片机的水箱液位远程监测系统源代码+原理图+流程图+程序说明
10-07
1、使用单片机串口与模块通信；接法如下 STC单片机 GPRS模块 P3.0(RXD)->TXD P3.1(TXD)->RXD GND ->GND 晶振选用11.05926MHz 2、更改服务器地址，包括IP和端口号，要与实际服务器地址对应上。 3、测试此功能时，确保您的服务器是可用的。
vue脚手架认识及项目搭建
04-04
Vue脚手架，也称为Vue CLI（Command Line Interface），是Vue官方提供的命令行工具，用于快速搭建Vue项目的...以上就是使用Vue脚手架创建项目的基本步骤，通过Vue脚手架，可以快速、高效地创建Vue项目，提高开发效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值