Vue的快速入门

最新推荐文章于 2023-03-03 18:00:30 发布
最新推荐文章于 2023-03-03 18:00:30 发布
阅读量89 收藏
点赞数
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40695731/article/details/106625808
版权

Vue简单入门

01-vue入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">
       <!-- 使用插值表达式，获取data定义值 -->
       {{message}}
    </div>

<script src="vue.min.js"></script>
<script>
    //创建一个Vue对象
    new Vue({
        el:'#app',//绑定vue作用的范围
        data:{//定义页面中显示的数据模型
            message:'Hello,Vue!'
        }
    })
</script>
</body>
</html>

02-测试代码片段

文件=>首选项=>用户代码片段=>新建全局代码片段:vue-html.code-snippets

下面是文件的内容：

{
	"vue htm": {
		
				"scope": "html",
				"prefix": "vuehtml",		
				"body": [		
					"<!DOCTYPE html>",		
					"<html lang=\"en\">",		
					"",		
					"<head>",		
					"    <meta charset=\"UTF-8\">",		
					"    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",		
					"    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
		
					"    <title>Document</title>",
		
					"</head>",
					"",
					"<body>",
					"    <div id=\"app\">",
		
					"",
		
					"    </div>",
		
					"    <script src=\"vue.min.js\"></script>",
		
					"    <script>",
		
					"        new Vue({",
		
					"            el: '#app',",
		
					"            data: {",
		
					"                $1",
		
					"            }",
		
					"        })",
		
				    "    </script>",
		
					"</body>",
		
					"",		
				"</html>",		
				],
				"description": "my vue template in html"
		
			}
}

新建html，在里面输入vuehtm按下回车则可以

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">

    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                
            }
        })
    </script>
</body>

</html>

03-指令v-bind

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">

        <!-- v-bind指令
           单向数据绑定
           这个指令一般在标签属性里面，获取值-->
        <h1 v-bind:title="message">
            {{content}}
        </h1>
        <!-- 简写方式 -->
        <h2 :title="message">
            {{content}}
        </h2>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                content: '我是标题',
                message: '页面加载于'+ new Date().toLocaleString()//获取当前时间
            }
        })
    </script>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2jRhgWC4-1591611071500)(Vue.assets/%ZUQJT}V3{5WXM%X0W{}}H.png)]

04-指令v-model

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 单向绑定 -->
        <input type="text" v-bind:value="searchMap.keyword"></input>
        <!-- 双向绑定 -->
        <input type="text" v-model:value="searchMap.keyword"></input>

        <p>{{searchMap.keyword}}</p>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                searchMap:{
                    keyword:'sheepc' 
                }
            }
        })
    </script>
</body>

</html>

05-vue事件操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- vue绑定事件 -->
       <button v-on:click="search()">查询</button>
         <!-- vue绑定事件简写方式 ，不加括号也行，一般加上-->
         <button @click="search">查询1</button>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                searchMap:{
                    keyWord:'sheepc'
                },
                //查询结构
                result: {}

                },
                methods:{//定义多个方法
                    search(){
                        console.log('search.....')
                    },
                    f1(){
                        console.log('f1.....')
                    }
                }
        })
    </script>
</body>

</html>

06-vue修饰符

v-on:submit.prevent="onSubmit"让提交表单走自己写的方法onSubmit

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
       <form action="save" v-on:submit.prevent="onSubmit">
           <input type="text" id="name" v-model="user.username"></input>
           <button type="submit">保存</button>
       </form>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                user:{}
            },
            methods:{
                onSubmit(){
                     if(this.user.username){
                         console.log('提交表单')
                     }else{
                         alert('请输入用户名')
                     }
                }
            }
        })
    </script>
</body>

</html>

07-vue指令v-if

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
         <input type="checkbox" v-model="ok">是否同意</input>
         <!-- 选中显示 -->
         <h1 v-if="ok">可以</h1>
        <!-- 没选中显示 -->
         <h1 v-else>不可以</h1>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                ok:false
            }
        })
    </script>
</body>

</html>

08-vue指令v-for

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
       <ul>
           <!-- n是遍历出来的对象 10是要遍历的对象 -->
           <li v-for="n in 10">{{n}}</li>
       </ul>
       <ol>
           <li v-for="(n,index) in 10">{{n}}---{{index}}</li>
       </ol>

       <hr/>
       <table>
           <tr v-for="user in userList">
               <td>{{user.id}}</td>
               <td>{{user.usename}}</td>
               <td>{{user.age}}</td>
           </tr>
       </table>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                userList:[
                    {id:1,usename:'helen',age:18},
                    {id:2,usename:'peter',age:19},
                    {id:3,usename:'andy',age:20}
                ]
            }
        })
    </script>
</body>

</html>

