Vue实战之入门基础

已于 2023-02-18 02:40:56 修改
阅读量503 收藏 5
点赞数
文章标签： vue vue.js
于 2021-07-28 07:16:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44950987/article/details/119051567
版权

文章目录

Vue 实战

一、Vue 引言

在这里插入图片描述

渐进式 JavaScript 框架 --摘自官网

渐进式

  • 易用：基于标准 HTML、CSS 和 JavaScript 构建，提供容易上手的 API 和一流的文档。
  • 高效：vue 体积小 20kB min+gzip 运行大小、超快虚拟 DOM、vue 底层深度优化
  • 灵活：vue 生态系统非常强大，vue 基础核心、vue 组件、vue router、vue cli、vuex，不断繁荣的生态系统

总结

  • Vue 是一个框架 一个javascript 框架 js框架 ===> 简化页面中 js 开发

  • Vue 的核心库只关注视图层

  • Bootstrap 是一个 css 框架 封装 css

  • Vue 的出现可以让我们通过操作很少的 DOM，甚至不需要操作页面中任何 DOM 元素，就很容易完成数据和视图绑定 ===> 双向绑定 MVVM

  • html + js ====> html + css + jQuery ====> vue (前后端分离) ====> 前端系统 + json + 后端系统

二、Vue 入门

1、下载 Vue.js

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

2、Vue 第一个入门应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列课程之基础入门</title>
</head>
<body>
<div id="app">
    <h1>{
  {msg}}</h1>
    <h1>{
  {username}}</h1>
    <h1>{
  {password}}</h1>
    <h4>{
  {username.toUpperCase()}}</h4>
    <h4>{
  {username.length}}</h4>
    <h4>{
  {username == "hello vue"}}</h4>
</div>
</body>
</html>
<!--引入核心js文件-->
<script src="js/vue.js"></script>
<!--书写vue的代码-->
<script>
    //创建一个vue实例
    var app = new Vue({
     
        el: "#app",//element：用来给Vue实例定义一个作用范围
        data: {
         //用来给Vue实例定义一些相关数据，自定义各种数据
            msg: "Vuejs欢迎你，期待你的加入",
            username: "Hello Vue！",
            content: "hello vue",
            password: "123456"
        }
    })
</script>

3、Vue 中 data 属性定义对象、数组和相关数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列课程之基础入门</title>
</head>
<body>
<div id="app">
    <h2>{
  {msg}}</h2>
    <h2>{
  {count}}</h2>
    <h2>{
  {user.id}} == {
  {user.name}} == {
  {user.age}} == {
  {user.salary}}</h2>
    <h2>{
  {schools[0]=='北京校区'}} == {
  {schools[1]}} == {
  {schools[2].length}}</h2>
    <h2>{
  {users[1].id}} == {
  {users[1].name}} == {
  {users[2].name}}</h2>
</div>
</body>
</html>
<!--引入核心js文件-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
     
        el: "#app",//指定vue实例的作用范围
        data: {
         //用来给vue实例定义一系列数据
            msg: "Hello Vue",
            count: 0,
            user: {
     id: 21, name: "小朱", age: 23, salary: 23000.23},
            schools: ["北京校区", "上海校区", "广州校区", "深圳校区"],
            users: [
                {
     id: 22, name: "小朱一", age: 23, salary: 23000.23},
                {
     id: 23, name: "小朱二", age: 24, salary: 24000.23},
                {
     id: 24, name: "小朱三", age: 25, salary: 25000.23}
            ]
        }
    })
</script>

总结

  1. 一个页面中只能存在一个 Vue 实例 不能创建多个Vue实例
  2. Vue实例（对象）中 el 属性：代表Vue的作用范围，日后在Vue的作用范围内都可以使用Vue的语法
  3. Vue实例（对象）中 data 属性：用来给Vue实例绑定一些相关数据，绑定的数据可以通过 { {data属性中变量名}} 直接获取data中变量名对应属性值
  4. 在使用 { { }} 进行获取data中数据时，可以在 { { }} 中书写表达式，运算符，调用相关方法，以及逻辑运算等
  5. el 属性中可以书写任意的CSS选择器 [jquery选择器] ，但是在使用Vue开发是推荐使用 id选择器
  6. 注意： el 属性值不能指定 body 或 html 标签

