前端web之vue基础(6)

最新推荐文章于 2024-01-29 13:55:09 发布

达西布鲁斯

最新推荐文章于 2024-01-29 13:55:09 发布

阅读量1.3k

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/biheyu828/article/details/103222726

版权

本文是关于Vue.js的基础教程，详细介绍了Vue.js的用途、优点以及如何使用。Vue.js是一个轻量级的前端框架，以其高效的双向数据绑定和组件化特性受到青睐。文章讲解了如何通过直接引入或vue-cli构建项目，以及Vue实例的创建，包括数据、方法、生命周期钩子、模板语法、指令、class和style绑定等内容，帮助读者快速掌握Vue.js基础。

摘要由CSDN通过智能技术生成

vue介绍

什么是vue

vue.js是一套构建用户界面的渐进式框架，用来快速构建GUI页面。
vue.js 通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。通过MVVM思想实现数据的双向绑定，让开发者不用再操作dom对象，有更多的时间去思考业务逻辑。
Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来。实际的 DOM 封装和输出格式都被抽象为了 Directives 和 Filters。

为什么使用vue.js

轻量级框架
vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统。
双向数据绑定
vue.js会自动对页面中某些数据的变化做出同步的响应。
也就是说，vue.js会自动响应数据的变化情况，并且根据用户在代码中预先写好的绑定关系，对所有绑定在一起的数据和视图内容都进行修改。
通过MVVM思想实现数据的双向绑定，让开发者不用再操作dom对象，有更多的时间去思考业务逻辑。
组件化
vue.js通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件（component）中，我们只要先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数（就像给函数传入参数一样，这个参数叫做组件的属性），然后再分别写好各种组件的实现（填坑），然后整个应用就算做完了。
视图,数据,结构分离
使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作
虚拟DOM
在传统开发中，用JQuery或者原生的JavaScript DOM操作函数对DOM进行频繁操作的时候，浏览器要不停的渲染新的DOM树，导致页面看起来非常卡顿。
vue.js使用虚拟DOM，可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM。最后在计算完毕才真正将DOM操作提交，将DOM操作变化反映到DOM树上。

如何使用vue.js

主要有两种使用方式：
方式一：
直接在html中使用<script>引入。这种方式主要用来创建简单的但页面应用。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>全栈工程师：vue小白学习</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="vue_app">
		<h1>内容 : {
   {
   message}}</h1>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
   
			el: '#vue_app',
			data: {
   
				message: "hello，小白来了"
			}
		})
	</script>
</body>
</html>

方式二：
使用vue-cli脚手架构建vue.js项目。这种方式也是工程项目中最主流的使用方式。
具体使用步骤如下：
（1）安装vue-cli项目构建工具包

安装npm
在用 vue.js 构建大型应用时推荐使用 npm 安装，npm 能很好地和诸如 webpack 或 browserify 模块打包器配合使用。vue.js 也提供配套工具来开发单文件组件。
在MAC系统上执行brew install npm
安装cnpm
在国内，使用淘宝的镜像会比较快安装一些包。
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装vue
cnpm install vue
安装vue-cli
Vue 提供了一个官方的 CLI，为单页面应用快速搭建 (SPA) 繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本
在国内，使用淘宝的镜像会比较快安装一些包。
cnpm install --global vue-cli
因为vue命令去初始化项目的时候实际上还是使用的是npm去安装各种模块，并没有使用cnpm，所以还是先设置npm使用淘宝中的镜像比较快。
npm config set registry https://registry.npm.taobao.org
创建基于 webpack 模板的新项目
使用webpack套件构建项目：vue init webpack front
(venv3.7) bruce-mac-pro: bruce.xu$ vue init webpack front

? Project name portal
? Project description automation test framework front_end
? Author Bruce Xu 
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

安装项目依赖
cnpm install
启动项目
cd front
npm run dev

在浏览器中导航到 http://localhost:8080
在这里插入图片描述
项目目录详解及各文件规范

（2）编写vue代码
step1: 在components目录下创建组件Hello.vue
组件系统是vue的另一个重要概念，它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。

<template>
  <div>
      vue小白来了:{
   {
   msg}}
  </div>
</template>

<script>
export default {
   
  name: 'TestProject',
  data () {
   
    return {
   
      msg: '小白 hello world！！'
    }
  }
}
</script>

