Vue2快速入门（一）项目环境搭建、vue基础语法

豆浆两块钱

已于 2023-02-26 21:26:54 修改

阅读量953

点赞数

分类专栏： Vue 文章标签： vue.js 前端 node.js

于 2023-02-16 14:09:14 首次发布

本文链接：https://blog.csdn.net/qq_46033586/article/details/129057433

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

前端编辑器VsCode
- 安装插件
开发环境搭建Node和Npm
脚手架Vue-Cli 4.3安装
使用vue-cli创建项目（测试项目，验证vue环境）
原生Vue测试基础语法

前端编辑器VsCode

免费开源
win8/10/11 x64官网下载

切换语言：Ctrl+Shift+P→【Configure Display Language】

安装插件

vetur 插件：vue⽂件基本语法的高亮插件
在setting.json中添加配置

{
 "emmet.syntaxProfiles": {
 "vue-html": "html",
 "vue": "html"
 },
 "eslint.validate": [
 "javascript",
 "javascriptreact",
 "html",
 "vue"
 ],
 "eslint.options": {
 "plugins":["html"]
 }
}

eslint插件：智能错误检测插件
VsCode代码快捷键：Vue 2 Snippets 、Vue Peek
Live Server 插件：Vscode里右键快速打开html（Open with…）
在这里插入图片描述

开发环境搭建Node和Npm

什么是Node？

Node.js就是运行在服务端的JavaScript

什么是Npm？

Node.js的包管理工具，可以下载使用公共仓库的包，类似maven包安装分为本地安
装（local）、全局安装（global）两种

新版的node.js已经集成了npm，所以只需要下载node.js即可：官网下载
在这里插入图片描述

关于安装

下载之后正常按步骤安装就可以，选择安装方式时，勾选add path可以不用自己手动配环境

验证是否安装好
在这里插入图片描述

切换Npm镜像源为淘宝Npm镜像

类似maven，从国外下载包很慢，所以就有⼈改成国内的maven仓库就会快很多，或者搭建自己本地的私服

使用淘宝定制的 cnpm 命令行工具代替默认的 npm（管理员身份）
npm install -g cnpm --registry=https://registry.npm.taobao.org
之后可以使用cnpm 命令来安装模块了
在这里插入图片描述

脚手架Vue-Cli 4.3安装

Vue提供了⼀个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架，CLI会自动安装vue

cnpm install -g @vue/cli
cnpm install -g @vue/cli-init

验证vue是否安装好：vue -v
在这里插入图片描述

使用vue-cli创建项目（测试项目，验证vue环境）

vue create my-project

进入my-project文件夹后启动项目cnpm run serve一直回车后即可创建最简单的vue项目
在这里插入图片描述
根据网址进入，搭建成功

原生Vue测试基础语法

CDN中引入vue

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>vue快速入门</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.14/vue.js"></script>
</head>
<body>
</body>
</html>

{{}}：文本插值

{{}}xxx是js表达式，可以拿到data里所有的属性

 <div id="app">
        <p> {{message}} </p>
        <p> {{5+5}} </p>
        <p> {{message.split(" ").reverse().join("")}}</p>
 </div>
 <script>
        new Vue({
            // 用于指定当前vue实例为哪个容器使用，值为css选择器字符串
            el:'#app',
            // 用于储存数据，数据供el指定的容器使用
            data:{
                message: "欢迎学习vue项目 -成为vue全栈工程师"
            },
            //自定义方法
            methods: {
            },
        })
</script>

在这里插入图片描述

注意：

一个vue实例只能接管一个容器
插值语法：{{}} 可以读取到在data的所有属性
data中数据发生变化，那么在容器用到的数据会自动更新

v-if 和 v-else 指令

逻辑判断

 <div id="app">
	<p v-if="Math.random()*10 > 5">大于5</p>
	<p v-else>小于5</p>
 </div>
<script>
        new Vue({
            //绑定到哪个元素
            el:'#app',
            //数据源
            data:{
            },
            //自定义方法
            methods: {
            },
        })
</script>

在这里插入图片描述 每刷新一次，随机生成一个随机数

v-for 指令

循环指令

<div id="app">
        <ol>
            <li v-for="user in users">{{user.name}}</li>
        </ol>
</div>
<script>
        new Vue({
            //绑定到哪个元素
            el:'#app',
            //数据源
            data:{
            		users:[
                    {name:"springboot"},
                    {name:"spring"},
                    {name:"mybatis"}
                		]
            },
            //自定义方法
            methods: {
            },
        })