三、v-text 和 v-html

1、v-text

v-text：用来获取data属性中数据，将数据以文本的形式渲染到指定标签内部，类似于 javascript 中 innerText

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列课程之基础入门</title>
</head>
<body>
<div id="app">
    <h2><span>{
  {msg}}</span></h2>
    <h2><span v-text="msg"></span></h2>
</div>
</body>
</html>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
     
        el: "#app",
        data: {
     
            msg: "北京欢迎你"
        }
    })
</script>

总结

  • { { }} (插值表达式) 和 v-text 获取数据的区别在于：
  • 使用 v-text 取值会将标签中原有的数据覆盖 使用插值表达式的形式不会覆盖标签原有的数据
  • 使用 v-text 可以避免在网络环境较差的情况下出现插值闪烁

2、v-html

v-html：用来获取data中数据，将数据中含有的html标签先解析再渲染到指定标签的内部，类似于 javascript 中 innerHTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <div id="app">
      <h2><span>{
  {msg}} xxxx</span></h2>
      <h2><span v-text="msg">xxxxx</span></h2>
      <h2><span v-html="content">xxxxxx</span></h2>
    </div>
  </body>
</html>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app = new Vue({
     
    el: "#app",
    data: {
     
      msg: "北京欢迎您",
      content: "<a href=''>北京欢迎您</a>",
    },
  });
</script>

3、v-text 和 v-html 指令使用

<!DOCTYPE html>
<html lang="en" xmlns="">
<head>
    <meta charset="UTF-8">
    <title>vue系列课程之基础入门</title>
</head>
<body>
<div id="app">
    <h2>{
  {msg}}</h2>
    <h2>{
  {msg}} hello {
  {msg}} 小朱 {
  {msg}}</h2>

    <h2>小朱 <span v-text="msg"></span></h2>
    <h2 v-html="msg">{
  {msg}}</h2>

    <h2>{
  {content}}</h2>
    <h2 v-text="content"></h2>
    <h2 v-html="content"></h2>
    <!--
        v-text  和   v-html：作用：用来获取vue实例中data属性声明的数据
                            使用语法：在哪个标签上获取直接在哪个标签上定义 v-text v-html
                                     v-text="属性名"
        {
   {}} 取值 和 v-text 取值区别；
            1.{
   {}}取值不会将标签原始数据清空  使用v-text取值清空标签原始数据  {
   {}}===>这种方式取值 插值表达式
            2.{
   {}}取值存在插值闪烁   v-text v-html取值 不存在插值闪烁

            推荐: 两种方式都可以使用  {
   {}} 更加灵活

        v-text (innerText)、  v-html (innerHtml)区别：
             1.使用v-text取值:直接将获取数据渲染到指定标签中
             2.使用v-html取值:先将获取数据进行html标签解析,解析之后在渲染到指定标签中
    -->
</div>
</body>
</html>
<!--引入核心js文件-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
     
        el: "#app",
        data: {
     
            msg: "Hello Vue",
            content: "<a href='http://www.baidu.com/'>点我查看详细</a>"
        }
    })
</script>

四、Vue 中事件绑定（v-on）

1、Vue 中绑定事件基本语法的使用

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue系列课程之基础入门</title>
</head>
<body>
<div id="app">
    <h2>{
  {msg}}</h2>
	<h2>{
  {age}}</h2>
    <!--
        js中事件（event）：
            事件三要素：
                事件源：发生特定动作HTML标签
                事件：发生特定动作事件 单击事件 onclick ondblclick onmouseover onmouseout keyup  keydown .....
                监听器：事件处理程序 一般在js中是事件处理函数 function(){}

        v-on 指令：
             作用：用来给页面中标签绑定事件用的
             语法：在对应标签上使用 v-on:事件名="事件处理函数名"
    -->

    <button v-on:click="test">vue中事件绑定</button>
    <input type="button" value="点我改变年龄" v-on:click="changeAge">
</div>
</body>
</html>
<!--引入核心js文件-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
     
        el: "#app",//用来指定Vue实例作用范围
        data: {
         //用来给vue实例绑定一系列数据
            msg: "Hello Vue",
            age: 20,
        },
        methods: {
       //用来给vue实例绑定一系列函数 方法
            test: function () {
      //定义一个test函数
                alert("vue中test")
            },
            changeAge: function () {
     
                alert("点击触发"),
                console.log(this.age)//代表当前vue实例
                this.aa(); //代表调用方法
            },
            aa: function () {
     
				console.log("调用该方法");
            }
        }
    })
