Vue学习开始走向VUE开发2---第一个Vue程序

最新推荐文章于 2022-07-20 18:00:56 发布

jifukui

最新推荐文章于 2022-07-20 18:00:56 发布

阅读量109

点赞数

分类专栏： Vue开发文章标签： Vue

本文链接：https://blog.csdn.net/jifukui/article/details/99582273

版权

Vue开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Vue一个比较大的特色是支持数据的双向绑定，现在我们就一这个特性来开始第一个Vue程序带大家走进Vue的世界。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="test">
    <div v-text="name">Name is </div>
    <div>Local Name is: </div>
    <input
    v-model="name"
    />
</div>
 
<script>
var vm = new Vue({  
        el: '#test',  
        data: {  
            name:"hahahhaha"
        },  
    });  
</script>
</body>
</html>

这个程序开起来和一般的HTML没有太大的区别有引入的脚本文件，在<script>标签中创建了一个变量vm为初始化的Vue对象，对象中有两个键el和data,其中el键表示的是这个对象挂载在这个DOM中在这里是将此挂载在id为test的标签，data为对象的数据部分。

当使用浏览器打开此文件时将会得到如下图所示的内容

打开浏览器的控制台数据vm.$data.name将会得到值hahahhaha。在控制台中修改vm.$data.name="xxxx"将会看见文本框和文本框上方的div的标签中的内容变为和设置的值一致。

修改文本框中的内容，会发现文本框上方的div的内容也会和文本框中的内容保持一直，这就是数据绑定只要数据发生改变，使用此数据的地方上的数值都将进行更新。

jifukui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习开始走向VUE开发2---第一个Vue程序

Vue一个比较大的特色是支持数据的双向绑定，现在我们就一这个特性来开始第一个Vue程序带大家走进Vue的世界。<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue</title><script src="https://cdn.bootcs...
复制链接

扫一扫