<style scoped>
div {
   
  font-weight: normal;
  color: brown
}
</style>

step2: 在router目录下的index.js中添加路由

import Vue from 'vue'
import Router from 'vue-router'
import TestProject from '@/components/Hello'

Vue.use(Router)

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

step3: 打包发布
在终端console输入命令：npm run dev
浏览器打开： http://localhost:8080
在这里插入图片描述

vue基础

本章节主要学习vue基础，先从最简单的但页面vue项目开始。暂时不考虑vue-cli脚手架，从单页面html嵌入vue.js的方式学习基础用法。

vue实例

构造vue实例

ViewModel
一个同步 Model 和 View 的对象。
Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来。在 Vue.js 中，每个 Vue 实例都是一个 ViewModel。它们是通过构造函数 Vue 或其子类被创建出来的。
通过用 Vue 函数创建一个新的 Vue 实例：

	<script type="text/javascript">
		var vm = new Vue({
    //创建vue实例
			el: '#vue_app', //绑定DOM元素
			data: {
    //元素的数据
				message: "hello，小白来了"
			}
		})
	</script>

视图 (View)
被 Vue 实例管理的 DOM 节点。
Vue.js 使用基于 DOM 的模板。每个 Vue 实例都关联着一个相应的 DOM 元素。当一个 Vue 实例被创建时，它会递归遍历根元素的所有子结点，同时完成必要的数据绑定。当这个视图被编译之后，它就会自动响应数据的变化。
我们几乎不需要直接操作DOM，即可自动完成数据的更新。当数据发生变化时，视图将会自动触发更新。

<script type="text/javascript">
		var vm = new Vue({
    //创建vue实例
			el: '#vue_app', //绑定DOM元素
			data: {
    //元素的数据
				message: "hello，小白来了"
			}
		})
	</script>
	vm.$el //视图，即元素vue_app

模型 (Model)
Vue.js 中的模型就是普通的 JavaScript 对象——也可以称为数据对象。
例如，上例中的vm.$data这个对象，就是Model。
一旦某对象被作为 Vue 实例中的数据，它就成为一个 “反应式” 的对象了。你可以操作它们的属性，同时正在观察它的 Vue 实例也会收到提示。
vue的实例vm代理了它们观察到的数据对象的所有属性。所以一旦一个对象 { a: 1 } 被观察，那么 vm.$data.a 和 vm.a 将会返回相同的值，而设置 vm.a = 2 则也会修改 vm.$data。

	<script type="text/javascript">
		var val = {
   a: 1}
		var vm = new Vue({
   
			el: '#vue_app',
			data: val
		})
	// 获得这个实例上的 property
	// 返回源数据中对应的字段
	// vm.a == val.a // => true
	// vm.$data.a == val.a // => true
	console.log(vm.a === val.a)
	console.log(vm.$data.a === val.a)
	</script>

指令 (Directives)
带特殊前缀的 HTML 特性，可以让 Vue.js 对一个 DOM 元素做各种处理。

<div v-text="message"></div>

这里的 div 元素有一个 v-text 指令，其值为 message。Vue.js 会让该 div 的文本内容与 Vue 实例中的 message 属性值保持一致。
Directives 可以封装任何 DOM 操作。比如 v-attr 会操作一个元素的特性；v-repeat 会基于数组来复制一个元素；v-on会绑定事件等。

Mustache 风格绑定
vue可以使用 mustache 风格的绑定，不管在文本中还是在属性中。它们在底层会被转换成 v-text 和 v-attr 的指令。比如：

<div id="person-{
   {id}}">Hello {
   {
   name}}!</div>

过滤器 (Filters)
过滤器是用于在更新视图之前处理原始值的函数。它们通过一个 “管道” 在指令或绑定中进行处理：

<div>{
   {
   message | capitalize}}</div>

这样在 div 的文本内容被更新之前，message 的值会先传给 capitalizie 函数处理。

实例的数据和方法

data属性

