VUE快速入门-基本语法

最新推荐文章于 2024-06-07 09:00:00 发布
最新推荐文章于 2024-06-07 09:00:00 发布
阅读量93 收藏
点赞数
分类专栏： VUE 文章标签： vue.js 前端 javascript

文章目录

一、 不使用构建工具

1. 导入vue.js的script 脚本文件

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

2. 在页面中声明一个将要被vue所控制的DOM区域，即MVVM中的view

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

3. 创建vm实例对象（vue实例对象）

<script>
          const { createApp } = Vue

          createApp({
         //指定数据源，即MVVM中的Model
          data() {
            return {
              message: 'Hello Vue2!'
            }
          }
        }).mount('#app') //指定当前vue实例要控制页面的那个区域
      </script>

4. 完整代码（跟上面写法不同，但是意思一样）

<!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>
    <!-- 1.导入vue的脚本文件 -->
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <!-- 2. 声明要被vue所控制的DOM区域 -->
    <div id="app">
        {{ message }}
    </div>
    <!-- 3. 创建vue的实例对象 -->
    <script>
          const hello ={
            //指定数据源，即MVVM中的Model
                data:function() {
                    return {
                            message: 'Hello Vue!'
                    }
                }
           }

           const app=Vue.createApp(hello);
           app.mount('#app') //指定当前vue实例要控制页面的那个区域
      </script>
</body>
</html>

二、内容渲染指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
        <p>姓名: {{ username }}</p>
        <p>性别: {{ gender }}</p>
        <p>{{ desc }}</p>

        <p v-html="desc"></p>
    </div>

    <script>
        const vm={
            data:function(){
                return {
                    username:'张阿三',
                    gender:'男',
                    desc:'<a href="https://www.baidu.com/">百度</a>',
                }
            }
        }
        const app=Vue.createApp(vm);
           app.mount('#app')
    </script>
</body>
</html>

三 、属性绑定指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
        <a :href="link">百度</a>
        <input type="text" :placeholder="inputValue">
        <img :src="imgSrc" :style="{width: w}" alt="">
    </div>

    <script>
        const vm={
            data:function(){
                return {
                    link:'https://www.baidu.com',
                    //文本框的占位符内容
                    inputValue:'请输入数据',
                    imgSrc: './image/demo.png',
                    w: '500px',
                }
            }
        }

        const app=Vue.createApp(vm);
           app.mount('#app')
    </script>
</body>
</html>

四、使用Javascript表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <!-- vue实例控制的DOM区域 -->
    <div id="app">
         <p>{{number+1}}</p>
         <p>{{ok ? 'True ':'False'}}</p>
         <p>{{message.split('').reverse().join('')}}</p>
         <p :id="'list-'+id">xxx</p>
         <p>{{user.name}}</p>

    </div>

    <script>
        const vm={
            data:function(){
                return {
                    number:11,
                    ok:true,
                    message: 'ABC',
                    id: 3,
                    user:{
                        name:'zs',
                    }
                }
            }
        }

        const app=Vue.createApp(vm);
           app.mount('#app')
    </script>
</body>
</html>

五、事件绑定指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <!-- vue实例控制的DOM区域 -->
    <div id="app">
        <h3>count的值{{count}}</h3>
        <button v-on:click="addCount">+1</button>
        <button @click="count+=1">+1</button>
    </div>

    <script>
        const vm={
            data:function(){
                return {
                    count:0,
                }
            },

            methods:{
                //点击按钮，让count自增+1
                addCount(){
                    this.count+=1
                },
            }
        }

        const app=Vue.createApp(vm);
           app.mount('#app')
    </script>
</body>
</html>

六、 条件渲染指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <!-- vue实例控制的DOM区域 -->
    <div id="app">
        
        <button @click="flag=!flag">Toggle Flag</button>

        <!-- 如果flag为false，标签不会被创建 -->
        <p v-if="flag">请求成功--- 被v-if控制</p>

        <!-- 如果flag为false，标签会被创建 ，通过css样式来改变，频繁被切换使用这个-->
        <p v-show="flag">请求成功--- 被v-show控制</p>
    </div>

    <script>
        const vm={
            data:function(){
                return {
                    flag:false,
                }
            },

            methods:{
                //点击按钮，让count自增+1
                addCount(){
                    this.count+=1
                },
            }
        }

        const app=Vue.createApp(vm);
           app.mount('#app')
    </script>
</body>
</html>

七、 v-else和v-else-if指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <!-- vue实例控制的DOM区域 -->
    <div id="app">
        
        <p v-if="num>0.5">随机数>0.5</p>
        <p v-else>随机数<=0.5</p>
        <hr/>

        <p v-if="tyep=='A'">优秀</p>
        <p v-else-if="tyep=='B'">良好</p>
        <p v-else-if="tyep=='C'">一般</p>
        <p v-else>极差</p>

        
        <div  v-show="a">
            测试
        </div>
        <button @click="a=!a">点击</button>
        
    </div>

    <script>
        const vm={
            data:function(){
                return {
                    a:false,
                    num:Math.random(),
                    tyep:'B'
                }
            },

        }

        const app=Vue.createApp(vm);
           app.mount('#app')
    </script>
