前端学习——VUE的基本应用

最新推荐文章于 2022-07-08 09:00:16 发布
最新推荐文章于 2022-07-08 09:00:16 发布
阅读量312 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Wby_Nju/article/details/104158921
版权

文章目录

1. 第一个vue应用——文本插值

{{ message }}最常见的Vue.js文本插值的操作

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

通过new Vue(参数)的方式获得一个Vue.js的应用对象。

1.1 new Vue()中的参数

需要一个对象作为参数：

{
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
}

该对象包含两个重要的属性

  1. el——元素
    使用id选择器的方式，使之与视图中的元素对应起来
  2. data——保存数据
    视图中使用了哪些变量，就需要在data中声明并初始化这些变量

1.2 CSS id选择器

CSS ID选择器使用说明

<html>
<head>
<style type="text/css">
#intro {font-weight:bold;}
</style>
</head>

<body>
<p id="intro">This is a paragraph of introduction.</p>

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

<p>...</p>
</body>
</html>

在这里插入图片描述

2. v-bind 绑定元素属性

你看到的 v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。
比如：除了文本插值外，html标签的属性也是可以绑定的。示例如下：

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

在这里插入图片描述

2.1 span标签

根据文档，可以知道span标签被用来组合文档中的行内元素，如下示例：

  1. #introcss-id选择器
  2. 用span来使同一行的文字内容产生不同的效果。且可以根据上一级的class、id设定不同的效果，如：
    p.tip span{color:#f10c0cf3}在这里插入图片描述
  3. title属性，悬停提示内容
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">

            #intro {background-color: rgb(153, 236, 18)}
            span {font-weight:bold}
            
            p.tip span{color:#f10c0cf3}
            
            </style>
    </head>
    <body>
        
        <div>
            div：
            <span>span</span>
            <p id="intro" class="tip">p-id:intro,class:tip
            <span title="绑定的提示信息">
              span:悬停查看
            </span>
            </p>
          </div>
        </script>
    </body>
</html>

2.2 vue绑定属性

通过v-bind:attribute来绑定属性
示例：

	<span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>

在这里插入图片描述

3. 条件与循环

指令有：v-前缀，例如： v-bind。而vue控制条件与循环也非常简单，通过v-if、v-else来执行条件语句

3.1 条件语句 v-if

v-if表达式，只有当条件为真的时候，才进行渲染。
v-if、v-else、v-else-if

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>

  <div v-if="Math.random > 0.5">
    " Math.random > 0.5 "
  </div>
  <div v-else>
    " Math.random <= 0.5 "
  </div>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
	seen: true
  }
});
app3.seen = false

显示：
在这里插入图片描述

3.2 循环语句

调用方法v-for="x in list"，

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

显示内容：
在这里插入图片描述

4. v-on事件响应与v-model数据绑定

4.1 v-on 事件监听器

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

reserve()方法：颠倒数组中元素的顺序
join() 方法：把数组中的所有元素放入一个字符串。
在这里插入图片描述

4.2 v-model指令

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

在这里插入图片描述

5. 组件化应用构建

5.1 无变化的组件模板

通过Vue.component(·name·,{template:xxx})来声明
引用组件：通过name来应用组件
组件样式：component中的效果

    Vue.component('todo-item', {
      template: '<li>这是个待办项</li>'
    })

    var app7 = new Vue({
      el: '#app-7',
      data: {
        groceryList: [
          { id: 0, text: '蔬菜' },
          { id: 1, text: '奶酪' },
          { id: 2, text: '随便其它什么人吃的东西' }
        ]
      }
    })

效果一：

  <div id="app-7">
    <ol>
      <todo-item></todo-item>
    </ol>
  </div>

在这里插入图片描述
效果二：

    <ol>
      <todo-item v-for="item in groceryList"></todo-item>
    </ol>
  </div>

在这里插入图片描述

5.2 变化的组件模板

在组件章节中做详细说明：
可见：
若要使用动态的数据，组件Vue.component中通过props:element来声明。
而它声明的对象是通过v-bind:element="xxx"来绑定的。
同时必须要一个v-bind:key="nn"来唯一标示

  <div id="app-7">
    <ol>
      <!--
        现在我们为每个 todo-item 提供 todo 对象。todo 对象是变量，即其内容可以是动态的。我们也需要为每个组件提供一个“key”，稍后再作详细解释。
      -->
      <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
    </ol>
  </div>

    Vue.component('todo-item', {
      props: ['todo'],
      template: '<li>{{ todo.text }}</li>'
    })

    var app7 = new Vue({
      el: '#app-7',
      data: {
        groceryList: [
          { id: 0, text: '蔬菜' },
          { id: 1, text: '奶酪' },
          { id: 2, text: '随便其它什么人吃的东西' }
        ]
      }
    })

