vue2基础知识-1

已于 2022-11-02 21:50:45 修改
阅读量307 收藏
点赞数
分类专栏： vue知识 文章标签： vue.js javascript 前端
于 2022-10-31 15:38:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43484007/article/details/127604867
版权

CDN引入Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>哈哈哈哈</h2>
    <div id="app"></div>
    <!--CDN地址-->
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        // 使用VUE
        const app = Vue.createApp({
     
            template: `<h2>cdn引入vue</h2>`
        })
        // 挂在
        app.mount("#app")
    </script>
</body>
</html>

在这里插入图片描述

Vue体验

Mystache插值语法

插值语法:
data属性返回的对象是有添加到Vue的响应式系统中。当data中的数据发生改变时，对应的内容也会进行更新。
用法如下：

{ { data_name }}
{ { js表达式 }}
{ { 调用methods/computed属性中函数 }}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>哈哈哈哈</h2>
    <div id="app"></div>
    <!--CDN地址-->
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        // 使用VUE
        const app = Vue.createApp({
     
            // 插值语法{
     {data_name}}
            template: `<h2>{
      {title}}</h2>`,
            data: function () {
     
                return {
     
                    title: "hello world"
                }
            }
        })
        // 挂在
        app.mount("#app")
    </script>
</body>
</html>

在这里插入图片描述

列表数据

v-for 可以用来循环一个可迭代的数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>哈哈哈哈</h2>
    <div id="app"></div>
    <!--CDN地址-->
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        // 使用VUE
        const app = Vue.createApp({
     
            // v-for 循环一个可迭代的数据
            template: 
            `<ul>
                <li v-for='item in dataArr'>{
      {item}}</li>    
            </ul>`,
            data: function () {
     
                return {
     
                    dataArr: ['语文', '数学', '英语']
                }
            }
        })
        // 挂在
        app.mount("#app")
    </script>
</body>
</html>

在这里插入图片描述

计数器

methods: 里面写一些功能函数

方式一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>哈哈哈哈</h2>
    <div id="app"></div>
    <!--CDN地址-->
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        // 使用VUE
        const app = Vue.createApp({
     
            // v-for 循环一个可迭代的数据
            template: 
            `<h1>{
      {count}}</h1>
            <button @click="increase">+</button>
            <button @click="decrease">-</button>
            `,
            data: function () {
     
                return {
     
                    count: 0
                }
            },
            methods: {
     
                increase: function () {
      this.count++},
                decrease: function () {
      this.count--}
            },
        })
        // 挂在
        app.mount("#app")
    </script>
</body>
</html>

方式二：

template里面的数据就是用来替换