</body>
</html>

八、列表渲染指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <!-- vue实例控制的DOM区域 -->
    <div id="app">
        
        <ul>
            <li v-for="(user,i) in userList ">索引是:{{i}}，姓名是:{{user.name}}</li>
        </ul>
       
    </div>

    <script>
        const vm={
            data:function(){
                return {
                    userList:[
                        { id: 1,name:'zhangsansan'},
                        { id: 2,name:'lisi'},
                        { id: 3,name:'wangwu'}
                    ]
                }
            },

        }

        const app=Vue.createApp(vm);
           app.mount('#app')
    </script>
</body>
</html>

九、 v-for中的key

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <!-- vue实例控制的DOM区域 -->
    <div id="app">
        
       <!-- 添加用户区域 -->
       <div>
            <!-- v-model进行双向绑定，:value进行单向绑定 -->
            <input type="text" v-model="name">
            <button @click="addNewUser">添加</button>
       </div>
       
       <!-- 用户列表区域 -->
       <ul>
        <!--  :key="user.id"不使用这个会导致选择的记录改变 -->
        <li v-for="(user,index) in userList " :key="user.id">
            <input type="checkbox" >
            姓名是:{{user.name}}
        </li>
    </ul>
   
    </div>

    <script>
        const vm={
            data:function(){
                return {
                    //用户列表
                    userList:[
                        { id: 1,name:'zhangsansan'},
                        { id: 2,name:'lisi'}
                    ],
                    //输入的用户名
                    name:'',
                    //下一个可用的id
                    nextId:3
                }
            },
            
            methods:{
                //点击了添加按钮
                addNewUser(){
                    this.userList.unshift({ id: this.nextId,name:this.name})
                    this.name=''
                    this.nextId++
                },
            }

        }

        const app=Vue.createApp(vm);
           app.mount('#app')
    </script>
