google js cdn_作为后端如何快速掌握Vue.js？

最新推荐文章于 2021-03-12 07:34:26 发布

weixin_39642981

最新推荐文章于 2021-03-12 07:34:26 发布

阅读量61

点赞数

文章标签： google js cdn html使用js的变量 JS 打印 data数据 js中怎么获取某个属性的值 js如何给div设置点击事件 js对象赋值只保留存在的属性

如果说是JQuery是手工作坊，那么Vue.js就像是一座工厂，虽然Vue.js做的任何事情JQuery都可以做，但无论是代码量还是流程规范性都是前者较优。看完本篇，你将会掌握基本的Vue.js知识。

准备

首先，以下几点希望你已经知道或者做到了:

你会用html+css+javascript 写一些网页
你知道什么是DOM和BOM(Browser Object Model)
你知道Vue.js是一个框架而不是一个新语言
你会用百度或者Google其中之一去查找答案

接着，我会围绕以下几个Vue.js的基本（核心）使用方法逐个做测试和使用说明：

新建vue对象
数据绑定
事件绑定
表单控件绑定

最后，根据上面的知识点结合起来写出我们的第一个vuejs前端页面

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

新建Vue实例

在Vue.html中插入一个id为firstVue的<div>

<div id="firstVue"></div>

在Vue.html中插入下面js代码:

<script type="text/javascript">
    var myVue = new Vue({
        el:"#firstVue"
    })
</script>

然后整个代码看起来是这样的:

<!DOCTYPE html>
<html>
<head>
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id="firstVue">
    </div>
</body>
<script type="text/javascript">
    var myVue = new Vue({
        el: "#firstVue"
    })
</script>
</html>

解释一下代码

js变量 myVue 就是Vue创建的一个对象，可以理解成把<div id="firstVue></div>和这个标签里面包含的所有DOM都实例化成了一个JS对象，这个对象就是myVue

el是Vue的保留字，用来指定实例化的DOM的ID号, #firstVue这句话就是标签选择器，告诉Vue要实例化ID=“firstVue”的这个标签。

至此，Vue.js框架在html页面的引入工作完成，但是如果我们访问这个页面并不能看到任何效果,一篇空白

{{ my_data }}

变成这样

<div id="firstVue">
    {{my_data}}
</div>

这个双大括号的语法叫做mustache 语法，大括号里面的是作为变量形式出现的。

然后在创建 vue实例的代码中加入下面数据声明:

data:{
    my_data: "test"
}

整个代码看起来向下面这样:

<!DOCTYPE html>
<html>
<head>
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id="firstVue">
    {{my_data}}
    </div>
</body>
<script type="text/javascript">
    var myVue = new Vue({
        el:"#firstVue",
        data:{
            my_data: "test"
        }
    })
</script>
</html>

data参数用来绑定VUE实例的数据变量，每个不同变量之间用逗号分隔，上面我们绑定了自定义变量my_data，并赋初值'test'

完成数据绑定工作，<div>标签里的{{myData}}数据会随着myVue实例里的myData数据的变动而变动，浏览器查看当前页面,会出现'test'字符串，说明数据绑定成功

这是在HTML标签内部的数据绑定，那么如果想绑定某个HTML标签的属性值，就要用到v-bind:属性了，比如我想绑定一个标签是否可见的属性(hidden)，那么就应该这么写:

<div id="firstVue" v-bind:hidden="my_hidden">{{my_data}}</div>

v-bind:后面写想要绑定的属性，my_hidden也不需要用两个大括号括起来了，直接写就可以了，然后在VUE实例中声明这个绑定数据

var myVue = new Vue({
    el:'#firstVue',
    data:{
        my_data: "test",
        my_hidden: "hidden"
    }
})

这时候再浏览这个网页,又变成了空白，但是F12查看源代码，发现其实是div标签的hidden属性被激活了

当然，v-bind:不仅可以绑定hidden属性，disabled属性，style属性, color属性，凡是标签有的属性，都可以通过这个方法进行绑定

v-bind由于经常会用到，所以也可以缩写成冒号:，比如上面的<div>标签就完全可以这样写

<div id="firstVue" :hidden="my_hidden">{{my_data}}</div>

这是和v-bind:hidden="my_hidden"完全等价的一种写法

至此，Vue.js两种绑定数据的方法都写完并进行了测试