</script>

总结

  • 事件三要素

    • 事件源：发生事件dom元素
    • 事件：发生特定的动作 click…
    • 监听器：发生特定动作之后的事件处理程序 通常是 js 中函数
  1. 在vue中绑定事件是通过 v-on 指令来完成的 v-on:事件名 如：v-on:click
  2. 在 v-on:事件名 的赋值语句中是当前事件触发调用的函数名
  3. 在vue中事件的函数统一定义在Vue实例的methods属性中
  4. 在vue定义的事件中this指的就是当前的Vue实例,日后可以在事件中通过使用this获取Vue实例中相关数据调用methods中相关方法
  • v-on指令基本使用之在函数中获取vue实例本身this
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue系列课程之基础入门</title>
</head>
<body>
<div id="app">
    <h2>{
  {msg}}</h2>

    <!--双向绑定机制 MVVM   Model <===> ViewModel（监听器） <===>  View(视图)-->
    <h2>{
  {count}}</h2>
    <h2>{
  {count}}</h2>

    <button v-on:click="test" v-on:mouseover="test1">点我</button>
</div>
</body>
</html>
<!--引入核心js文件-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
     
        el: "#app", //用来定义数据  Model
        data: {
     
            msg: "Hello Vue",
            count: 23
        },
        methods: {
      //用来定义方法
            test: function () {
     
                //如果在vue定义方法中获取data中数据，注意：在自定义方法中可以直接使用this，this代表当前实例
                console.log(this);
                console.log(this.msg);
                console.log(this.count);
                //this.count = this.count+1;
                this.count++;
                //触发aa事件
                this.aa();
            },
            test1: function () {
     //鼠标经过的方法
                console.log("test1 mouseover")
            },
            aa: function () {
     
                console.log("aaa");
            }
        }
    })
