第一课 Vue环境准备

时间:2024-10-07 06:57:23

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>