分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

Vue.js 基础学习

发布时间:2023-09-06 01:08责任编辑:胡小海关键词:js

今天我开始了Vue.js 的学习。

那么什么是Vue.js 呢?

Vue.js是一套开发Web页面的JavaScript脚本框架。听起来感觉很难,不过据说,Vue.js是Web-Javascript脚本框架中最容易上手的框架。所以我便选择了先来学习这个。

要学习Vue.js首先就要获取库文件了,在网上有很多地方可以找到,我是在bootcdn上找到的

接下来我们通过Vue输出一串Hello World !

首先引入vue.

 ???<script src="https://cdn.bootcss.com/vue/2.4.1/vue.js"></script>

然后在body中创建一个div 并设置id

<div id="myApp"> ???????{{ message }} ???</div>

在文档中一旦出现{{ }}这种两对花括号时,vue就开始解析了,会把它当成类似js的语句来解释

接下来是js代码

<script> ???var myApp = new Vue({ ???????el : ‘#myApp‘ , ???????data : { ???????????message : "hello world!" ???????} ???})</script>

解释一下,上面js代码的含义 

new 一个Vue 其中el 是element的意思,用来绑定对象,即生成的Vue对象会产生一个域,这个域作用在那个元素上的 ,此处就是作用在id为myApp的元素上的

data 底下所有的属性都是绑定在这个myApp下的。

vue中的内容是直接和内存中的绑定的,如果你在网页的审查元素中书写 myApp.message = "Hello Vue" 那么此时页面内容也会变成Hello Vue

这样我们就实现了Hello world 了。

Vue.js 基础学习

原文地址:http://www.cnblogs.com/huzhuo/p/7465040.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved