Vue.js基本代码及基本指令

最新推荐文章于 2022-10-30 22:58:21 发布
最新推荐文章于 2022-10-30 22:58:21 发布
阅读量424 收藏
点赞数
分类专栏： 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linjiehuijh/article/details/83617790
版权

 

目录

Tips

1.Vue初步使用

2.Vue的基本表达式

3.几点注意事项

4.事件修饰符

5.v-model指令的学习

6.Vue中的样式

7.v-for

8.v-if和v-show

Tips

1.Vue初步使用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 1. 导入Vue的包 -->
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 -->
  <!-- Vue 实例所控制的这个元素区域，就是我们的 V  -->
  <div id="app">
    <p>{{ msg }}</p>
  </div>

  <script>
    // 2. 创建一个Vue的实例
    // 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数
    //  注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者
    var vm = new Vue({
      el: '#app',  // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
      // 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的
      data: { // data 属性中，存放的是 el 中要用到的数据
        msg: '欢迎学习Vue' // 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
      }
    })
  </script>
</body>

</html>

2.Vue的基本表达式

 插值表达式 和  v-text  

    <p v-cloak>++++++++ {{ msg }} ----------</p>
    <h4 v-text="msg">==================</h4>

    v-text会覆盖元素中原本的内容，但是 插值表达式  只会替换自己的这个占位符，不会把 整个元素的内容清空

    v-cloak：使用 v-cloak 能够解决 插值表达式闪烁的问题

    v-html：将msg中的内容当作html来解析

    v-bind   Vue提供的属性绑定机制   缩写是 :
    v-on     Vue提供的事件绑定机制   缩写是 @

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    [v-cloak] {
      /* display: none; */
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题 -->
    <p v-cloak>++++++++ {{ msg }} ----------</p>
    <h4 v-text="msg">==================</h4>
    <!-- 默认 v-text 是没有闪烁问题的 -->
    <!-- v-text会覆盖元素中原本的内容，但是 插值表达式  只会替换自己的这个占位符，不会把 整个元素的内容清空 -->

    <div>{{msg2}}</div>
    <div v-text="msg2"></div>
    <div v-html="msg2">1212112</div>

    <!-- v-bind: 是 Vue中，提供的用于绑定属性的指令 -->
    <!-- <input type="button" value="按钮" v-bind:title="mytitle + '123'"> -->
    <!-- 注意： v-bind: 指令可以被简写为 :要绑定的属性 -->
    <!-- v-bind 中，可以写合法的JS表达式 -->

    <!-- Vue 中提供了 v-on: 事件绑定机制 -->
    <!-- <input type="button" value="按钮" :title="mytitle + '123'" v-on:click="alert('hello')"> -->


    <input type="button" value="按钮" @click="show">
  </div>


  <script src="./lib/vue-2.4.0.js"></script>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '123',
        msg2: '<h1>哈哈，我是一个大大的H1， 我大，我骄傲</h1>',
        mytitle: '这是一个自己定义的title'
      },
      methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
        show: function () {
          alert('Hello')
        }
      }
    })


    /* document.getElementById('btn').onclick = function(){
      alert('Hello')
    } */
  </script>
</body>

</html>

3.几点注意事项

注意：在 VM实例中，如果想要获取 data 上的数据，或者 想要调用 methods 中的 方法，必须通过 this.数据属性名  或  this.方法名 来进行访问，这里的this，就表示 我们 new 出来的  VM 实例对象

 VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，从data 上同步到页面中去；【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】

4.事件修饰符

    使用  .stop  阻止冒泡
    <div class="inner" @click="div1Handler">
      <input type="button" value="戳他" @click.stop="btnHandler">
    </div>

    使用 .prevent 阻止默认行为
    <a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a>

    使用  .capture 实现捕获触发事件的机制
    <div class="inner" @click.capture="div1Handler">
      <input type="button" value="戳他" @click="btnHandler">
    </div>

    使用 .self 实现只有点击当前元素时候，才会触发事件处理函数
    <div class="inner" @click="div1Handler">
      <input type="button" value="戳他" @click="btnHandler">
    </div>

    使用 .once 只触发一次事件处理函数
    <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a>


     .stop 和 .self 的区别
    <div class="outer" @click="div2Handler">
      <div class="inner" @click="div1Handler">
        <input type="button" value="戳他" @click.stop="btnHandler">
      </div>
    </div>

    .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为
    <div class="outer" @click="div2Handler">
      <div class="inner" @click.self="div1Handler">
        <input type="button" value="戳他" @click="btnHandler">
      </div>
    </div>

