Vue2.Hello World

步骤:

  1. 准备容器
  2. 引包(开发版本/生产版本)
  3. 创建实例new Vue()
  4. 添加配置项
    1. el指定挂载点
    2. data提供数据

准备容器

就是新建一个div标签

引包

vue2版本中文文档:https://v2.cn.vuejs.org/v2/guide/

尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它,跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件,然后通过如下方式引入 Vue:
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
或者:
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

我目前也是初学者,所以我导入开发环境版本。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

创建实例

先实现一个最基本的helloworld。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">{{ message }}
</div>
<script>const app=new Vue({//通过el配置选择器,指定vue管理的是哪个盒子el:'#app',//通过data提供数据data:{message:'hello world'}})
</script>

我写的div标签是在两个js脚本之间。
实际上,div只要放在最后一个会修改它的script脚本之前就可以。

插值表达式

作用:利用表达式进行插值,渲染到页面中
表达式:可以被求值的代码
语法:{{表达式}}
支持的是表达式,不是语句,比如iffor
不能在标签属性中使用插值表达式。

VSCode分栏显示

image.png
这需要安装扩展Live Preview
直接在扩展商店搜索即可。

使用的数据需要存在

如果使用了不存在数据,会报未定义的错误。
image.png

响应式数据

响应式:数据改变,视图会自动更新。
data中的数据会被添加到实例上:
访问数据,通过:实例名.属性名
修改数据,通过:实例名.属性名=新值

通过控制台命令修改

app.message
'hello world'
app.message="HelloWorld"
'HelloWorld'

image.png

Vue调试插件

这个软件可以直接在edge加载项中搜索。
如果是chrome,应用商店也有。
image.png
添加之后可以直接在Vue栏修改数据。
image.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/596807.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JS运行机制、Event Loop

1、JS运行机制 JS最大的特点就是单线程&#xff0c;所以他同一时间只能做一件事情。使单线程不阻塞&#xff0c;就是事件循环。 在JS当中分为两种任务&#xff1a; 同步任务&#xff1a;立即执行的任务&#xff0c;一般放在主线程中&#xff08;主执行栈&#xff09;。异步任…

git merge origin master 和 git merge origin/master 的区别

git merge origin master和git merge origin/master的区别 1. git checkout dev 2. git fetch origin master 3. git merge origin release 把 origin/master&#xff0c;heads/release merge到 heads/dev1. git checkout dev 2. git fetch origin master 3. git me…

53、实战 - 手写一个全连接算法

全连接算法在一定程度上和矩阵乘法算法等价,因此如果我们想实现一个全连接。的算法,只需要实现一个矩阵乘法就可以。。 矩阵乘法是线性代数运算,用于将两个矩阵相乘得到一个新的矩阵。要执行矩阵乘法,需要确保第一个矩阵的列数与第二个矩阵的行数相等。 比如第一个矩阵的…

Avalonia学习(十七)-CEF

今天开始继续Avalonia练习。 本节&#xff1a;CefNet 1.引入 CefNet.Avalonia.Eleven 2.项目引入 Program中加入 using Avalonia; using Avalonia.ReactiveUI; using Avalonia.Threading; using CefNet; using System; using System.IO; using System.Linq; using System…

webStorm打开终端Cannot open Local Terminal Failed to start [powershell.exe] in

今天webStorm打开终端显示 Cannot open Local Terminal Failed to start [powershell.exe] in D:\allproject\boosterStation 有关详细信息&#xff0c;请查看 IDE 日志(帮助 | 在 Explorer 中显示日志)。 解决方案&#xff1a; 打开设置&#xff08;如下图&#xff09;&a…

OEE如何为制造企业实施ISO50001提供支持

ISO50001是一项旨在帮助企业建立和实施能源管理体系的国际标准&#xff0c;以提高能源效率、降低能源消耗和减少环境影响。而设备OEE&#xff08;设备综合效率&#xff09;作为一个关键的生产效率指标&#xff0c;可以为企业实施ISO50001提供重要的支持。本文将介绍ISO50001能源…

关于iterator迭代器

1 迭代器&#xff1a;是一种机制&#xff0c;可以为各种不同的数据结构提供统一的循环和迭代规范&#xff1b;for of循环就 是基于迭代器规范。 class Iterator { constructor&#xff08;assemble&#xff09;{ self this se…

C语言快速入门——高级特性

C语言高级特性 C语言高级特性函数创建和使用函数全局变量和局部变量函数参数和返回递归调用 指针什么是指针指针与数组多级指针指针数组与数组指针指针函数与函数指针 结构体、联合体和枚举创建和使用结构体结构体数组和指针联合体枚举typedef关键字 预处理文件包含系统库介绍宏…

Mysql事务transaction简介

文章目录 什么是事务针对Mysql隔离级别读未提交读提交可重复读串行化 mysql中的数据结构索引数据结构mysql中的锁种类**共享锁和独占锁**表锁、行锁(记录锁、间隙锁、临键锁) spring中的事务事务特性 什么是事务 事务是一个不可分割的数据库操作序列&#xff0c;也是数据库并发…

RT-DETR算法优化改进:提出一种新的Shape IoU,更加关注边界框本身的形状和尺度,对小目标检测也很友好 | 2023.12.29收录

💡💡💡本文改进:一种新的Shape IoU方法,该方法可以通过关注边界框本身的形状和尺度来计算损失,解决边界盒的形状和规模等固有属性对边界盒回归的影响。 💡💡💡对小目标检测涨点明显,在VisDrone2019、PASCAL VOC均有涨点 RT-DETR魔术师专栏介绍: https://blo…

element中Table表格控件实现单选功能、多选功能、两种分页方式

目录 1、Table表格控件实现单选功能2、Table控件和Pagination控件实现多选和两种分页方式方法一&#xff1a;使用slice方法方法二&#xff1a;多次调用接口 1、Table表格控件实现单选功能 <template><div><!-- highlight-current-row 是否要高亮当前行 -->…

【http和https】 简单入门了解

我将从以下几个方面介绍HTTP和HTTPS协议&#xff0c;并通过示例来说明它们的工作原理。 一、HTTP协议 HTTP&#xff08;Hypertext Transfer Protocol&#xff09;是互联网上应用最广泛的一种网络协议。它是一种请求/响应协议&#xff0c;用于从服务器传输超文本到客户端。 H…

JDK10新特性之var 关键字:局部变量的类型推断

在 JDK 10 中&#xff0c;Java 引入了一个重要的新特性&#xff1a;var 关键字&#xff0c;用于局部变量的类型推断。这个特性是 Java 语言对类型推断能力的扩展&#xff0c;主要目的是减少编写明确类型声明的需要&#xff0c;从而使代码更加简洁易读。下面详细解释这个特性&am…

【Redux】自己动手实现redux-thunk

1. 前言 在原始的redux里面&#xff0c;action必须是plain object&#xff0c;且必须是同步。而我们经常使用到定时器&#xff0c;网络请求等异步操作&#xff0c;而redux-thunk就是为了解决异步动作的问题而出现的。 2. redux-thunk中间件实现源码 function createThunkMidd…

【Python机器学习】k近邻——k近邻分类

k-NN算法最简单的版本是只考虑一个最近邻&#xff0c;也就是想要预测的数据点最近的训练数据点&#xff0c;预测结果就是这个训练数据点的已知输出。 除了仅考虑最近邻&#xff0c;还可以考虑任意&#xff08;k个&#xff09;邻居&#xff0c;这也是k近邻算法名字的由来。在考…

1、docker常用技巧:docker数据位置更改

目录 &#x1f345;点击这里查看所有博文 随着自己工作的进行&#xff0c;接触到的技术栈也越来越多。给我一个很直观的感受就是&#xff0c;某一项技术/经验在刚开始接触的时候都记得很清楚。往往过了几个月都会忘记的差不多了&#xff0c;只有经常会用到的东西才有可能真正记…

【React】03-关于React state(状态) 的实践

背景 在学习React组件的过程中&#xff0c;发现state的运用很广泛&#xff0c;但对于它的使用及运行机制还是比较模凌两可的&#xff0c;故找了一些资料学习一下。 实践 React中的组件类型被分为了两类&#xff1a;函数组件&#xff0c;又被称为无状态组件&#xff1b;类组件…

1*2*3+3*4*5+...+99*100*101python,1加到100的程序算法python

大家好&#xff0c;本文将围绕python中123一直加到100程序怎么写展开说明&#xff0c;计算123456...100的值python是一个很多人都想弄明白的事情&#xff0c;想搞清楚计算1-23-45 … -100的值python需要先了解以下几个事情。 今天下午上python课的时候&#xff0c;老师留了一个…

python基础教程二(列表相关知识)

列表 列表定义及其相关内置函数 列表类似一个可以改变的数组&#xff0c;里边的类型不同于c&#xff0c;c要求类型必须相同&#xff0c;列表的元素任意类型都可以&#xff0c;最重要的是列表可以改变&#xff0c;和元组和字符串最大区别 list函数&#xff1a;将别的序列元素变…

佳能G3800彩色喷墨多功能一体打印机报5B00错误代码处理方法

5B00错误代码的含义 5B00错误代码是指佳能G3800打印机的“废墨仓已满”。这个废墨仓是打印机内部的一个部件&#xff0c;主要用于收集打印过程中产生的废墨。当废墨仓已满时&#xff0c;打印机就会报5B00错误代码。 佳能G3800彩色喷墨多功能一体打印机报5B00错误代码处理办法 …