之前学习Vue的一些基础，整理一下
准备
软件：
1.HbuildX
下载地址：
https://pan.baidu.com/s/1NvMzBvIj8SDt2sGOPwHYgg
非常好用的vue入门软件
2.node.js
学习vue需要的软件，自己百度搜索下载即可
js文件
下载vue.js
https://cn.vuejs.org/v2/guide/installation.html
部署
引入vue.js
打开HBuilderx，复制vue.min.js文件，点击vuedemo目录直接粘贴
新建index.html文件
引入vue.js文件
vue部署完毕
实例
实例1 todolist，v-for 循环渲染
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="vue.min.js"></script> </head> <body> <div id="app"> <input type="text" /> <button>提交</button> <!-- <ul> <li>第一课的内容</li> <li>第二课的内容</li> </ul> --> <ul> <li v-for="item in list">{{item}}</li> </ul> </div> <script> var app=new Vue({ el:'#app', data: { list: ['第一课','第二课'] } }) </script> </body> </html>
效果（点击右侧预览即可）
实例2 2秒后换数据
<body> <div id="app"> {{content}} </div> <script> var app=new Vue({ el:'#app', data: { content:'hello world' /* list: ['第一课','第二课'] */ } }) setTimeout(function(){ app.$data.content='bye world!' },2000) </script> </body>
效果
=>
实例3 点击按钮弹框
<div id="app"> <input type="text" /> <button v-on:click="handleBtnClick">提交</button> <ul> <li v-for="item in list">{{item}}</li> </ul> </div> <script> var app=new Vue({ el:'#app', data: { list: [] }, methods:{ handleBtnClick:function(){ alert('click') } } }) </script>
效果
实例4 v-model，数据双向绑定
<div id="app"> <input type="text" v-model="inputValue"/> <button v-on:click="handleBtnClick">提交</button> <ul> <li v-for="item in list">{{item}}</li> </ul> </div> <script> var app=new Vue({ el:'#app', data: { list: [], inputValue: '' }, methods:{ handleBtnClick:function(){ alert(this.inputValue) } } }) </script>
此时输入框输入123，打印inputValue的值为123
inputValue的值设置为456，input框的值对应改变
在handleBtnClick的方法中增加如下代码
this.list.push(this.inputValue) this.inputValue=''
点击按钮就会把inputValue的值推进List,并渲染出来
