2. Vue.js 基本代码
2020-02-17 本文已影响0人
Devops海洋的渔夫
前言
Vue框架是渐进式的框架，也就是说可以使用引用js库的方式来逐步替换已有的项目内容。也可以直接用cli直接模板部署。
当然，作为新手要去熟悉，最好还是以引入vue js库的方式逐步去编写熟悉。
下载Vue.js库
访问vue中文官网。
这里有两个版本可以下载，当然在学习的过程要下载开发版本，而生产环境则需要使用生产版本了。
创建一个项目，并创建一个lib文件夹，用于存放下载的vue.js库。如下：
那么下一步，先不用vuejs来直接编写helloworld，而是用常规的js来编写。
使用常规的js来编写helloworld
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>helloworld</title>
</head>
<body>
<div id="app"></div>
<script>
var dom = document.getElementById('app');
dom.innerHTML = "hello world";
</script>
</body>
</html>
浏览器显示如下：
可以看到原生的js如果要填充数据，那么就必须操作dom元素。下面来看看vue如何将hello world的数据渲染到浏览器中。
编写vue的基本代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 1.导入vue.js库 -->
<script src="lib/vue.js"></script>
</head>
<body>
<!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 -->
<!-- Vue 实例所控制的这个元素区域，就是我们的 V -->
<div id="app">
<p>{{ msg }}</p>
</div>
<script>
// 2. 创建一个Vue的实例
// 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数
// 注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者
var vm = new Vue({
el: '#app', // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
// 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的
data: { // data 属性中，存放的是 el 中要用到的数据
msg: 'Hello world,Vue!' // 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
}
})
</script>
</body>
</html>
浏览器显示如下：