</body>
</html>
qq_39093474
关注
专栏目录
在非构建工具下使用vue
键盘跳动的旋律
03-06 1266
通常项目开发进程中，使用工程化配置下开发项目，但在少数老项目下如jquery项目下也想使用vue.js，可以渐进式地来使用。
01｜编译和非编译模式：离开Vue工具，你还知道怎么用Vue3吗？
sucaiwa的博客
02-28 1791
通过这节课的内容，你能了解到Vue.js 3的编译和非编译模式区别，更重要的是能知道Vue.js 3脱离了构建工具如何进行开发和在浏览器中运行。这些都是在后续学习和深入实践Vue.js 3项目必不可少的前置知识储备。我们在使用一门技术框架时候，不仅需要熟悉官方提供的通用开发模式，也需要在离开了通用开发模式，还能掌握其他的方式来无缝衔接使用这个技术框架。这节课里的非编译模式就是脱离了官方推荐的编译开发模式进行的，在遇到Vue.js 3编译受限的时候，就可以快速选择这个非编译模式替代方案。
【vue3】01. 跟着官网学习vue3
qq_17335549的博客
08-27 1204
跟着官网学习vue
Vue传统开发方式（不使用脚手架工具）
u014176695的博客
04-30 2619
使用传统方法进行Vue开发
不使用构建工具，DOM内模版解析Vue3+element-plus示例
weixin_40329396的博客
05-07 424
【代码】不使用构建工具，DOM内模版解析Vue3+element-plus示例。
不借助vue-cli，自行构建一个vue项目
weixin_30415113的博客
11-01 382
前言： 　　对于刚刚接触vue的同学来说，直接用官方的构建工具vue-cli来生成一个项目结构会存在一些疑惑，比如: .vue组件 为什么可以写成三段式（tempalte、script、style）? 整个项目是怎样组织运行起来的，main.js - App.vue - 各个组件 之间是怎么相互引用的？ 　　为了让更多同学理解，我们不借助官方构建工具，自行构建一个类似于官方的项目结构，去体...
vue-element-admin. vue入门教程源码
05-08
Element UI 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了一系列丰富的、易于使用的组件，以帮助快速构建美观的后台界面。 在“vue-element-admin”项目中，你可以学习到以下关键知识点： ...
Vue快速入门 - 黑马 (附音乐播放器源码)
weixin_51909882的博客
01-21 1207
黑马程序员Vue快速入门学习笔记，附部分源码
nuxt.js框架使用vue-waterfall-easy插件如何引入--语法引用
weixin_45041261的博客
05-31 1608
实话：我之前完全不知道vue-waterfall-easy这个插件，当我看到需求瀑布流+无限滚动的时候，我脑子里想的还是flex布局。。。 我们大佬说“你自己写的瀑布流+无限滚动肯定会出问题的”，然后我就果断放弃了（毕竟我是一个还没有入门的菜鸡），大佬给我普及了这个插件以及在vue中如何使用，让我自己找一找在nuxt里面的引入方法（这个任务，我也很果断，20分钟没有头绪，直接回头找大佬，哈哈哈哈哈哈） 所以在这里再总结一下引入的方法（使用方法我也是一知半解，探索中，所以不敢胡乱BB）。 这次在nuxt的引入
vue3课件-入门.zip
12-30
本课件旨在帮助开发者快速入门Vue3，了解其新特性和最佳实践。 在 "00-vue3入门.md" 文件中，你将学习到以下Vue3的核心知识点： 1. **Composition API**：Vue3 引入了Composition API，这是一种更加灵活的组件定义...
Vue和Vue-Element-Admin（十）：HTML和CSS快速学习笔记
叶子叶来
05-11 804
目录 html标签分类 网页布局 盒子模型 浮动 定位 css标签选择 flex布局 transform转换 Vue开发tips less和scss VScode常用插件 后端语言框架很多，Java适合企业级应用（规范且稳定），Go适合高并发场景（比如云上产品），Python框架（bottle，tornado，django）简单且快速，也天然适合数据分析场景，PHP适合快速建站，前端变化小，所见即所得，因此抽空记录下学习笔记。 如果把页面理解成一台运转的机器，html使用标签（..
从0 搭建vue3+webpack5项目，不使用cli脚手架
dum_plings的博客
04-24 2298
从0搭建vue3+webpack5项目 一、初始化 1、先创建一个空文件夹 demo（任意命名） 在当面文件夹下打开cmd 命令框 输入 npm init -y 初始化项目生成package.json 文件 在后面加上 -y 能够让我们省去填写信息的步骤。 如果文件夹里面出现了package.json 文件那么说明你成功初始化了项目。 二、安装依赖 在cmd 命令框中 输入 1、安装webpack 注意这里是在本地安装，而不是全局安装。 npm install webpack webpack-cli -
为什么vue3去掉了Vue构造函数?
ing的博客
05-13 273
但是vue2是通过Vue构造函数引入的插件，这样一来所有的实例都具备这些插件，不利于隔离不同应用。3. vue2没有把组件和应用单独分开，一个构造函数即是vue组件又是应用。vue3把两个概念分开了，通过createApp创建的应用，他内部提供的方法是针对整个应用，而不是特殊的组件。2. 不利于tree shaking, vue2构造函数集成了太多功能，不利于tree shaking,vue3把这些功能当作普通函数导出，充分利用tree shaking优化打包体积。
构建Vue3项目的几种方式，如何简化setup写法
最新发布
zwl2220943286的博客
06-07 258
构建Vue3项目的几种方式，如何简化setup写法
建立无需build的vue单页面应用SPA框架
華華的博客
06-19 515
业务组件不可能写的时候全部知道（根据用户权限决定），也不可能一次性全部加载（影响首屏效率），应该是需要的时候，才从服务器加载。vue为此提供了异步组件，可以用Vue.defineAsyncComponent来创建。（1）业务组件用什么文件格式？本来js的初心就是“即改即用”，我不太喜欢ts,jsx这些需要build的东西。如果用ejs做SPA，js代码控制好全局变量冲突不算严重，但dom元素用jquery操作会遇到很多的命名冲突。页面划分为上中下三层，中间划分为左右两部分，左边是功能树，右边是功能区。
前端第22天
来地球玩啊的博客
05-09 267
vue的基本用法 使用步骤 导入vue.jsscript脚本文件 在页面中声明一个将要被vue所控制的DOM区域 创建一个vm实例对象（vue实例对象） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" c
不使用vue-cli，一步一步构建Vue项目（小白入门）
热门推荐
前端很忙
03-31 1万+
不使用vue-cli构建项目，vue项目，初学vue项目，简单vue项目
Vue2不使用webapck等打包工具异步加载
CGod
12-26 793
原因 vue2的学习成本低，如果团队的技术能力不是特别强的话用vue还是可以很快上手的，现在前端各种webapck/gulp/cli等等的工具看着挺懵逼的，因为不是专业的纯前端开发，搞这些玩意儿会很费劲，就是用上了还得考虑一下团队成员是否能搞定，最近有个小项目因为是要放在java项目中去的，去集成webpack就呵呵呵了 我简单的搞了一个vue2的框架，没有全家桶，还有requirejs用的不多
不借助 vue-cli 工具自行搭建 vue 项目
qq_37236395的博客
06-16 2388
一、初始化项目 1.1、新建 package.json npm init 1.2、安装依赖 npm 安装 vue、vue-router、vue-loader、webpack、webpack-cli，这些只是开发环境所需要的依赖，使用 --save-dev 安装到开发环境（见 package.json devDependencies）下： npm install vue vue-router vue-loader webpack webpack-cli --save-dev webpack 4.x 已经把
Vue入门：掌握基本语法与常用指令详解
本文将深入讲解Vue.js的基本语法和常用指令，帮助读者快速理解和上手。 首先，让我们了解一下Vue的核心概念。Vue.js作为当前最热门的前端框架之一，与React和Angular.js并列为前端三大主流框架。Vue特别强调视图层...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值