Vue 初体验 (一) 安装及简单用法

推荐一位讲前端技术特别多干货的选手:https://biaoyansu.com/#roadmap
推荐一款编辑器 atom,主要是喜欢这种编辑感!
Vue 初体验 (一) 安装及简单用法

打开https://www.bootcdn.cn/

Vue 初体验 (一) 安装及简单用法
Vue 初体验 (一) 安装及简单用法
直接转到该网址,右键,另存为(这样的话使用的方便一些)

Vue 初体验 (一) 安装及简单用法

新建好html,将刚刚下载的js导入,新建一个main.js
Vue 初体验 (一) 安装及简单用法
demo.html 如下

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- Vue的初步应用 -->
<div id="app">
  {{name}}
</div>
<script src="vue.js"></script>
<script src="main.js"></script>
</body>
</html>

main.js 如下

new Vue({
  el:'#app',
  data:{
    name:'我是大帅比'
  }
})

效果
Vue 初体验 (一) 安装及简单用法
el:’#app’ 意思是,Vue的作用域是 id为app
html中,{{name}}会去Vue中寻找数据。

上一篇:Linux--系统管理


下一篇:vue el-input-number 不能增减