Vue2快速入门(一)项目环境搭建、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>

在这里插入图片描述

注意:

  1. 一个vue实例只能接管一个容器
  2. 插值语法:{{}} 可以读取到在data的所有属性
  3. 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>

在这里插入图片描述

注意:

  1. methods中配置的函数不能使用箭头函数
  2. 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
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

豆浆两块钱

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值