Vue快速入门

最新推荐文章于 2023-10-16 12:32:14 发布
最新推荐文章于 2023-10-16 12:32:14 发布
阅读量207 收藏
点赞数
分类专栏： 分布式项目开发实战
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42230770/article/details/109482932
版权

官网 ：https://cn.vuejs.org/

一、概念

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二、快速入门

1.起步

引入JS

<!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 2.生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 3.npm安装vue组件-->
$ npm install vue

2.插件引入

VSCode 安装 Vue 2 Snippets Vue语法提示

3.基本语法

3.1 声明式渲染

<script>
	//vue声明式渲染
	let vm = new Vue({
        el:"#app", 	//绑定元素
        data:{		//封装数据
            name:"zhangsan",
            num:0
        }，
        methods:{	//封装方法

		}
    });
</script>
<div id="app">
  {{ message }}
</div>

3.2 双向绑定

数据模型变化，视图变化，反之，视图变化，数据模型也变化
数据改变时，动态渲染视图。

<body>
    <div id="app">
        <input type="text" v-model="num">
        <h1>I`m {{name}},当前输入的数字是 {{num}}</h1>
    </div> 
</body>

<script>
    let vm = new Vue({
        el:"#app",
        data:{
            name:"zhangsan",
            num:0
        }
    });
</script>

3.3 条件与循环

v-if

用于控制一个元素是否显示。true–显示 false–隐藏
v-if 是让该标签完全消失

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

<script>
	var app3 = new Vue({
	  el: '#app-3',
	  data: {
	    seen: true
	  }
	})
</script>

v-if 和 v-else-if 的结合使用


    <div id="app4">
        <button @click="random=Math.random()">点我生成随机数</button>
        <span>{{random}}</span>

        <h1 v-if="random>=0.75">&gt;= 0.75</h1>
        <h1 v-else-if="random>=0.5">&gt;= 0.5</h1>
        <h1 v-else-if="random>=0.2">&gt;= 0.2</h1>
        <h1 v-else-if="random&lt;0.2">&lt;= 0.2</h1>
    </div>


	<script>
		let vm4 = new Vue({
	        el:"#app4",
	        data:{
	            random:1
	        }
	    });
	</script>
v-show

用于控制一个元素是否显示，和 v-if 不同的是， v-show是通过样式display:none来控制显隐的。

v-for

绑定数组的数据来渲染一个项目列表
vue会 “复制” 加了 v-for 标签的元素标签，复制的个数为数组的长度，然后一一对应渲染数组的值

PS：建议每次遍历时都加上 唯一标识 :key="当前对象的唯一标识值,如ID等等" 可以提高vue渲染效率

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

<script>
	var app4 = new Vue({
	  el: '#app-4',
	  data: {
	    todos: [
	      { text: '学习 JavaScript' },
	      { text: '学习 Vue' },
	      { text: '整个牛项目' }
	    ]
	  }
	})
</script>

带索引和对象信息的 v-for ，并使用v-if来过滤遍历结果

	<div id="app3">
        <ul>
            <li v-for="(user,index) in users" v-if="user.gender == 'g'">
                当前索引:{{index}} <br>
                当前对象信息:{{user.name}}/{{user.gender}}/{{user.age}} <br>
                对象信息: <span v-for="(v,k,i) in user">属性名：{{k}} : 属性值：{{v}} : 索引值：{{i}}} |    </span> <br>
                <hr/>
            </li>
        </ul>
    </div>

<script>
    let vm3 = new Vue({
        el:"#app3",
        data:{
            users:[
                {name:'a1',gender:'m',age:21},
                {name:'a2',gender:'g',age:22},
                {name:'a3',gender:'g',age:23},
                {name:'a4',gender:'m',age:24}
            ]
        }
    });
</script>

3.4 处理用户输入

v-model

用于把Vue.data中的值与dom对象（输入框、单选、多选）中的值(Value) 进行绑定(不是属性)

<body>
    <div id="app">
        <input type="text" v-model="num">
        <h1>当前输入的数字是 {{num}}</h1>
    </div> 
</body>

<script>
    let vm = new Vue({
        el:"#app",
        data:{
            num:0
        }
    });
</script>
v-bind:属性名

可以简写为 :
如何属性的值如果包含 - 就需要用引号括起来

    <div id="app2">
        <a v-bind:href="link">gogogogo</a>
        
        <span v-bind:class="{active:isActive,'text-danger':hasError}">Hello</span>
    </div>

	<script>
	    let vm2 = new Vue({
	        el:"#app2",
	        data:{
	            link:"https://www.baidu.com",
	            isActive:true,
	            hasError:true
	            
	        }
	    });
	</script>
v-on

可以简写为 @ 例如 @:click
添加一个事件监听器，click 表示点击事件
通过它调用在 Vue 实例中定义的方法，v-on 指令的值为要调用的方法名

事件冒泡：如果子元素和父元素都绑定了点击事件，那么点击子元素后会依次执行子元素的事件和父元素的事件，默认开启
阻止事件冒泡：@chick.stop="xxx"

默认行为：HTML的有些标签有默认执行的动作。如：a标签会执行跳转动作。
修改默认行为：@click.prevent.stop="xxx" 可以执行自定义的方法、操作，如果值为空就是不执行任何操作

按键修饰： 按键盘上某个特定的键触发的操作。
绑定按键操作：@keyup.up="xxx" 给上方向键绑定事件。up是vue抽取的常用按键的别名
vue抽取常用按键的别名：.enter .tab .delete(删除和退格) .esc .space .up .down .left .right
其余按键按照 .键码 的方式进行绑定
绑定组合键操作：@click.ctrl="xxx" 按住ctrl后点击触发事件
@keyup.alt.up="xxx" 按住alt 和 上方向键触发事件

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
</div>

<script>
	var app5 = new Vue({
	  el: '#app-5',
	  data: {
	    message: 'Hello Vue.js!'
	  },
	  methods: {
	    reverseMessage: function () {
	      this.message = this.message.split('').reverse().join('')
	    }
	  }
	})
</script>
v-html

绑定变量，并用HTML语法解析后展示

	<div id="app1">
        <span v-html="msg">

        </span>
    </div>

	<script>
	let vm = new Vue({
	        el:"#app1",
	        data:{
	            msg:"<h1>Hello</h1>"
	        }
	    });
	</script>
差值表达式 {{}}

格式：{{表达式}}
说明：

  1. 支持JS语法，可以调用JS内置函数（函数必须有返回值）
  2. 表达式必须有返回的结果。没有结果的表达式不允许使用，如：let a = 1 + 1
  3. 可以直接获取Vue实例中定义的data或methods
<h1>当前输入的数字是 {{num}}</h1>

3.5 构建组件化模板

组件相当于自定义一个标签模板，这个标签模板有着自己的内容和逻辑

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  // todo-item 组件现在接受一个 "prop"，类似于一个自定义 attribute参数。
  // 这个 prop 名为 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
})


<div id="app-7">
  <ol>
    <!--
      为每个 todo-item 提供 todo 对象
      todo 对象是变量，即其内容可以是动态的。
      也需要为每个组件提供一个“key”
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>

在这里插入图片描述

3.6 计算器computed

当值发生变化时自动执行


	<div id="app5">
        <ul>
            <li>book1  价格：{{xyjprice}} <input type="number" v-model="xyjnum"></li>
            <li>book2 价格：{{shzprice}} <input type="number" v-model="shznum"></li>
            <li>总价: {{totalPrice}}</li>
        </ul>
    </div>
    
	<script>
	    new Vue({
	        el:"#app5",
	        data:{
	            xyjprice:7,
	            shzprice:8,
	            xyjnum:0,
	            shznum:0
	        },
	        computed: {
	            totalPrice(){
	                return this.xyjnum*this.xyjprice + this.shznum*this.shzprice
	            }
	        },
	    })
	</script>

3.7 监听器watch

监听器
格式：要监听的变量: function(newVal,oldVal){} 方法默认的参数为被监听变量的新值和旧值


	<div id="app5">
        <ul>
            <li>book1  价格：{{xyjprice}} <input type="number" v-model="xyjnum"></li>
            <li>book2 价格：{{shzprice}} <input type="number" v-model="shznum"></li>
            <li>总价: {{totalPrice}}</li>
            {{msg}}
        </ul>
    </div>


<script>
	new Vue({
        el:"#app5",
        data:{
            xyjprice:7,
            shzprice:8,
            xyjnum:0,
            shznum:0,
            msg:""
        },
        computed: {
            totalPrice(){
                return this.xyjnum*this.xyjprice + this.shznum*this.shzprice
            }
        },
        watch: {
            xyjnum: function(newVal,oldVal){
                if(newVal > 3){
                    this.msg = "西游记--库存不足"
                    this.xyjnum = 3
                }
            }
        },
    })
</script>

3.8 过滤器 filters

局部过滤器

	<div id="app6">
        <ul>
            <li v-for="item in userList">
                {{item.gender | genderFilter}}
            </li>
        </ul>
    </div>

	<script>
		    new Vue({
		        el:"#app6",
		        data:{
		            userList:[
		                {id:1,name:"a1",gender:1},
		                {id:2,name:"a2",gender:0},
		                {id:3,name:"a3",gender:1}
		
		            ]
		        },
		        filters:{
		            genderFilter(val){
		                if(val == 1){
		                    return '女';
		                }else{
		                    return '男';
		                }
		            }
		        }
		    })
	</script>

全局过滤器

    <div id="app6">
        <ul>
            <li v-for="item in userList">
                {{item.gender | gFilter}}
            </li>
        </ul>
    </div>

	<script>
		Vue.filter("gFilter",function(val){
                if(val == 1){
                    return '女';
                }else{
                    return '男';
                }
        })
		new Vue({
	        el:"#app6",
	        data:{
	            userList:[
	                {id:1,name:"a1",gender:1},
	                {id:2,name:"a2",gender:0},
	                {id:3,name:"a3",gender:1}
	
	            ]
	        }
	    })
	</script>

4.组件化

注意：

  1. 组件名不能包含大写字母
  2. 不管哪儿种方式声明的组件，都只能在被vue对象绑定的元素中使用

全局组件与局部组件实例

    <div id="app7">
        <all></all>
        <button-count></button-count>
    </div>

	<script>
	    // 全局组件
	    Vue.component("all",{
	        template:`<button @click="count++">我被点击了{{count}} 次</button>`,
	        data() {
	            return {
	                count:0
	            }
	        }
	    });
	
	    // 局部声明一个组件
	    const buttonCounter = {
	        template:`<button @click="count++">我被点击了{{count}} 次</button>`,
	        data() {
	            return {
	                count:0
	            }
	        }
	    }
	
	    new Vue({
	        el:"#app7",
	        data:{
	            count:1
	        },
	        components:{
	            'button-count':buttonCounter
	        }
	    })
	</script>

5.生命周期

每个vue实例在创建时都要经过一系列的初始化过程：

  1. 初始化–事件&生命周期
  2. 初始化–注入&校验
  3. 挂载模板
  4. 被修改时，虚拟DOM重新渲染并应用更新
  5. 销毁实例，解除绑定、销毁子组件和监听器等等

Vue在生命周期中的每个状态都设置了钩子函数（监听函数，类似AOP服务增强）
当Vue处于不同的生命周期时，对应的钩子函数就会被触发调用

生命周期图示
在这里插入图片描述
图中涉及：

  1. beforeCreate ：初始化注入之前
    此时数据模型未加载，方法未加载，模板未加载
  2. created ：初始化注入之后
    此时数据模型已加载，方法已加载，模板已加载，模板未渲染
  3. beforeMount ：挂载模板之前
    模板未渲染（表达式还没解析）
  4. mounted ：挂载模板之后
    模板已渲染
  5. beforeUpdate ：修改之前
    数据模型已更新，模板未更新（模板未重新渲染）
  6. updated ：修改之后
    数据模型已更新，模板已更新（模板已重新渲染）
  7. beforeDestroy：销毁之前
  8. destroyed：销毁完毕

6.模块化开发

6.1 环境准备

#windows命令窗口下全局安装

# 安装webpack
npm install webpack -g 

# 安装vue命令行脚手架
npm install -g @vue/cli-init

6.2 初始化vue项目

# 在vue的工作空间执行
# vue脚手架使用webpack模板初始化一个项目
vue init webpack 项目名

# 选择初始化项目的各种参数...

# 启动项目
cd 项目名目录
npm run dev

6.3 开发流程

6.3.1 编写vue组件

.vue 的构成：

  1. 写vue模板
  2. 写vue实例，JS
  3. 调试样式
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
6.3.2 配置路由

配置跳转规则

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

6.4 整合Element-UI

6.4.1 安装
npm i element-ui

安装完成后 package.json 里会有相关信息

"dependencies": {
    "element-ui": "^2.14.0",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  }
6.4.2 导入

在main.js中导入Element-UI

// 导入插件
import ElementUI from 'element-ui' 
//导入样式
import 'element-ui/lib/theme-chalk/index.css'
//设置vue使用element-ui
Vue.use(ElementUI)
6.4.3 使用Element-UI 标签

具体参考 Element-UI文档

		<el-table :data="tableData">
          <el-table-column prop="date" label="日期" width="140">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
        </el-table>
6.4.4 抽取组件
<!--用此标签标识组件部分-->
<router-view></router-view>
纯洁2016
关注
专栏目录
vue新手入门详细教程
nanling0220的博客
04-19 1833
vue.js vue.js是一套用于构建用户界面的渐进式框架。 Vue的核心：声明式渲染，组件 Vue功能：模板引擎，组件，路由，状态管理器（管理数据–可伸缩性的），自动化构建。 核心基本语法： 第一步：vue.js引入： // https://cdn.jsdelivr.net/npm/vue/dist/vue.js vuejs下载网址 <script src="js/vue.j...
「vue基础」新手入门篇（一）
前端达人
07-18 386
开篇自从Facebook2013年推出React框架以来，基于UI组件的前端框架越来越流行，主要得益于组件的重用性，数据状态的管理等特性。谷歌也推出了基于组件的第二代An...
Vue新手入门指南（易懂）
liuzhaoh的博客
03-01 1万+
Vue.js学习心得 前言 对于一名初入编程的新手来说，JavaScript的语法偏向复杂，选择Vue库可以说是一个较为不错的体验。在很多方面，Vue简化了JavaScrip语法，并且实现数据与视图的双向绑定，达到响应式页面的目的。 1. Vue实例和模板语法 <body> <div id="app"> <p>{{message}}</p> </div> <script> new Vue({ el:'#app'
VUE新手入门
cbbgs_cb的博客
08-03 221
vue 文章目录vue1 第一个vue程序1.1 引入vue包1.2 创建一个div1.3 创建一个vue对象2 v-html3 v-show4 v-if5 动态绑定class 三目、对象、数组6 动态绑定style三目、对象、数组7 v-if 和v-else,v-else-if8 v-for9 过滤10 事件处理器11 事件修饰符12 按键修饰符13 表单绑定 v-model14 购物车15 axios16 计算属性17 计算属性之模糊查询18 组件19 父传子20 生命周期方法21 路由22 axio
vue初学者入门（上）
m0_56265442的博客
04-13 222
无基础初学者笔记
Vue快速入门使用示例附录
最新发布
03-10
"Vue快速入门使用示例附录"这个压缩包可能是为了帮助初学者快速理解并掌握Vue的基础操作和常见应用场景。让我们通过以下几个关键知识点来深入探讨Vue.js。 1. **安装Vue**: Vue可以通过CDN链接直接在HTML中引入，也...
vue快速入门教程
07-16
助你vue快速入门~~学完了感觉还不错____________________________________特此分享
VUE快速入门
qq_48556559的博客
07-25 437
vue快速入门随手笔记
vue快速入门package.rar
04-06
这个"vue快速入门package"压缩包文件包含了多个基于Vue.js的小项目，可以帮助初学者快速理解和掌握Vue的核心概念与基本用法。 1. **计数器**：这是一个基础的Vue应用示例，展示了如何使用Vue的数据绑定和计算属性来...
Vue快速入门（从入门到实战）
m0_70274530的博客
04-29 892
[](()1、插值表达式 [](()（1）花括号 格式： {{表达式}} 说明; 该表达式支持JS语法，可以调用js内置函数（必须有返回值) 表达式必须有返回结果。例如1+1，没有结果的表达式不允许使用，如: var a = 1+1; 可以直接获取Vue实例中定义的数据或函数 示例 HTML： i{name ) ) JS: var app =new vue({ el:“#app”, data:{ name:“Jack”" } }) [](()2、差值闪烁 使用0方式在网速较慢时会出现问题。在
vueup:Vue.js的简单，轻巧和超快速的全局通知弹出窗口
05-14
VueUp Vue.js的简单，轻巧和优雅的全局通知弹出窗口。 查看。 安装 npm install --save vueup 在您的应用中的某处： import Vue from 'vue' import VueUp from 'vueup' Vue . use ( VueUp ) Nuxt.js 要将VueUp与使用，请使用--spa或--s标志部署应用程序以禁用服务器端渲染。 有关更多信息，请参阅 。 否则，您可以执行以下步骤： 文件plugins/vueup.js ： import Vue from 'vue' import VueUp from 'vueup' Vue . use ( VueUp ) 然后，将文件添加到nuxt.config.js的plugins键中： module . exports = { plugins : [ { src
Vue(1) 新手入门教程——helloworld(表达式，指令)
郑清
12-09 7042
Vue：渐进式JavaScript框架 如何安装使用？？ -->官网下载vue.js然后在自己的项目中引入https://cn.vuejs.org/v2/guide/installation.html <!--通过外链方式引入vue.js 注意：Vue就是一个全局变量--> <script type="text/javascript" src="js/v...
Vue基础用法-指令(一)
qq_46199553的博客
08-24 426
vue 简介 1. 什么是 vue 官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。 构建用户界面 用 vue 往 html 页面中填充数据，非常的方便 框架 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！ 要学习 vue，就是在学习 vue 框架中规定的用法！ vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库 2. vue 的特性 vue 框架的特性，主要体现在如下两方面： ①
vue每日进阶--vue新手入门
图解前端的博客
06-26 1291
vue.js 是什么 vue是一套用于构建用户界面的渐进式框架，vue被设计为自底向上逐层应用。vue的核心库只关注视图层，也就是平时所说的view层，这样便于开发人员快速上手，还有利于和第三方库或者既有项目整合。 vue和react相比哪个更好呢 核心架构比较 vue和react有许多相似之处，例如： 1. 使用了Virtual DOM 2. 提供了了响应式（Reactive...
Vue - 快速入门，这一套就够了！（Vue core + 案例 + 效果演示）
热门推荐
CYK_byte的博客
10-16 2万+
前置条件：掌握 HTML、CSS、JavaScript、AJAX.工具：VsCode.插件：Live Server（浏览器实时预览）Ps：建议都提前下载下来，没网的时候也能用.
Vue 学习入门指南
代码君
10-16 1318
如果你是一名 Vue 开发新手，可能已经听过很多行话术语，比如单页面应用程序、异步组件、服务器端渲染等等，或者还听说过与 Vue 有关的一些工具和库，比如 Vuex、Webpack、Vue CLI 和 Nuxt。 那么究竟什么是Vue，有什么作用？ 公众号：代码集中营 每周分享技术文章、优质软件资源 Vue.js是一套用于构建用户界面的渐进式框架，主要用于快速的构建前端界面，与其它大型的前端框架不同，Vue被设计为可以自底向上逐层应用。相比Angular.js来说，Vue的核心库只关注视图层，不仅易于上手
Vue 基础入门
我的的博客哦
05-17 1万+
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
VUE快速入门手册
码字不易，大家的支持就是我坚持下去的动力
09-23 2377
Vue介绍VUE：vue.js是一个构件数据驱动的Web界面的渐进式框架。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。MVVM：MVVM是model - view - viewModel的缩写，它本质上是MVC的改进版。MVVM就是将其中的View的状态和行为抽象化，让我们将视图UI和业务逻辑分开。MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）。
Vue 基础入门 - 看这一篇就够了！！！
niubiwhat的博客
09-05 5809
Vue 入门基础篇
Vue快速入门与项目构建指南
Vue.js 是一个流行的前端 JavaScript 框架，以其灵活性、简单性和高效性著称。它支持构建各种规模的应用程序，通过渐进式技术栈和轻量级的核心实现。Vue 提供了一种声明式的编程方式，使得开发人员能够更轻松地管理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值