VueJS简明教程

最新推荐文章于 2023-12-07 21:21:30 发布

小目标的力量

最新推荐文章于 2023-12-07 21:21:30 发布

阅读量416

点赞数

分类专栏：框架文章标签： vue

本文链接：https://blog.csdn.net/u010412833/article/details/112780245

版权

Vue.js是一个框架而不是一个新语言、

Vue.js的官方中文教程其实是一个比较系统的教程，本文是一个快速入门教程，让之前有过前端开发经验的人可以快速使用vue干活。

就像开车，不是非要知道发动机的工作原理才能上路的，甚至你可能一辈子也不用知道。

本文的主要内容有：

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

一、新建vue对象

1.引用vue.js

在桌面建立一个 Vue.html文件, 然后引入 vue.js的CDN地址 https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js

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

2.新建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页面的引入工作完成，但是如果我们访问这个页面并不能看到任何效果,一篇空白

二、数据绑定

VUE这个框架的数据流向是单向的，所以数据绑定后的数据流向是从vue实例——>DOM文档的

我们给上一步的<div>标签添加下面一句话

{
  { 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>

最低0.47元/天解锁文章

小目标的力量

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VueJS简明教程

Vue.js是一个框架而不是一个新语言、Vue.js的官方中文教程其实是一个比较系统的教程，本文是一个快速入门教程，让之前有过前端开发经验的人可以快速使用vue干活。就像开车，不是非要知道发动机的工作原理才能上路的，甚至你可能一辈子也不用知道。本文的主要内容有：新建vue对象数据绑定事件绑定表单控件绑定组件一、新建vue对象1.引用vue.js在桌面建立一个 Vue.html文件, 然后引入 vue.js的CDN地址https://cdn.jsdelivr.net.
复制链接

扫一扫