跟女神混没前途的！在怎么也不过是一曲觊觎天鹅的癞蛤蟆狂想曲啊！老话怎么说来着？十鸟在林不如一鸟在手呀！天上金凤凰不如枝头小乌鸦呀!
编辑器选择
建议使用HBuilderX，下载地址
用来写前端很舒服，并且比pycharm来写前端更加灵活
配置环境
首先下载vue.js，下载地址Vue.js下载,大概一万多行的js代码，就是Vue.js的全部内容了。
然后创建两个文件夹和一个html文件，目录结构如下：
lib\
vue.js
js\
html.js
index.html
其中lib目录下的vue.js文件就是下载的代码，js目录下的html.js就是自己写的就是js项目代码，index.html即首页文件。
或者远程调用：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
声明渲染
vue.js的语法有点像Jinja2的语法，也是使用两个花括号包围变量。在index.html中定义的变量是app，el表示元素的挂载点，即在new创建的实例中使用，data是核心，用来保存数据，如下：
html.js的代码如下：
var app = new Vue({
# 定义一个变量app
el:'#app',
# el：这个实例应用在app变量上，即id=app中才会启用这个实例
data:{
# data：用来保存数据
name:'admin',
# data内数据，'admin'赋值给name
age:18,
sex:'male',
}
})
index.html的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>langzi</title>
</head>
<body >
666
<div id="app">
# 这里ip=app就会调用上面的app
{{ name}}
# 里面可以直接调用app实例中的数据
</div>
<script src="lib/vue.js"></script>
//别忘了要先导入vue.js，不然会报错
<script src="js/html.js"></script>
</body>
</html>
这个时候页面就会返回666和admin的值，其中你主要编辑的内容是index.html与js目录下的html.js代码
如下就是一个例子：
需要注意的是，script标签内定义的实例要写在下面哦
指令合集
在Vue.js中，自带的基础用法叫指令，格式是v-xxx，作用效果总结如下：
v-model 指令
v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。如果想要根据自己的输入显示出输入的内容，那么在html文件中就可以这么写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>langzi</title>
</head>
<body >
<div id="app">
<div>
<input type="text" v-model="name">
<span>当前输入用户名为:{{name}}</span>
</div>
<div>
<input type="text" v-model="age">
<span>当前输入年龄为:{{age}}</span>
</div>
<div>
<input type="text" v-model="sex">
<span>当前输入性别为:{{sex}}</span>
</div>
</div>
<script src="lib/vue.js"></script>
<script src="js/html.js"></script>
</body>
</html>
效果如下
<span v-show="name">当前输入用户名为:{{name}}</span>
v-show的作用即如果name的值为空的话，就不显示出来，只有当输入的值存在的话才会显示出来。