5.v-model指令的学习

    <!-- v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V， 无法实现数据的双向绑定  -->
    <!-- <input type="text" v-bind:value="msg" style="width:100%;"> -->

    <!-- 使用  v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定 -->
    <!-- 注意： v-model 只能运用在 表单元素中 -->
    <!-- input(radio, text, address, email....)   select    checkbox   textarea   -->
    <input type="text" style="width:100%;" v-model="msg">

6.Vue中的样式

 6.1class:

  <style>
    .red {
      color: red;
    }

    .thin {
      font-weight: 200;
    }

    .italic {
      font-style: italic;
    }

    .active {
      letter-spacing: 0.5em;
    }
  </style>

    <!-- 第一种使用方式，直接传递一个数组，注意： 这里的 class 需要使用  v-bind 做数据绑定 -->
    <!-- <h1 :class="['thin', 'italic']">这是一个很大很大的H1，大到你无法想象！！！</h1> -->

    <!-- 在数组中使用三元表达式 -->
    <!-- <h1 :class="['thin', 'italic', flag?'active':'']">这是一个很大很大的H1，大到你无法想象！！！</h1> -->

    <!-- 在数组中使用 对象来代替三元表达式，提高代码的可读性 -->
    <!-- <h1 :class="['thin', 'italic', {'active':flag} ]">这是一个很大很大的H1，大到你无法想象！！！</h1> -->

    <!-- 在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名，由于 对象的属性可带引号，也可不带引号，所以 这里我没写引号；  属性的值 是一个标识符 -->

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: true,
        classObj: { red: true, thin: true, italic: false, active: false }
      },
      methods: {}
    });
  </script>

6.2 style

  <div id="app">
    <!-- 对象就是无序键值对的集合 -->
    <!-- <h1 :style="styleObj1">这是一个h1</h1> -->

    <h1 :style="[ styleObj1, styleObj2 ]">这是一个h1</h1>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        styleObj1: { color: 'red', 'font-weight': 200 },
        styleObj2: { 'font-style': 'italic' }
      },
      methods: {}
    });
  </script>

7.v-for

7.1循环普通数组

 <div id="app">

    <p v-for="(item, i) in list">索引值：{{i}} --- 每一项：{{item}}</p>

  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        list: [1, 2, 3, 4, 5, 6]
      },
      methods: {}
    });
  </script>

7.2循环对象数组

 <div id="app">
    <p v-for="(user, i) in list">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        list: [
          { id: 1, name: 'zs1' },
          { id: 2, name: 'zs2' },
          { id: 3, name: 'zs3' },
          { id: 4, name: 'zs4' }
        ]
      },
      methods: {}
    });
  </script>

7.3循环对象

  <div id="app">
    <!-- 注意：在遍历对象身上的键值对的时候， 除了 有  val  key  ,在第三个位置还有 一个 索引  -->
    <p v-for="(val, key, i) in user">值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}</p>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        user: {
          id: 1,
          name: '托尼·屎大颗',
          gender: '男'
        }
      },
      methods: {}
    });
  </script>

7.4迭代数字

  <div id="app">
    <!-- in 后面我们放过  普通数组，对象数组，对象， 还可以放数字 -->
    <!-- 注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始 -->
    <p v-for="count in 10">这是第 {{ count }} 次循环</p>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });
  </script>

7.5v-for中的key

    <!-- 注意： v-for 循环的时候，key 属性只能使用 number获取string -->
    <!-- 注意： key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值 -->
    <!-- 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值 -->

  <div id="app">

    <div>
      <label>Id:
        <input type="text" v-model="id">
      </label>

      <label>Name:
        <input type="text" v-model="name">
      </label>

      <input type="button" value="添加" @click="add">
    </div>

    <p v-for="item in list" :key="item.id">
      <input type="checkbox">{{item.id}} --- {{item.name}}
    </p>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        id: '',
        name: '',
        list: [
          { id: 1, name: '李斯' },
          { id: 2, name: '嬴政' },
          { id: 3, name: '赵高' },
          { id: 4, name: '韩非' },
          { id: 5, name: '荀子' }
        ]
      },
      methods: {
        add() { // 添加方法
          this.list.unshift({ id: this.id, name: this.name })
        }
      }
    });
  </script>

