CND
- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
第一个Vue程序
- 创建工程
- 安装vue插件:settings--Plugins--搜索vue
- 创建html文件,导入Vue.js(可以使用在线的CDN)
- 开始写代码
demo1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层-->
<div id="app">
{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
//Model层
data: {
message: "hello,vue!"
}
});
</script>
</body>
</html>
使用Vue框架可以通过新建Vue对象来控制html元素,新建的Vue对象可以通过el绑定元素,如使用id名进行绑定。
代码运行结果:
Vue可以实现MVVM架构,分别为Model层、View层和View Model层。Model层和View层在代码中可以直接体现,View Model层可以通过对网页元素的检查体现。如在console窗口下对vm对象的message属性进行修改,则网页不需要刷新,就能立即做出响应。
这是一个最简单的Vue程序,希望能帮助像我一样的代码小白入个门。