在这里插入图片描述在这里插入图片描述

09-vue组件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
         <Navbar></Navbar>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            //定义vue使用的组件
            components:{
                //组件的名字
                'Navbar':{
                    //组件的内容
                    template:'<ul><li>首页</li><li>学员管理</li></li></ul>'
                }
            }
        })
    </script>
</body>

</html>

10-vue组件全局组件

src=“components/Navbar.js”>在components文件夹下创建Navbar.js

Vue.component('Navbar',{
    template:'<ul><li>首页</li><li>学员管理</li></li></ul>'
})

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
            <Navbar></Navbar>
    </div>
    <script src="vue.min.js"></script>
    <script src="components/Navbar.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                
            }
        })
    </script>
</body>

</html>

11-vue生命周期

created()
//页面渲染之前执行

mounted
//页面渲染之后执行

debugger

​ //断点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
          hhhhh
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                
            },
            created(){//断点
                debugger
               //页面渲染之前执行
               console.log('created....')
            },
            mounted(){
                debugger
               //页面渲染之后执行
               console.log('mounted....')
            }
        })
    </script>
</body>

</html>

12-vue路由

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>Hello App!</h1>
         <p>
             <!--使用router-link组件来导航  -->
             <!-- 通过传入to属性指定链接 -->
             <!-- <router-link>默认会被渲染成一个<a>标签 -->
             <router-link to="/">首页</router-link>
             <router-link to="/student">会员管理</router-link>
             <router-link to="/teacher">讲师管理</router-link>
         </p>
         <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染到这里 -->
         <router-view></router-view>
    </div>
    <script src="vue.min.js"></script>
    <script src="vue-router.min.js"></script>
    <script>
        //1.定义路由组件
        //可以从其他文件import进来
        const Welcome={template:'<div>欢迎</div>'}
        const Student={template:'<div>Student list</div>'}
        const Teacher={template:'<div>teacher list</div>'}

        //2.定义路由
        //每个路由映射一个组件
        const routes=[
            {path:'/',redirect:'/welcome'},
            {path:'/welcome',component: Welcome},
            {path:'/student',component: Student},
            {path:'/teacher',component: Teacher}
        ]

        //3.创建router实列，然后传'routes'配置
        const router =new VueRouter({
            routes //相当于 routes:routes
        })
        //4.创建和挂载根实例
        //从而让整个应用都要路由功能
        new Vue({
            el: '#app',
            router,
            data: {
                
            }
        })
    </script>
</body>