元素里面的值 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>哈哈哈哈
最低0.47元/天 解锁文章
不点外卖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【vue框架】vue2 知识点整理
lv_lv12138的博客
05-17 370
vue2知识点整理：不同版本的vue引入、插件、插槽、组件自定义事件、事件总线、样式使用、vuex、vue路由的使用...
Vue2.x
weixin_46801545的博客
01-04 218
vue2.x文档
前端学习笔记-vue2-组件
qq_43128157的博客
01-26 952
Vue2-组件组件模块与组件、模块化与组件化非单文件组件使用步骤1 定义组件2 注册组件3 使用组件VueComponentVue与VueComponent单文件组件 组件 模块与组件、模块化与组件化 模块 向外提供特定功能的js程序，一般为一个js文件 作用：复用js，简化js的编写，提高js运行效率 组件 用来实现局部（特定）功能效果的代码集合 作用：复用编码，简化项目编码，提高运行效率 模块化：当应用中的js都以模块来编写时，这个应用就是一个模块化的应用 组件化：当应用中的
Vue2.0框架中添加常量
w001yy的博客
06-29 1092
第一步：在src下面新建一个文件夹，命名const，然后新建一个const.js。在项目中遇到一些重复出现的常量，想着写到一个固定的地方可以随取随用；第三步：然后在main.js中引入const.js。第二步：在const.js中写入需要的常量。第四步：在 .vue 组件中使用。
Vue2 + ElementUI使用注意事项
南风知我意，吹梦到西洲
08-18 631
最近有个项目使用的框架是vue2 + ElementUI的，以此博客记录下碰到的坑点，避免下次踩坑。
vue2基础知识-2
weixin_43484007的博客
11-02 271
安装Vue CLI脚手架查看Vue CLI版本用Vue CLI创建项目。
vue基础知识-菜鸟入门
01-03
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面。...通过深入理解和熟练掌握这些Vue基础知识，开发者能够构建出功能丰富、性能优秀的Web应用。不断学习和实践，是提升Vue技能的关键。
vue基础知识总结--01
06-30
vue基础知识总结--01
可视化大屏 Vue3 版本vue-big-screen-plugin-master.zip
04-04
同时，熟悉JavaScript或TypeScript，以及一定的数据可视化基础知识也是必要的。对于初学者，可以参考官方文档和示例代码来快速上手。 在项目中集成`vue-big-screen-plugin`，首先需要安装插件，然后在Vue3应用中...
vue基础知识--axios合并请求和slot
10-15
主要介绍了vue中的axios和slot，文中代码非常详细，对大家的工作学习有所帮助，感兴趣的朋友可以参考下
vue3-element-admin:vue3-element-admin后台管理系统前端解决方案
04-17
- 熟悉 Vue 基础语法 Vue-Router-Next - 熟悉 vue-router@4 基本使用 Element-Plus - ui 基本使用 Mock.js - mockjs 基本语法 安装使用 # 克隆项目 git clone https://github.com/huzhushan/vue3-element-admin.git...
简单理解Vue的data为啥只能是函数
不定时分享最优质的网络技术与教程，满满的干货。
12-15 327
在学习vue的时候vue2只有在组件中严格要求data必须是一个函数，而在普通vue实例中，data可以是一个对象，但是在vue3出现后data必须一个函数，当时看着官方文档说的是好像是对象的引用问题，但是内部原理却不是很了解，今天通过一个简单的例子来说明为啥data必须是一个函数。
Vue2教程详解五（组件）
一只努力搬砖的打工妹纸
02-21 1766
组件是可复用的Vue实例，因此它们与new Vue接收相同的选项，如data、computed、watch、methods以及生命周期钩子等。仅有的例外是像el这样跟实例特有的选项。 组件是用来实现局部（特定）功能效果的代码(html/css/js)和资源(mp3/mp4/ttf/zip)的集合等 组件的优势：可复用代码，简化项目编码，提高运行效率; 组件的分类：单文件组件（一个文件中只包含有一个组件，大型项目中多用此方法）、非单文件组件（一个文件中包含有n个组件）；局...
Vue的var、let和const定义变量
优氪时
04-21 7227
开始学习Vue，接触到了ES6。以前使用的JavaScript，定义变量使用的var，现在Vue中还使用let 和 const来定义变量。 var var定义的变量可以修改，如果不初始化会输出undefined，不会报错 var a = 1; // var a;//不会报错 console.log('函数外var定义a:' + a);//可以输出a=1 function change(){ a = 4; console.log('函数内var定义a:' + a);//可以输出a=4 }
vue中的let声明,const声明
qq_44439022的博客
02-21 557
VUE 指令(一)
Arog的博客
12-31 579
mustache语法 可以是值，也可以是表达式,只能做用于标签之间的 eg:《h1》{{xxx}}《/h1》 {{XXXX}} {{site + ’ ’ + msg }} 计算 ：{{count *2 }} 插值语法 v-once 使用 v-once指令后值不会随着改变。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试</title> <scr
vue2重要知识点
m0_53328239的博客
10-05 419
router路由（router、routes、route区别 路由导航方式 路由守卫）vuex 组件化开发和模块化开发的区别
Django+vue自动化测试平台（28）-- ADB获取设备信息
最新发布
测试小老弟的博客
07-17 405
adb的全称为Android Debug Bridge，就是起到调试桥的作用。通过adb可以在Eclipse中通过DDMS来调试Android程序，说白了就是调试工具。adb的工作方式比较特殊，采用监听Socket TCP 5554等端口的方式让IDE和Qemu通讯，默认情况下adb会daemon相关的网络端口，所以当我们运行Eclipse时adb进程就会自动运行。
vuepress-theme-reco 安装
03-26
要安装 vuepress-theme-reco 主题，请按照以下步骤进行操作： 1. 首先，您需要安装 VuePress。如果您还没有安装，请按照 VuePress 官方文档进行安装。...如果您还不熟悉 VuePress，请先学习 VuePress 的基础知识。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值