8.v-if和v-show

    <!-- v-if 的特点：每次都会重新删除或创建元素 -->
    <!-- v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式 -->

    <!-- v-if 有较高的切换性能消耗 -->
    <!-- v-show 有较高的初始渲染消耗 -->

    <!-- 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show -->
    <!-- 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if -->

  <div id="app">

    <!-- <input type="button" value="toggle" @click="toggle"> -->
    <input type="button" value="toggle" @click="flag=!flag">
    <h3 v-if="flag">这是用v-if控制的元素</h3>
    <h3 v-show="flag">这是用v-show控制的元素</h3>

  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {
        /* toggle() {
          this.flag = !this.flag
        } */
      }
    });
  </script>
 

 

jhkkk_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue.js第三章
weixin_53411879的博客
11-28 810
2.6 Class与Style绑定v-bind 通过 class 列表和 style 指定样式是数据绑定的一个常见需求。它们都是元素的属性，都用v-bind处理，其中表达式结果的类型可以是：字符串、对象或数组。 2.6.1 语法格式 v-bind:class='表达式’或:class=‘表达式’ ​ class的表达式可以为： ​ 字符串:class=‘activeClass’ ​ 对象:class=’{active:isActive,error:hasError}’ ​ 数组:class=’[“ac
Vue.js开发教程学习心得体会
最新发布
2201_75492083的博客
12-26 1407
在当今快速发展的互联网时代，前端技术日新月异，不断推动着网页和应用的用户体验达到新的高度。作为一个热衷于追求技术前沿的在校大学生，我深知掌握一门强大的前端框架对于提高学习效率和应对复杂业务需求的重要性。于是，在众多前端框架中，我选择了Vue.js作为我的学习目标。通过系统地学习Vue.js开发教程，我不仅掌握了Vue的核心概念和用法，还对前端开发有了更为深刻的认识。自从踏入编程的大门，我就一直在寻找一个能够满足我需求的框架，能够帮助我快速构建用户界面。Vue.js的文档清晰、结构合理，使得我可以快速上手。
Vue.js的简单概念和使用（代码及运行图）
weixin_57197500的博客
08-06 1027
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便与第三方库或既有项目整合。Vue.js 是前端的主流框架之一，和 Angular.js、React.js 一起，并成为前端三大主流框架！官网地址：https://cn.vuejs.org/...
Vue.js+Node.js全栈开发教程：Vue.js指令详解
Lee达森的博客
06-23 698
9.3.1　Vue指令概述 Vue.js框架设计了一个复杂且完整的“指令”系统，用于实现较 为复杂的动态页面渲染功能。在Vue.js框架下，一般的指令 （ Directives ） 都 是 指 带 有 前 缀 （ “v-” ） 的 特 殊 属 性 （Attribute）。 Vue指令的功能是，当表达式的值（一般对应property属性）发生 改变时，将其产生的连带变化“响应式”地作用于D?M，从而完成页面 的渲染操作。关于Vue指令的具体形式，请参考下面的简单示例： 上面代码示例中的v-if就是一个Vue指
Vue.js前端开发实战-源代码.zip
07-07
Vue.js前端开发实战-源代码.zip
20个vue.js基础示例代码（1-20）
理木客
08-19 1122
1、Vue.js如何获取Url查询字符串值？ url地址"/mypage?q=food"; this.$route.query.q; 2、Vue.js获取字符串长度示例 myvariable.length; 3、Vue.js启用禁用输入字段示例 <div id="app"> <input type="text" :disabled="isDisabled"...
vue.js项目实战,vue.js项目实战pdf下载,JavaScript
09-10
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，因其简单易学、高效灵活的特性，在Web开发领域迅速崛起。本资源聚焦于"Vue.js项目实战"，旨在帮助开发者通过实际操作深入理解Vue.js的核心概念和技术，从而...
vue.js 下载，引入vue.js 本地开发
05-18
以上就是Vue.js的基本介绍和引入方式，结合标签中的"javascript"和"ecmascript"，Vue.js是基于ECMAScript（特别是ES5和部分ES6特性）构建的，因此理解JavaScript基础和现代JavaScript特性对于深入学习Vue.js至关重要...
vue.js入门源代码
08-07
在这个“vue.js入门源代码”中，我们将探讨Vue.js的基本概念和关键特性。 1. **Vue实例**：Vue.js 应用程序通过创建Vue实例开始。一个Vue实例是数据和视图之间的桥梁，它可以绑定数据到DOM元素，并响应数据变化。在...
Vue.js前端开发 PDF
05-30
Vue.js的PDF文档会详细解释以上知识点，并通过实例代码和示例项目帮助读者理解和掌握。对于初学者，理解并实践这些内容将有助于成为一名合格的Vue.js开发者。在实际开发中，还需要结合其他技术如axios进行API请求，...
vue常用指令
热门推荐
jayLog的博客
01-29 2万+
vue2.x的常用指令。篇幅简短，易懂
Vue的基本指令
oxh499780424的博客
10-30 462
vue的特性就是对数据进行操作，减少对Dom的操作，在data中定义的属性会是全局的，只要你改变了属性也会实时改变，不需要你再像js那样，改变之后重新调用方法显示。v-bind: 将值绑定到标签的自定义属性上，形式为 v-bind:title=“mytitle”，可以简写为 :属性名。v-text(): v-text是用于操作纯文本，它会替代显示对应的数据对象上的值，可以简写为{{}}, 即插值表达式。v-for: 循环遍历。v-if:值如果为true的情况下，显示标签，如果为false会移除标签。
Vue.js 指令
m0_51281306的博客
04-10 1033
指令的本质就是 HTML 自定义属性Vue.js 的指令就是以 v- 开头的自定义属 性内容处理• v-once 指令 内容处理 • v-text 指令 • v-html 指令v-once 指令v-once 指令 • 使元素内部的插值表达式只生效一次。 v-text 指令v-text 指令 • 元素内容整体替换为指定纯文本数据。 v-html 指令 • 元素内容整体替换为指定的 HTML 文本。 属性绑定 • v-bind 指令 ...
vue.js经典实例代码(持续更新中~）
GreenBark
03-20 6869
按照传统，首先输出hello world. 1.数据绑定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> <script src="https://cdn.st...
vuejs最简单实现 html+js
zhongfei1217的专栏
11-12 1万+
vuejs是一种构建用户界面的库，具体可参考http://cn.vuejs.org/v2/guide/ 本文使用vuejs实现一个最简单的功能，即实现响应式的数据绑定，将前端的view和model绑定。 在vuetest文件夹下新建两个文件，app.html和app.js，app.html如下： vuetest
前端开发之走进Vue.js
weixin_33881050的博客
10-31 797
Vue.js作为目前最热门最具前景的前端框架之一，其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。本文旨在帮助大家认识Vue.js，了解Vue.js的开发流程，并进一步理解如何通过Vue.js来构建一个中大型的前端项目，同时做好相应的部署与优化工作。 文章将以PPT图片附加文字介绍的形式展开，不会涉及知识点的具体代码，点到为止。...
Vue.js代码风格-笔记
Clew123的博客
01-02 865
Vue.js代码风格-笔记组件组件命名 组件名为多个单词 主要能够拼接文件的构建系统，就把每个组件单独分成文件 组件文件名单词开头始终大写 基础组件应该全部以特定的前缀开头（Base,App,V） 只拥有单个活跃实例的组件应该以The命名前缀，以示唯一性 与父组件紧耦合的组件应该以父组件名为前缀 SearchSidebar.vue SearchSidebarNavigation.vue 组件名应该
Vue.js 核心精要实战解析
GitChat
04-12 4660
课程简介 前端框架领域，Angular、React、Vue.js 三足鼎立，而 Vue.js 因其性能、通用、易用、体积、学习成本低等特点深受广大前端们的追捧，并吸引了一大批前端初学者。作为 Vue.js 的入门教程，此达人课共计16篇文章，涵盖了所需了解的核心基础知识，并通过小小电商网站的搭建，在实战过程中带大家快速掌握 Vue.js。 本课程共包含三大部分。第一部分（第1-2篇）带你初步认识 ...
前端vue框架 高频面试题
08-11
近年来，Vue.js作为一种轻量级的JavaScript框架迅速崛起，并在前端开发领域取得了广泛应用和认可。由于其简洁易学、高效灵活的特性，越来越多的企业开始采用Vue.js来构建他们的Web应用程序。 在准备Vue.js面试时，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值