</script>

在这里插入图片描述

v-bind 指令

<a :href="{{url}}">百度</a>这样的使用是不被允许的

因为{{}}只能在标签体内容里面使用；可以使用v-bind指令，作用在属性中。

“v-bind：” 可以简写为 “：”

 <div id="app">
	<p>
		<!--<a v-bind:href="url">百度</a>-->
		<a :href="url">百度</a>
	</p>
 </div>
 <script>
        new Vue({
            //绑定到哪个元素
            el:'#app',
            //数据源
            data:{
            url: "https://www.baidu.com/"
            },
            //自定义方法
            methods: {
            },
        })
</script>

在这里插入图片描述

v-model 指令

⼀般在 input、select、textarea、checkbox、radio等表单上使用

    <div id="app">
        {{msg}}
        <br/>
        输入：<input v-model="msg" />
    </div>
    <script>
        new Vue({
            //绑定到哪个元素
            el:'#app',
            //数据源
            data:{
                msg:"123"
            },
            //自定义方法
            methods: {
            },
        })
    </script>

在这里插入图片描述

v-on指令

1、监听事件，并对用户的输入进行响应
v-on:click可以简写为@click

<div id="app">
		<p>{{value}}</p>
		<!--<button v-on:click="changeTitle">改值</button>-->
		<button @click="changeTitle">改值</button>
</div>
<script>
        new Vue({
            //绑定到哪个元素
            el:'#app',
            //数据源
            data:{
            		value:"这是一句话"
            },
            //自定义方法
            methods: {
            changeTitle:function(){
                    this.value="改变了这句话"
                }
            },
        })
</script>

在这里插入图片描述
2、事件传参

<button @click="showMessge('hello world')">点击</button>
<script>
	... ...
	methods: {
		showMessge(text) {
			alert(text);
			}
	}
</script>

在这里插入图片描述

注意：

methods中配置的函数不能使用箭头函数
event.target.innerText能拿到标签的值，但是调用不加()或者加($event)

<!-- 不加() -->
<button @click="showMessge">helloworld</button>

methods: {
   showMessge(event) {
       alert(event.target.innerText);
   }
}

<!-- 加($event) -->
<button @click="showMessge($event)">helloworld</button>
methods: {
   showMessge(event) {
       alert(event.target.innerText);
   }
}

3、阻止默认事件

// js中的阻止默认事件
e.preventDefault()

// vue
@click.prevent="showMessge"

4、阻止事件冒泡

// js中的阻止事件冒泡
e.stopPropagation()

// vue
@click.stop="showMessge"

// 阻止冒泡、默认事件连用
@click.stop.prevent="showMessge"

5、只触发一次事件

@click.once="showMessge"	//触发一次事件后，再次点击无法触发

6、键盘事件

@keyup="showMessge"	//输入框有键盘输入即执行事件
@keyup.enter="showMessge"	//输入结束后回车才执行键盘事件

component组件

扩展 HTML 元素，封装可重用的代码（就是通用的模块）
注册组件：Vue.component(组件名, 选项)
组件可以拷贝多次，复用多次，每个组件都会各自独⽴维护它的数据

data 必须是⼀个函数，而不是前面的json对象
每个实例可以维护⼀份被返回对象的独⽴的拷贝，否则数据就会共享出现问题

想要从外部传值给组件，只能通过prop向子组件传值

<div id="app">
    <p>
        <tem_xd></tem_xd>
        <tem_xd></tem_xd>
    </p>
    <p>
            <tem_xd msg="我是一行字"></tem_p_xd>
    </p>
</div>
<script>
        Vue.component("tem_xd",{
            props:{
                msg:{
                    type:String
                }
            },
            data:function(){
                return {
                    count:0
                }
            },
            template:"<div><button v-on:click='count++'> {{msg}} 已点击 {{count}} 次 </button>"
        })

        new Vue({
            //绑定到哪个元素
            el:'#app',
            //数据源
            data:{
            },
            //自定义方法
            methods: {
            },
        })
    </script>

在这里插入图片描述

豆浆两块钱

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue2快速入门（一）项目环境搭建、vue基础语法

Node.js就是运行在服务端的JavaScriptNode.js的包管理工具，可以下载使用公共仓库的包，类似maven包安装分为本地安装（local）、全局安装（global）两种官网下载。
复制链接

扫一扫