在这里插入图片描述

疑惑

什么是“渲染进DOM”

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

程序语言的编译过程

比如javascript的内置函数new Date()函数是怎么被调用的？需要去参考CSAPP
当前认为：在程序编译时，编译器识别语言提前设定的函数，然后将这些函数内联到程序中使用。
类似问题：java中的System.out.println是如何调用的呢？

public class HelloWorld {
    public static void main(String []args) {
       System.out.println("Hello World!");
    }
}

DOM操作

什么是DOM和DOM操作
示例4中，

  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }

在 reverseMessage 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。

Wby_Nju
关注
专栏目录
v u e
weixin_45701868的博客
05-18 1096
目录 1.理解MVVM思想 2.vue.js介绍 3.vue起步 4.模板语法 4.1 数据绑定的方式 单向绑定 双向绑定 4.2 其他指令 5.常用指令 5.1 v-bind v-bind属性数据绑定代码： v-bind属性操作class和style的实例代码 5.2 v-if、v-elseif、v-else 5.3 v-for 5.4 v-on 6.计算属性 get和set方法 7.监听属性 7.1 监听属性watch 7.2 理解handler方法及immedi
【前端词典】学习 Vue 源码的必要知识储备
weixin_33736649的博客
05-30 323
前言 我最近在写 Vue 进阶的内容。在这个过程中，有些人问我看 Vue 源码需要有哪些准备吗？所以也就有了这篇计划之外的文章。 当你想学习 Vue 源码的时候，需要有扎实的 JavaScript 基础，下面罗列的只是其中的一部分比较具有代表性的知识点。如果你还不具备 JavaScript 基础的话，建议不要急着看 Vue 源码，这样你会很容易放弃的。 我会从以下 7 点来展开： Flow ...
vue是什么软件_vue学习笔记—01引子
weixin_39670857的博客
12-01 418
程序员作为一个当下非常热门的职业，它的特点是，薪资下限高，上限也不低，并且社会地位良好。同时，程序员是互联网时代的重要工种，为这个时代舔砖加瓦，紧跟时代潮流。但是随着计算机技术的发展，程序员的分类也越来越细分，粗略想一想十几二十种还是有的，往细了想，几十种也不夸张。但是对于新入门的程序员来说，怎么选择自己的技术路径就是一个值得思考的问题了，毕竟现在计算机技术的内容非常多，人的精力是有限的，你很难什...
初学Vue，Vue的第一个程序
m0_37755267的博客
07-20 549
初学Vue，Vue的第一个程序 Vue是一个渐进式框架，相对于之前的web框架来讲，Vue与他们最大的区别在于Vue是操作数据的，而之前的一些web框架都是对DOM节点进行操作，具体描述可参看 https://blog.csdn.net/wangjie962311/article/details/72829029 初学Vue，Vue的第一个程序 一、vue.js的下载 二、Vue之挂载点...
VUE [入门篇]
LKS_010620的博客
07-08 1422
1、 v-if 、v-else、v-else-if、v-show 2、v-for 3、v-text 、v-html 4、v-on 5、v-model 6、v-bind 7、v-pre、v-cloak、v-once
前端经典——vue-三级联动demo.rar
11-29
在这个"前端经典——vue-三级联动demo"中，我们将深入探讨如何在Vue.js中实现一个三级联动的功能，这是一种常见的数据筛选和交互设计，常见于如地区选择、商品分类等场景。 首先，三级联动的基本概念是指三个层级的...
前端经典——vue实现穿梭框demo.rar
11-29
"前端经典——vue实现穿梭框demo"这个项目是基于Vue.js的一个示例，旨在展示如何利用Vue来构建一个功能完备的穿梭框组件。穿梭框，又称为选择框或数据迁移框，通常用于在两个列表之间移动数据，常用于权限设置、角色...
前端经典——vue实现登录页面开屏广告+校验demo.rar
11-29
在本项目中，“前端经典——vue实现登录页面开屏广告+校验demo”是一个使用Vue.js框架构建的示例应用，旨在展示如何在前端开发中创建一个包含登录页面、开屏广告以及用户输入校验功能的应用。Vue.js是当前非常流行的...
文章：前端框架——Vue中所需要的静态资源.rar
12-23
在“文章：前端框架——Vue中所需要的静态资源.rar”这个压缩包中，很可能是为了配合介绍Vue.js开发时所需的静态资源，包括但不限于HTML模板、CSS样式文件、JavaScript代码、图片以及其他辅助开发的工具或库。...
前端经典——vue商城数据动态添加删除demo.rar
11-29
这个“前端经典——vue商城数据动态添加删除demo”旨在通过一个实际的电商应用场景，帮助开发者理解如何在Vue项目中实现数据的动态添加与删除功能。 首先，我们来详细探讨Vue的核心概念——数据绑定。Vue采用MVVM...
用vue怎么传参
weixin_48047636的博客
05-18 669
事件传参 <body> <div id="a"> <h1>选择你喜欢的颜色:{{color}}</h1> <button @click="c">red</button> <button @click="c">green</button> <button @click="c">blue</button>
Vue简介
weixin_43949154的博客
02-01 510
文章目录Vuevue的入门vue的生命周期介绍axios的ajax异步请求综合案例(完成用户的查询与修改操作)后台(前提是完成配置文件):前台 Vue 首先我下载了一个vue.js，然后用的软件是Webstrom开发。而外用vscode也可以但是需要去cmd配置环境变量我没有使用(就是懒)，还有另一个可以用IDEA开发，这个本人试过但是并没有必要毕竟IDEA用它写后台写js练习有点小题大做了。 ...
vue实例化template参数的介绍
u013594477的专栏
12-05 3169
经常发现这样的代码在一些实例中： new Vue({ el:&quot;#app&quot;, data:{ message:&quot;message1 hello!&quot; }, components:{ App:{template:&quot;&amp;lt;div&amp;gt;This is template!&amp;lt;/div&
VUE 实例化 template 参数的理解 以及3种用法
zhangjieshuaige的专栏
11-01 2万+
今天看了VUE默认实例化的这段代码： new Vue({   el: '#app',   components:{App},   template: '&lt;App/&gt;' })   首先el这样的参数意义比较明显，就是要被替换的index.html中的元素 template网上查了很久，都说是用&lt;app&gt;&lt;/app&gt;替换index.html里面的&l...
Vue实例的对象参数options的几个常用选项
Yo,的博客
08-19 2万+
一.新建一个Vue实例可以有下列两种方式： 1.new一个实例 var app= new Vue({ el:'#todo-app', // 挂载元素 data:{ // 在.vue组件中data是一个函数，要写成data () {}这种方式 items:['item 1','item 2','item 3'], todo:'' }, methods:{ // ...
Vue--基础模板语法以及计算属性
博客
11-17 1万+
属性和方法 每个Vue实例会代理其data对象里所有的对象 var app = new Vue({ data: { message : '' } })也就是说，可以直接通过:app.message = 'xxx'来改变data中出现的属性， 从而引发视图的变化。 2. 注意只有这些被代理的属性是响应的。 如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
Vue—new Vue()
预立数据科技
10-10 1万+
1.newVue()创建一个新的Vue实例 2.el挂在原色 el绑定的元素内，都是Vue的作用范围 3.data数据对象 当一个Vue实例被创建时，它将data对象中的所有的属性加入到Vue的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。 <html> <head> <script src="...
VUE学习（一、软件的安装）
热门推荐
ourLang
08-17 3万+
一、vscode安装 https://www.jianshu.com/p/cab79d188e42 二、nodejs安装 https://blog.csdn.net/qq_41402200/article/details/84785353 三、vscode设置成中文 https://blog.csdn.net/qq_30068487/article/details/82589347 ...
vue实例中中data属性三种写法
weixin_30810239的博客
04-23 655
<script type="text/javascript"> var app=new Vue({ el:'#app', data:{ book: "vue.js" } })</script> <script type="text/javascript">var app=new ...
网易云音乐PC版仿制项目——VUE实战源码教程
该实战项目的目的在于提供一个高含金量的学习案例，让学习者通过分析和理解项目代码，加深对VUE框架的理解，并且能够将理论知识应用于实践，以达到提升前端开发技能的目的。 ### 技术栈及实现功能 #### 技术栈 - ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值