当前位置:首页 > 前端技术 > vue.js用法和特性详解

vue.js用法和特性详解

2022年11月07日 09:19:35前端技术8

  前  言

最近用Vue.js做了一个数据查询平台,还做了一个拼图游戏,突然深深的感到了vue的强大。

Vue.js是一套构建用户界面(user interface)的渐进式框架。与其他重量级框架不同的是,Vue 从根本上采用最小成本、渐进增量(incrementally adoptable)的设计。Vue 的核心库只专注于视图层,并且很容易与其他第三方库或现有项目集成。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供有力驱动。

Vue.js目前已经更新到2.x,功能和语法上有一定升级和修改,本文首先介绍基础内容。

之后的内容会陆续更新。



  1、新手指南

 

  vue的使用非常简单,下载vue.js或vue.min.js直接导入即可使用。 

 

  2、vue初步入门

 

2.1声明式渲染

 

  Vue.js 的核心是,可以采用简洁的模板语法来声明式的将数据渲染为 DOM:

  

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

  这样就会输入:Hello Vue!

  我们已经生成了第一个 Vue 应用程序!这看起来和渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被关联在一起,所有的数据和 DOM 都是响应式的。我们如何对这一切清晰领会?只需打开你的浏览器的 JavaScript 控制台(现在,就在当前页面打开),然后设置 app.message 的值,你将看到上面的示例所渲染的 DOM 元素会相应地更新。

  除了文本插值(text interpolation),我们还可以采用这样的方式绑定 DOM 元素属性:

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停此处几秒,
    可以看到此处动态绑定的 title!
  </span>
</div>
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

  鼠标悬停几秒后,就可以看到动态的提示。

  这里我们遇到一些新内容。你看到的 v-bind 属性被称为指令。指令带有前缀 v-,表示是由 Vue 提供的专用属性。可能你已经猜到了,它们会在渲染的 DOM 上产生专门的响应式行为。简而言之,这里该指令的作用就是:“将此元素的title 属性与 Vue 实例的 message 属性保持关联更新”。

  如果你再次打开浏览器的 JavaScript 控制台,并输入 app2.message = '一些新的 message',就会再次看到,绑定了title 属性的 HTML 已经进行了更新。

 

2.1条件与循环

   

  控制切换一个元素的显示也相当简单:

<div id="app-3">
  <p v-if="seen">现在你可以看到我</p>
</div>
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

  

  继续在控制台输入 app3.seen = false,你应该会看到 span 消失。

  这个示例表明,我们不只是可以将数据绑定到文本和属性,也可以将数据绑定到 DOM 结构。而且,Vue 也提供一个强大的过渡效果系统,可以在 Vue 插入/更新/删除元素时,自动使用过渡效果

  还有其它一些指令,每个都具有各自不同的特殊功能。例如,v-for 指令,可以使用数组中的数据来展示一个项目列表:

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '创建激动人心的代码' }
    ]
  }
})

 

3 、vue实例

  

  每个 Vue 应用程序都是通过 Vue 函数创建出一个新的 Vue 实例开始的:

var vm = new Vue({
  // 选项
})

  尽管没有完全遵循 MVVM 模式,但是 Vue 的设计仍然受到了它的启发。作为约定,通常我们使用变量 vm (ViewModel 的简称) 来表示 Vue 实例。

 

3.1data 和 methods

 

  在创建 Vue 实例时,会将所有在 data 对象中找到的属性,都添加到 Vue 的响应式系统中。每当这些属性的值发生变化时,视图都会“及时响应”,并更新相应的新值。

// data 对象
var data = { a: 1 }
// 此对象将会添加到 Vue 实例上
var vm = new Vue({
  data: data
})
// 这里引用了同一个对象!
vm.a === data.a // => true
// 设置实例上的属性,
// 也会影响原始数据
vm.a = 2
data.a // => 2
// ... 反之亦然
data.a = 3
vm.a // => 3

  每当 data 对象发生变化,都会触发视图重新渲染。值得注意的是,如果实例已经创建,那么只有那些 data 中的原本就已经存在的属性,才是响应式的。也就是说,如果在实例创建之后,添加一个新的属性,例如:

vm.b = 'hi'

  然后,修改 b 不会触发任何视图更新。如果你已经提前知道,之后将会用到一个开始是空的或不存在的属性,你就需要预先设置一些初始值。例如:

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

  除了 data 属性, Vue 实例还暴露了一些有用的实例属性和方法。这些属性与方法都具有前缀 $,以便与用户定义(user-defined)的属性有所区分。例如:

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 此回调函数将在 `vm.a` 改变后调用
})

 