</html>
sheep_c
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue快速入门教程
07-16
助你vue快速入门~~学完了感觉还不错____________________________________特此分享
Vue快速入门使用示例附录
03-10
教程资源
Vue快速入门
梵高的向日葵
11-05 8185
文章目录一、Vue快速入门1、第一个Vue程序2、Vue基本语法2.1、if判断2.4、事件双向绑定3、Vue组件4、Axios异步通信5、计算属性6、插槽slot7、自定义事件内容分发8、创建vue项目二、Vue实战1、项目创建2、项目开发未完结 一、Vue快速入门 1、第一个Vue程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ti
vue快速入门
m0_46623754的博客
09-09 1153
尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，例如下面的场景，我们。在子组件中定义函数，函数的具体实现调用父组件的实现，并在子组件中调用这些函数。指令的 职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。我们期待的是，当点击登录或注册按钮，分别显示登录页或注册页，而不是一起显示。但是，点击按钮是在子组件中，那就是说需要子组件来调用父组件的函数，怎么做？
VUE 快速入门
qq_55624813的博客
11-04 1415
目录 VUE 简介 什么是VUE? 什么场景使用VUE？ VUE 快速入门 官方js文件下载 业务及代码实现 总结(Summary) VUE 简介 什么是VUE? VUE是一个基于MVVM设计模式的渐进式（融合）的纯前端JS框架，基于此框架我们可以让客户端的操作更简单。 如何理解框架？ 可以将其理解为已经包含部分核心功能的半成品代码，缺少个性化定制，主要用于避免重复编码实现。 什么场景使用VUE？ 绝大多数以数据操作（增删改查）为主的PC端或移动端项目都可用vue开发比如:
Vue 快速入门
m0_59392076的博客
05-17 238
Vue快速入门 目录 一、Vue指令和参数 二、v-for条件指令 三、v-model指令 四、v-on和v-bind指令 五、component组件 提示：以下是本篇文章正文内容，下面案例可供参考 一、Vue指令和参数 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>⼩滴课堂vue快速⼊⻔</title> ..
vue快速入门文档
jl15988
03-03 706
快速的学习vue，不懂的地方也可以向我提问，有错误的地方也请及时指正。
VUE快速入门手册
码字不易，大家的支持就是我坚持下去的动力
09-23 2297
Vue介绍VUE：vue.js是一个构件数据驱动的Web界面的渐进式框架。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。MVVM：MVVM是model - view - viewModel的缩写，它本质上是MVC的改进版。MVVM就是将其中的View的状态和行为抽象化，让我们将视图UI和业务逻辑分开。MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）。
一篇文章，Vue快速入门
热门推荐
cV展示的学习园
06-24 5万+
① Vue概述及第一个Vue程序(Hello World) 1.1 什么是MVVM MVVM（Model-View-ViewModel）是一种软件设计模式，由微软WPF（用于替代WinForm，以前就是用这个技术开发桌面应用程序的）和Silverlight（类似于Java Applet，简单点说就是在浏览器上运行WPF）的架构师Ken Cooper和Ted Peters开发，是一种简化用户界面的事件驱动编程方式。由John Gossman（同样也是WPF和Sliverlight的架构师）与2005年在他的
Ant Design Vue快速入门教程
dasfa11的博客
11-04 1万+
Ant Design Vue Ant Design是蚂蚁金服出品的一款前端UI库，官方的介绍是服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。简而言之就是一款简洁漂亮的UI库。 环境node.js webpack vscode npm //安装vue脚手架和ant design vue npm install -g @vue/cli npm i --save ant-design-vue //创建一个vue demo vue create an
Vue快速入门-快速掌握Vue
weixin_52112756的博客
01-20 1742
Vue快速入门-快速掌握Vue 1. 简介 2. Vue—Hello World 3. 指令 4. 计算属性和侦听器 5. 组件化基础 6. 生命周期和钩子函数 7. 使用Vue脚手架进行模块化开发 1、简介 Vue (读音 /vju/，类似于 view) 是中国的大神尤雨溪开发的，为数不多的国人开发的世界顶级开源软件。 是一套用于构建用户界面的渐进式框架 。Vue 被设计为可以自底向上逐层应用。 MVVM响应式编程模型，避免直接操作DOM , 降低DOM操作的复杂性。 1.2、MVVM编程思想 MVV
Vue快速入门.docx
06-20
Vue快速入门
vue快速入门package.rar
04-06
vue项目代码（计数器、记事本、天知道、图片切换、悦听音乐播放器）
vue 快速入门指南.docx
11-22
Vue 快速入门指南 本资源摘要信息主要介绍 Vue 框架的入门指南，从网页的发展历程到 Vue 框架的出现，讲解了前端开发的演变过程。 一、静态网页的产生 从 HTML 到 JavaScript 的出现，网页从静态到动态的转变。...
vb+SQL车辆管理系统设计(论文+源代码).zip
最新发布
06-16
vb+SQL车辆管理系统设计(论文+源代码)
基于C#编程实现事件总线源码+项目说明.zip
06-16
事件总线这个概念对你来说可能很陌生，但提到观察者（发布-订阅）模式，你也许就很熟悉。事件总线是对发布-订阅模式的一种实现。它是一种集中式事件处理机制，允许不同的组件之间进行彼此通信而又不需要相互依赖，达到一种解耦的目的。
request-validator.cpython-37
06-16
request-validator.cpython-37
PatchNavicat是一个用于po姐Navicat数据库管理工具的插件或工具
06-16
Navicat是一款流行的数据库前端用户界面工具，支持多种数据库系统，如MySQL、SQL Server、SQLite、Oracle和PostgreSQL等。以下是关于PatchNavicat的使用步骤和相关信息： 1. 将下载的PatchNavicat.exe文件复制到Navicat的安装目录下，确保与navicat.exe文件位于同一目录。 2. 在安装Navicat后，确保Navicat程序已经完全关闭。 3. 双击PatchNavicat.exe文件运行它。在某些情况下，可能需要选择Navicat的安装目录或navicat.exe文件作为目标进行po姐。 如果PatchNavicat运行成功并显示“Patch Success!”或类似的消息，则表示Navicat已经被成功po姐。此时，可以重新启动Navicat并检查是否需要注册或输入激活码。如果不需要，则说明po姐成功。使用po姐工具可能存在法律和道德风险。尽管许多用户选择使用po姐版软件来节省成本，但这可能违反了软件的使用协议和版权法。
苹果cms v8漂亮精品动漫风格网站模板
06-16
苹果CMS精品动漫风格网站模板，新春喜气自适应模板视频影视网站模板，复制文件template目录，后台设置模板为2016new目录刷新即可。
如何快速入门vue3
02-06
学习 Vue 3 需要具备一定的 JavaScript 基础。如果您对 JavaScript 还不熟悉，可以先学习 JavaScript 基础知识。 一旦您对 JavaScript 有了基本的了解，就可以开始学习 Vue 3 了。 1. 安装 Vue 3 首先，您需要在...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值