</script>
  • v-on指令基本使用之在函数中传递参数
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta char
最低0.47元/天 解锁文章
9.冄2.7.號
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue快速入门（从入门到实战）
m0_70274530的博客
04-29 883
[](()1、插值表达式 [](()（1）花括号 格式： {{表达式}} 说明; 该表达式支持JS语法，可以调用js内置函数（必须有返回值) 表达式必须有返回结果。例如1+1，没有结果的表达式不允许使用，如: var a = 1+1; 可以直接获取Vue实例中定义的数据或函数 示例 HTML： i{name ) ) JS: var app =new vue({ el:“#app”, data:{ name:“Jack”" } }) [](()2、差值闪烁 使用0方式在网速较慢时会出现问题。在
Vue入门实战（Day01）
aurora
07-28 280
Vue入门实战之基础篇一、vue的简单介绍1.1vue是什么？1.2 vue使用前期准备？ 一、vue的简单介绍 1.1vue是什么？        Vue:全称vue.js；是前端JavaScript中的框架；是一套构建用户界面的渐进式框架，采用的是自低向上增量的开发设计；vue只关注于视图层；vue的目标就是使用尽可能简单的API来实现响应数据的绑定和组合的视图组件。 1.2 vue使用前期准备？    
Vue从零到实战基础篇
最新发布
大学生小郑的博客
07-19 1328
Vue从零到实战基础篇
vue入门到实战
weixin_44195615的博客
02-19 3359
一、准备工作 1.vscode的下载与安装教程：https://blog.csdn.net/weixin_44195615/article/details/113856706 2.推荐使用火狐浏览器，并安装插件Vue.js devtools （1）搜索：vue 点击Vue.js devtools 点击安装 3.在vscode安装Open in Browser插件 （1）点击拓展，输入Open in Browser，然后点击安装 二、快速上手 1.编写项目 <!DOCTYPE html>
Vue从入门到实战
weixin_30776545的博客
07-24 320
https://www.kancloud.cn/dataoedu/vue/327238 转载于:https://www.cnblogs.com/Jeely/p/11236587.html
Vue入门实战教程（一）—— Vue介绍
jcyka的专栏
04-10 888
一 vue介绍 1.声明式渲染 (1)文本插值 在D:\workspace_vue\vue_demo目录创建vue_introduce.html, 输入以下内容： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi...
vue2.0实战之基础入门（1）
08-31
"Vue2.0基础入门" 在本篇文章中，我们将详细介绍Vue 2.0的基础入门知识，包括Vue的定义、特点、数据双向绑定、ViewModel的概念模型、基本使用方法、构造器、指令、属性与方法等。 首先，让我们来了解什么是Vue？...
vue实战入门基础篇：从零开始仿门户网站实例
03-13
本教程“Vue实战入门基础篇：从零开始仿门户网站实例”旨在帮助初学者快速掌握Vue的核心概念，并通过实际项目演练提升技能。 在学习Vue时，首要的是理解其核心组件系统。Vue采用组件化开发模式，允许开发者将复杂...
Vue全家桶从基础入门到进阶项目实战第三篇中级进阶实战篇
06-20
本课程主要讲解vue实例常用属性和方法、自定义指令、自定义过滤器、过度、开发插件、组件及组件间的通信、使用axios发送http请求、使用Vue Router实现路由控制，使用webpack打包工具的用法、ES6的语法、webpack与...
[vue]最容易上手的Vue 2.0入门实战教程
05-10
[vue]最容易上手的Vue 2.0入门实战教程, 高清无加密。
Vue-入门到实战（三）
tlp604667633的博客
01-30 175
Vue.js - Day3 定义Vue组件 什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可； 组件化和模块化的不同： 模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一； 组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用； 全...
Vue-入门到实战（六）
tlp604667633的博客
01-30 274
Vue.js - day6 注意： 有时候使用npm i node-sass -D装不上，这时候，就必须使用 cnpm i node-sass -D 在普通页面中使用render函数渲染组件 &lt;div id="app"&gt; &lt;p&gt;444444&lt;/p&gt; &lt;/div&gt; &lt;script&gt; var login = { ...
最容易上手的Vue .入门实战教程
xuetu123com的博客
05-13 391
最容易上手的Vue .入门实战教程 第1章 课程简介 讲解课程安排，面象人群，以及对课程的项目做了效果演示。 第2章 Vue简介 对vue一些最基础的知识做了讲解：实例对象、vue组件以及vue的一些相关概念。 第3章 功能接口（1） 对文本渲染v-html、v-text、列表渲染 v-for 数组，对象，子组件；列表数据的同步更新方法；vue标签属性和条件渲染；事件绑定-内置事件绑定、自定义事件绑定；表单事件绑定；计算属性和数据监听等进行了讲解。 第4章 功能接口（2） 对组件之间通信；过渡动画：css实
vue入门实战
qq_39091837的博客
05-11 590
{{ rawHtml }} html： export default{ name: 'HelloWorld', data(){ return{ msg:"好天气，好晴朗", day:"6号", rawHtml:' 网址导航' } } }
Vue - 快速入门，这一套就够了！（Vue core + 案例 + 效果演示）
热门推荐
CYK_byte的博客
10-16 1万+
前置条件：掌握 HTML、CSS、JavaScript、AJAX.工具：VsCode.插件：Live Server（浏览器实时预览）Ps：建议都提前下载下来，没网的时候也能用.
Vue框架教程-从入门到项目实战
oemciemcier的博客
07-28 1万+
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如：vue-router：跳转，vue -resource：通信，vuex：管理)或既有项目整合...
Vue从入门到实战Day01
ltt159264的博客
05-08 892
概念：Vue是一个用于构建用户界面的渐进式 框架构建用户界面：基于数据动态渲染页面渐进式：循序渐进的学习框架：一套完整的项目解决方案，提升开发效率优点：大大提升开发效率（70%）缺点：需要理解记忆规则->官网Vue的两种使用方式场景：局部模块改造场景：整站开发。
Vue实战教程：从入门到精通
"VUE实战开发.pptx" 是一份详细讲解Vue.js开发的教程，涵盖了从基础到进阶的各种主题，旨在帮助学习者全面掌握Vue框架的实践应用。 本教程分为十个章节，深入浅出地介绍了Vue的核心概念和技术： 1. **Vue前端框架...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

9.冄2.7.號

你的鼓励将是我创作的巨大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值