vue.js前端构造技术_vue.js前端开发技术

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

提示：这里可以添加本文要记录的大概内容：

作为一名 Web 前端开发工程师，其主要职能就是将网站的界面更好地呈现给用户。随着互联网技术的爆发，越来越多的前端开发技术如雨后春笋般出现，在众多的 JavaScript 前端框架中，Vue.is 无疑是最出色的(曾经一项针对 JavaScript 的调查表明，Vue.is 有着 89%的开发者满意度)。相比其他前端框架，如 Angular 和 React，Vue.is 框架在实现上更容易，程序员上手更快。使用 Vue.is 技术不仅提高了开发的效率，也改善了开发的体验，因此，熟练掌握Vue.is 前端框架已经成为 Web 前端开发工程师的必备技能。本章将介绍 Vue.is 有关的一些概念和技术，并帮助读者了解它们背后的工作原理，同时构建第一个 Vue.is 应用。

提示：以下是本篇文章正文内容，下面案例可供参考

一、vue.js是什么？

Vue.js诞生于2014年，由尤雨溪开发，是一套基于前后端分离模式、用于构建用户界面的渐进式框架，它只关注视图层的逻辑、采用自底向上、增量式开发的设计。

1.优点

轻量级: Vue简单﹑直接，所以Vue使用起来更加友好。
双向数据绑定: 数据驱动视图，视图也可以驱动数据。
组件化开发：vue.js提供了非常方便且高效的组件管理来进行加载公用的模块。
指令: 指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为。
插件: 插件用于对vue框架功能进行扩展。

2.基本概念

Vue.js的开发模式：MVVM
MVVM(Model-View-ViewModel)模式包括3个核心部分。
-1、Model(模型)：数据层，主要是从数据库取出的经过特定出来之后的数据。
2、View(视图)：视图层，即HTML文档的DOM元素，也就是我们看到的页面。
3、ViewModel(视图模型)：用于连接视图与数据的数据模型，负责监听Model或者View的修改。

3.常用的开发工具

谷歌浏览器+VS Code+命令控制台预览效果，调试代码

编写代码

4.实现第一个vue.js案例

1.引入Vue.js核心文件.
2.创建Vue实例，绑定DOM元素，定义数据。
3.使用插值表达式{ {}}绑定数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button v-on:click="showinfo">显示</button>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                date: new Date()
            }
        })
    </script>
</body>
</html>

二、基础特性

1.data数据对象

data概述：

data是Vue实例的数据对象，Vue.js会将data对象的属性转换为getter/setter，从而让data的属性能够响应数据变化。

var app= new Vue({data:{数据}})，Vue通过这种方式监听了data内的数据修改，因此，只要data内的数据进行变动，视图层就会同步自动刷新。

data定义的数据通过插值语法(“{ {}}”)绑定到DOM节点，data数据对象有以下两种写法：

对象（Object）的形式

下面展示一些代码

<div id="app">{
  {content}}</div>

    <script>

        var app = new Vue({

            el: "#app",

            data: {

                content: "Mustache表达式通过data为对象获取content的值"

            }

        })

    </script>

函数（Function）的形式

下面展示一些代码

<div id="app">{
  {content}}</div>

    <script>

        var app = new Vue({

            el: "#app",

            // 这是下面function的简写形式

            data(){

                       return {

                            name:'张三',

                            age:18

                    }

              },

             // 另一种写法

            // data:function() {

            //     return {

            //         name: '张三',

            //         age: 18,

            //         sex: '男'

            //     }

            // },

        })

    </script>

2.methods方法

概述：

methods用来定义Vue实例中的方法，可以通过Vue实例直接访问这些方法。在定义的方法中，this对象指向Vue实例本身。通过methods定义的方法还可以作为页面中的事件处理方法使用，一旦事件被触发，即执行相应的方法进行处理。

在methods方法中访问 data 的数据，可以直接通过 this.属性名的形式来访问，this表示Vue实例

下面展示一些 内联代码片。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    1、第一步   引入vue.js

    <script src="../js/vue.js"></script>

