第一课 Vue环境准备

news/2024/10/6 23:52:17 标签: vue.js, 前端, javascript

Vue环境准备

VueJS是原华人谷歌工程师尤雨溪所编写的一款MVC前端JS框架,和Angular类似,轻量适合开发小型项目。

1) Vue官网地址

https://cn.vuejs.org/

2)项目文件Vue.JS

在进行项目讲解之前需要在网页中引入VueJS的主文件,地址如下:

<script src="https://unpkg.com/vue"></script>

3)版本选择

Vue2.0较1.0作了较多的改变,很多语法都不太一样了,目前版本是2.x版本(日期:2017/09/07)。

4)调用Vue

静态页面中Vue引入类似于JQuery,将Vue放置进网页即可,自己写的Vue代码要放在引用的JS框架文件之后。

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
    
</body>
</html>
<script>
// 自己的Vue代码块
</script>

5)浏览器支持

目前几乎所有新的框架都对旧版本(IE9之前)的浏览器不再支持,选择本框架前请谨慎。

初始化Vue项目环境

1)示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
    <div id="app"></div> 
</body>
</html>
<script>
// 自己的Vue代码块
new Vue({
    el: '#app'
})
</script>

2)确定主环境

在编写Vue的时候,需要确定一个主环境,自己的代码都写在主环境下

以上通过构造函数的形式创建了一个Vue的作用域环境,并绑定了一个父节点ID为’#app’的DOM元素节点。

el属性其实就是类似以下示例的实现:

el: '#app' == document.querySelect('#app');

初始化主环境的多种实现方式

1)el绑定主环境

new Vue({
    el: '#app'
})

2)$mount手动挂载

new Vue({

}).$mount('#app');

3)实例$mount挂载

let app = new Vue({

});

app.$mount('#app');

创建第一个Vue应用

<div id="app">{{test}}</div>
<script>
new Vue({
    el: '#app',
    data: {
        test: 'Hello World !'
    }
})
</script>

http://www.niftyadmin.cn/n/5692306.html

相关文章

菜鸟笔记004 获取目标对象的渐变颜色值

上一篇笔记讲到如何获取不变对象的颜色值,我们再次深入讲解一下获取颜色类型中的渐变颜色值。 #target illustratorfunction main() {try {var doc = app.activeDocument;if (!doc.selection.length) {alert("请先在Illustrator中选择一个或多个对象。");return;}v…

A_H_README_TO_RECOVER勒索恢复---惜分飞

有客户mysql数据库被黑(业务数据库被删除)&#xff0c;创建了一个A_H_README_TO_RECOVER库 [rootwww.xifenfei.com ~]# mysql -uroot -pxxxxx Warning: Using a password on the command line interface can be insecure. Welcome to the MySQL monitor. Commands end with ; …

【BUG】P-tuningv2微调ChatGLM2-6B时所踩的坑

0.前言 P-tuning v2的实验在网上一抓一大把&#xff0c;这里就说一下我在微调过程中遇到的有些bug&#xff0c;踩过的一些坑&#xff0c;在网上找了很久都没有一些好的解决方案&#xff0c;在这里记录一下。 1.下载预训练模型 在官方给出的教程中&#xff0c;并不需要预先将模…

history的pushState/replaceState理解

在html5中 推出了history这种新的语法 其中 我们可以利用他来完成不同网页之间的跳转 并且通过不同的api调用可以完成同一个需求 1.pushState 该方法除了可以帮助我们完成不同url之间的跳转以外 还支持网页的前进和后退 原理&#xff1a;你可以将网页的前进和后退操作看待成两…

使用 Python 遍历文件夹

要解决这个问题&#xff0c;使用 Python 的标准库可以很好地完成。我们要做的是遍历目录树&#xff0c;找到所有的 text 文件&#xff0c;读取内容&#xff0c;处理空行和空格&#xff0c;并将处理后的内容合并到一个新的文件中。 整体思路&#xff1a; 遍历子目录&#xff1…

系统架构设计师论文《论NoSQL数据库技术及其应用》精选试读

论文真题 随着互联网web2.0网站的兴起&#xff0c;传统关系数据库在应对web2.0 网站&#xff0c;特别是超大规模和高并发的web2.0纯动态SNS网站上已经显得力不从心&#xff0c;暴露了很多难以克服的问题&#xff0c;而非关系型的数据库则由于其本身的特点得到了非常迅速的发展…

现代身份和访问管理 IAM 如何降低风险

您的公司是否仍在使用 1998 年时的身份管理系统&#xff1f;仅凭用户名和密码就能登录本地网络并访问几乎所有资源吗&#xff1f; 虽然大多数企业已经转向现代身份和访问管理(IAM) 平台&#xff0c;但成千上万的企业和其他组织仍然依赖过时的用户名/密码系统。 如果你看一下传…

电脑断网或者经常断网怎么办?

1、首先&#xff0c;按一下键盘的win R &#xff0c; 在打开的运行框内输入&#xff1a;cmd 然后按一下回车 或者 点击一下【确定】 2、在命令窗口输入&#xff1a;ipconfig/release , 然后按一下回车 作用&#xff1a;IP释放&#xff0c;相当于把网线拔了重新插上 3、接着…