事件绑定

v-bind:是用来绑定数据的，v-on:则是用来绑定事件的，比如我要绑定一个<button>的 click事件就这么写

<button v-on:click="clickButton()">Click Me</button>

当然这里的click可以换成任意一个html事件，比如load , doubleclick , mouseon , mousedown这些，不过click肯定是我们最常用的

将click动作绑定到clickButton()函数之后就需要实现这个函数了,我们要在之前的vue实例中加入新字段methods

var myVue = new Vue({
el:'#firstVue',
data:{
my_data: "test",
my_hidden: "hidden"
    },
methods:{
clickButton:function(){
this.my_data = "Wow! I'm changed!"
        }
    }
})

我们在methods关键字里面定义了clickButton方法，并在方法内改变了之前定义的my_data变量的值

这里涉及到如何在vue实例中引用data字段的变量，如上所示，需要加this后面直接写要引用的变量就可以了

如果不加this，系统会默认你想引用的是一个全局变量，可是这里我们需要引用的是这个vue实例里的局部变量

现在整体代码和之前有些变化，看起来是这样的：

<!DOCTYPE html>
<html>
<head>
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id="firstVue">
        <button v-on:click="clickButton">Click Me</button>
        <p>{{my_data}}</p>
    </div>
</body>
<script type="text/javascript">
var myVue = new Vue({
    el:'#firstVue',
    data:{
        my_data: "test",
        my_hidden: "hidden"
    },
    methods:{
        clickButton:function(){
            this.my_data = "Wow! I'm changed!"
        }
    }
})
</script>
</html>

好了，运行一下，点击Click Me的时候"test"就会变成"Wow! I'm changed!"，这是因为变量my_data的改变。

另外，v-on:语法同样有一个缩写@，比如v-on:click="clickButton"就等价于@click="clickButton"

表单控件绑定

之前有说Vue这个框架是单向数据传输的，就是从vue实例传送数据到DOM ，那么我们如何从DOM中实时获取用户输入的数据赋值给vue实例呢

这用到了Vue.js提供给用户的一个语法糖 v-model ,这个语法糖通过两步实现了数据的反向传递，也就是从DOM传送给vue实例数据。

下面说的原理看不懂可以跳过，不会影响后续阅读

v-model 通过两步实现了数据反向传递
第一步，绑定了DOM标签的 input事件(比如叫tapInput())
第二步，当用户进行输入时候，触发 tapInput()函数， tapInput()函数内部读取此DOM标签的Value值，赋值给vue实例
通过以上两步，v-model语法糖实现了vue数据的反向传输

好，直接写一个例子吧

<!DOCTYPE html>
<html>
<head>
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id="firstVue">
        <input type="text" v-model="my_data" />
        <button v-on:click="clickButton">Click Me</button>
        <p>{{my_data}}</p>
    </div>
</body>
<script type="text/javascript">
    var myVue = new Vue({
        el:'#firstVue',
        data:{
            my_data: "test",
            my_hidden: "hidden"
        },
        methods:{
            clickButton:function(){
                this.my_data = "Wow! I'm changed!"
            }
        }
    })
</script>
</html>

可以发现，我们增加了一个<input>标签，并且用v-model语法绑定了之前定义的变量my_data

这个时候，当我们在<input>输入框输入值的时候，v-model会实时将最新值(value)赋值给vue实例的my_data变量，而my_data变量又将实时展现在<p>标签中

这样我们看起来实现了这么一个数据流:

DOM1(input标签)——>VUE——>DOM2(p标签)

先从用户输入的DOM1获取输入保存在VUE实例，用从VUE实例里拿到数据输出到DOM2

运行这个页面，发现<p>标签中的内容会随着<input>标签实时的变化，说明我们利用v-model语法变相实现了数据的双向传递

总结

看看我们学到了什么

用 new Vue({})新建vue实例
使用 v-bind:和{{}}双大括号语法在html中绑定变量
使用 v-on: 和 @ 语法绑定函数到标签的事件
使用 v-model: 语法使用户的页面输入反向传递回vue实例变量

现在简单完善一下上面的代码，做成一个计数器程序，用户可以在输入框输入任意数字，点击按钮进行总数累加

下面是对刚才代码进行了一些小的改动，相信你一定可以看明白的

<!DOCTYPE html>
<html>
<head>
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id="firstVue">
        <input type="number" v-model.number="my_step" />
        <button v-on:click="clickButton">Add</button>
        <p>{{my_total}}</p>
    </div>
</body>
<script type="text/javascript">
    var myVue = new Vue({
        el:'#firstVue',
        data:{
            my_step: 1,
            my_total: 0
        },
        methods:{
            clickButton:function(){
                this.my_total = this.my_total + this.my_step
            }
        }
    })
</script>
</html>

上面v-model.number后面的这个.number的意思是说在返回my_step值的时候自动转换成integer类型，因为默认是string类型，所以要多这么一句。

来源：公众号

作者：动力节点Java资源库

原文：作为后端如何快速掌握Vue.js？（附最新教程）

附带最新的Vue.js教程。

课程目标：通过本课程的学习，让大家掌握Vue.js及在项目中的使用。

适用人群：具有一定web开发基础的开发人员。

课程概述：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。本课程将一步一步地让大家快速地掌握Vue.js这样一个前端核心框架，以适应公司的开发需要。

环境参数：Visual Studio Code、FireFox

第一章 Vue.js概述

- 1-1 Vuejs概述_什么是Vuejs
- 1-2 Vuejs概述_为什么要学习Vuejs
- 1-3 Vuejs概述_Vuejs版本说明
- 1-4 前端开发中的MVC思想
- 1-5 Vuejs框架对于前端MVVM思想的支持

第二章 Vue.js基础语法

- 2-1 Vuejs第一个程序_HelloWorld
- 2-2 通过第一个案例分析MVVM思想
- 2-3 v-cloak属性的使用
- 2-4 为页面渲染值的方式
- 2-5 插值表达式对于内容渲染的优势
- 2-6 v-text和v-html在用法上的区别
- 2-7 v-bind绑定属性
- 2-8 v-bind在开发中的使用方式
- 2-9 使用v-on指令触发事件
- 2-10 使用事件修改符stop阻止事件的冒泡
- 2-11 使用事件修改符prevent阻止默认行为
- 2-12 使用事件修改符capture捕获触发事件机制
- 2-13 使用事件修改符self阻止自身冒泡行为
- 2-14 使用事件修改符once只触发一次事件
- 2-15 数据绑定方式的方向问题_使用模型去渲染视图
- 2-16 数据绑定方式的方向问题_什么是双向数据绑定
- 2-17 双向数据绑定方式的实现_v-model的使用
- 2-18 双向数据绑定方式的实现简单的计算器1
- 2-19 双向数据绑定方式的实现简单的计算器2
- 2-20 双向数据绑定方式的实现简单的计算器3
- 2-21 页面元素传统样式的表达
- 2-22 使用vuejs来控制样式1
- 2-23 使用vuejs来控制样式2
- 2-24 对于style属性样式的补充
- 2-25 v-for指令的应用_遍历字符串数组
- 2-26 v-for指令的应用_遍历对象数组
- 2-27 v-for指令的应用_遍历对象属性和属性值
- 2-28 v-for指令的应用_遍历整型数值
- 2-29 v-for指令使用时的注意事项_对于key属性的添加
- 2-30 v-if和v-for的使用和区别

第三章 Vue.js综合案例

- 3-1 综合案例_需求分析
- 3-2 综合案例_页面基本元素搭建1
- 3-3 综合案例_页面基本元素搭建2
- 3-4 综合案例_通过v-for展现学生信息列表
- 3-5 综合案例_通过双向数据绑定实现学员的添加操作
- 3-6 综合案例_实现学员删除操作
- 3-7 综合案例_按照学员名字进行模糊搜索

如果你喜欢别忘了点个赞哦~

weixin_39642981

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
google js cdn_作为后端如何快速掌握Vue.js？

如果说是JQuery是手工作坊，那么Vue.js就像是一座工厂，虽然Vue.js做的任何事情JQuery都可以做，但无论是代码量还是流程规范性都是前者较优。看完本篇，你将会掌握基本的Vue.js知识。准备首先，以下几点希望你已经知道或者做到了:你会用html+css+javascript 写一些网页你知道什么是DOM和BOM(Browser Object Model)你知道Vue.js是一个框架而...
复制链接

扫一扫

google js cdn_作为后端如何快速掌握Vue.js？

准备

表单控件绑定

总结

“相关推荐”对你有帮助么？