</head>



<body>

   2、第二步

   <div id="app">

        <div>

            {
  {msg}}

            <p>tip:点击按钮把“旧文本”字样修改为“新文本”</p>

            <!-- v-on  可以简写为  @ -->

            <button v-on:click="btnClick">点击</button>



            <!-- 简写形式 -->

            <!-- <button @click="btnClick">点击</button> -->

        </div>

    </div>



    <script>

       3、第三步

        var app = new Vue({

            el: "#app",

            data: {

                msg: "旧文本"

            },

           // 页面的点击事件都需要放到  methods 里面

            methods:{

                btnClick(){

                    this.msg="新文本"

                }

            }

        })

    </script>

</body>

</html>

3.常用指令

概述：

指令(Directives)是Vue.js模板中最常用的一项功能，HTML元素仅仅是界面的呈现，若还需要和Vue实例进行交互，就需要用到Vue.js的指令。在Vue.js中，指令必须写在HTML元素中，以前缀v-开头，后缀用来区分指令的功能，前缀和后缀通过短横线连接，它是Vue实例数据与用户界面之间的纽带。

Vue.js内置了很多指令，帮助开发者快速完成常见的DOM操作，譬如显示与隐藏、循环渲染等等，需要先了解一些常用的指令，如v-text、v-html、v-cloak、v-bind、v-on等。

用v-model指令实现一下实训
选择你喜欢的爱好
效果图如下
在这里插入图片描述
代码如下：
下面展示一些 内联代码片。

// <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue (1).js"></script>
</head>
<body>
    <div id="app">
        <input type="checkbox" value="唱歌" v-model="hobbies">唱歌
        <input type="checkbox" value="跳舞" v-model="hobbies">跳舞
        <input type="checkbox" value="游泳" v-model="hobbies">游泳
        <input type="checkbox" value="看书" v-model="hobbies">看书
        <h2>你选择的爱好是：{
   {
   hobbies}}</h2>
    </div>
    <script>
        var vm = new Vue({
   
            el:'#app',
            data:{
   
                hobbies:[]
            }
        });
        </script>
</body>
</html>

三.事件修饰符

1.stop 阻止事件冒泡

首先解释一下什么是事件冒泡，当事件触发时，会像气泡一样，从DOM树的底层，一层一层往上面传递，一直传递到DOM树的根节点，如果子元素和父级元素触发的是相同事件，那么当子元素被触发时父元素也会被触发，这就是事件的冒泡机制。
使用.stop修饰符阻止事件向上冒泡，代码如下：
下面展示一些 内联代码片。

<diiv id="div1" @click="div Handler">
        <input type="button" value="点击"  @click.stop="btnHandler" />
</div>

2.prevent 阻止默认事件

在实际开发中，若的默认事件会与其他事件冲突，则可以使用.prevent修饰符阻止它的默认事件。

< a href="http://baidu.com" @click.prevent="lickClick">百度一下</a>

3 .capture 事件捕获模式

事件捕获的执行顺序是由外部结构向内部结构执行，恰好与事件的冒泡顺序相反。

<div id="div1" @click.prevent="lickHandler">
         <input type="button" value="点击"  @click="lickHandler"/>
 </div>

4.self 自身触发事件

.self修饰符用来实现只有事件是元素本身触发时才回调，除此之外都不会被触发。

<div class="inner" @click.prevent="lickHandler">
         <input type="button" value="点击"  @click="lickHandler"/>
 </div>

5.once 事件只触发一次

.once修饰符用来阻止事件被多次触发，只触发一次。

<input type="button" value="点击"   @click.once="lickHandler"/>

总结

以上讲了vue.js前端构造技术一些基本内容，本文仅仅简单介绍了vue.js前端构造技术的使用和一些基本用法，而vue.js前端构造技术提供了大量能文技术信息使我们快速便捷地处理代码数据的用途和方法。

上一篇：【优质书籍推荐】Vue.js+Node.js全栈开发实战

下一篇：《Vue.js前端开发实战》课后习题答案

版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/3218.html