3.2vue实例的声明周期

 

  vue实例的声明周期是一个很重要的概念,理解之后可以通过它实现很多功能。

  看下这段代码。

  

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>

        <div id="container">我的声明周期,大家看吧!</div>
        
    </body>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
    <script type="text/javascript" src="js/vue.js" ></script>
    <script type="text/javascript">

        //以下代码时显示vm整个生命周期的流程
        var vm = new Vue({
            el: "#container",
            data: {
                test : 'hello world'
            },
            beforeCreate: function(){
                console.log(this);
                showData('创建vue实例前',this);
            },
            created: function(){
                showData('创建vue实例后',this);
            },
            beforeMount:function(){
                showData('挂载到dom前',this);
            },
            mounted: function(){
                showData('挂载到dom后',this);
            },
            beforeUpdate:function(){
                showData('数据变化更新前',this);
            },
            updated:function(){
                showData('数据变化更新后',this);
            },
            beforeDestroy:function(){
                vm.test ="3333";
                showData('vue实例销毁前',this);
            },
            destroyed:function(){
                showData('vue实例销毁后',this);
            }
        
        });
        function realDom(){
            console.log('真实dom结构:' + document.getElementById('container').innerHTML);
        }
        function showData(process,obj){
            console.log(process);
            console.log('data 数据:' + obj.test)
            console.log('挂载的对象:')
            console.log(obj.$el)
            realDom();
            console.log('------------------')
            console.log('------------------')
        }
        
    </script>
</html>

 

 看一下效果图

 

vue.js用法和特性详解 _ JavaClub全栈架构师技术笔记

  

  通过控制台的打印效果可以看出来,实例化 vue 对象大致分为 创建vue实例、挂载到dom、数据变化更新、vue实例销毁 4个阶段,,注意每个阶段都有对应的钩子,我们可以通过对这些钩子进行操作,达成一些功能。虽然初学者用不太上,但是提前了解一下还是好的,到时候碰到实际功能要能想得到生命周期的钩子。

 

  结尾

 今天就先简单介绍一下,之后会陆续更新接下来的内容。

 下一期会为大家介绍一下我用vue做的拼图游戏和一个数据操作平台,希望大家能关注一下。

作者:听醒木一声收
来源链接:https://www.cnblogs.com/lihaohai/p/7665796.html

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/68275.html

标签: vue
分享给朋友:

“vue.js用法和特性详解” 的相关文章

前端每日一撸|vue回退(router.back)如何不刷新页面?

解决方案: 使用Navigation 组件解决 安装Navigation npm install vue-navigation 使用方法 在main.js中引用并进行初始化 import...

【Vue】详解Vue组件系统

【Vue】详解Vue组件系统

本文提纲:1.Vue渲染的两大基础方式 2.组件的局部注册和全局注册 3. Vue中的props数据流 4.Vue的自定义事件 5. Slot的使用   Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根...

vue全套教程(实操)

vue全套教程(实操)

  Vue (读音 /vjuː/,类似于 View) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具...

vue

vue

用vue-cli 自动构建的目录里面  (环境变量及其基本变量的配置) 1...

vue3的deep穿透样式

新版的写法: &:deep(input) { text-align: right; color: #555555; } 旧版的写法 /deep/ input{ } >>> input{ }...

vue原理简介

vue原理简介

写vue也有一段时间了,对vue的底层原理虽然有一些了解,这里总结一下。 vue.js中有两个核心功能:响应式数据绑定,组件系统。主流的mvc框架都实现了单向数据绑定,而双向绑定无非是在单向绑定基础上给可输入元素添加了change事件,从而动态地修改model和view。...

vue 项目实战 (vue全家桶之--- vuex)

老规矩先安装 npm install vuex --save 在看下面内容之前 你应该大概的看了一边vuex官方的文档对vuex有个大概对了解 首先 vuex 是什么? vuex 是属于vue中的什么,它在项目中扮演着一个什么样的角色,起...

vue 实现同步

vue 实现同步

我们在调用接口的时候,使用的是异步方式。很多时候我们想用接口返回的数据时,得不到想要的数据。因为这时接口还没有调用完。使用的异步方式,所以我们需要让接口进行同步请求。 所以我们需要再函数前面 加上 async ,在接口前面加上 await,也就是需要同步的...

vue-router中children使用方法

vue-router中children使用方法

children的使用场景:比如页面左侧显示菜单,右侧显示不同菜单下的内容,类似如下element网站,那么右侧部分的内容就是当前页面的children   存在如下场景,点击导航一跳转至页面1,导航二跳转页面2,且页面1中存在子页面  路由...

Vue详细知识讲解

Vue详细知识讲解

目录 ️1、Vue和其他两大框架的区别 ️2、Vue是什么 ️3、MVVM ️4、Vue指令 ️4.️1 v-text ️4.️2 v-html ️4.️2.️1 v-html指令 和 v-text指...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。