Vue 实例的数据对象。
类型： Object | Function
限制： 组件的定义只接受 function。
说明： Vue 将会递归将 data 的 property 转换为 getter/setter，从而让 data 的 property 能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：浏览器 API 创建的原生对象，原型上的 property 会被忽略。大概来说，data 应该只能是数据。
当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
实例创建之后，可以通过 vm./ $d a t a 访问原始数据对象。 V u e 实例也代理了 d a t a 对象上所有的 p r o p e r t y ，因此访问 v m . a 等价于访问 v m . /$ data.a。

	<script type="text/javascript">
		var val = {
   a: 1} //数据对象
		var vm = new Vue({
   
			el: '#vue_app',
			data: val //数据对象被加入到一个 Vue 实例中
		})
		// 获得这个实例上的 property
		// 返回源数据中对应的字段
		// vm.a == val.a // => true
		// vm.$data.a == val.a // => true
		console.log(vm.a == val.a)
		console.log(vm.$data.a === val.a)
		// 设置 property 也会影响到原始数据
		vm.a = 2
		val.a // => 2
		console.log(val.a)

		// ……反之亦然
		val.a = 3
		vm.a // => 3
		console.log(vm.a)
	</script>

当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。也就是说如果你添加一个新的 property，新property的改动不会触发视图更新。比如：

vm.b = "hello" //vue实例绑定一个新属性b
vm.b = "welcome" //改动属性b的值不会触发视图更新

除了数据 property，Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来。例如：

el属性

el属性指向vue实例绑定的DOM元素。
类型： string | Element
限制： 只在用 new 创建实例时生效。
用法： 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。

在实例挂载之后，元素可以用 vm.$el 访问。

	<script type="text/javascript">
		var val = {
   a: 1} //数据对象
		var vm = new Vue({
   
			el: '#vue_app',
			data: val //数据对象被加入到一个 Vue 实例中
		})
		vm.$el === document.getElementById('vue_app') // => true
		console.log(vm.$el === document.getElementById('vue_app'))
	</script>

computed属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
对于任何复杂逻辑，你都应当使用计算属性。
基本用法

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <title>vue小白</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <body>
        <div id='app'>
            <p>原始数据："{
   {msg}}"</p>
            <p>新数据："{
   {reveseMsg}}"</p>
        </div>
        <script>
            vm = new Vue(
                {
   
                    el: "#app",
                    data : {
   
                        msg : "hello , 这个是demo"
                    },
                    computed: {
   
                        // 计算属性的 getter
                        reveseMsg: function () {
   
                        // `this` 指向 vm 实例 
                            return this.msg.split('').reverse().join('') 
                        }
                    }
                }
            )
        </script>
    </body>
</html>

计算属性的 setter
计算属性默认只有 getter，不过在需要时你也可以提供一个 setter.

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <title>vue小白</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <body>
        <div id='app'>
            <p>全名："{
   {fullName}}"</p>
        </div>
        <script>
            vm = new Vue(
                {
   
                    el: "#app",
                    data : {
   
                        firstName : "Bruce",
                        lastName: "Xu"
                    },
                    computed: {
   
                            fullName: {
   
                                // getter
                                get: function () {
   
                                return this.firstName + ' ' + this.lastName
                                },
                                // setter
                                set: function (newValue) {
   
                                var names = newValue.split(' ')
                                this.firstName = names[0]
                                this.lastName = names[names.length - 1]
                                console.log("set被调用了")
                                }
                            }
                        }
                }
            )
            //给fullName赋值，运行 vm.fullName = 'Bruce Darcy' 时，setter 会被调用
            vm.fullName = "Bruce Darcy"
        </script>
    </body>
</html>

methods属性

函数必须在 Vue.js 中的 methods 属性下添加，类似于计算属性（computed）。
使用 Vue 的 methods 时，当调用 methods 定义的方法时，一定记得加上小括号 ()，不然输出的就是函数中的字符。
基本用法

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <title>vue小白</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <body>
        <div id='app'>
            <p>原始数据："{
   {msg}}"</p>
            <!-- 注意methods方法必须要加上() -->
            <p>新数据："{
   {reveseMsg()}}"</p> 
        </div></

最低0.47元/天解锁文章

达西布鲁斯

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端web之vue基础(6)

Vue基础vue.js是一套构建用户界面的渐进式框架。Vue 只关注视图层，采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。环境准备：安装npmbrew install npm安装cnpm在国内，使用淘宝的镜像会比较快安装一些包。npm install -g cnpm --registry=https://reg...
复制链接

扫一扫

专栏目录