基础语法
安装VUE
入门Demo
定义的Vue只有id是app的才能使用他的变量值name，age，gender。
+ - 方法非id是app的也不可以调用。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 引入vue --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body><div id="app"><div>{{name}}</div><div>{{age}}</div><div>{{gender}}</div><button type="button" @click="add()">+</button><button type="button" @click="sub()">-</button></div><div id="web"><button type="button" @click="add()">+</button><button type="button" @click="sub()">-</button></div><script type="text/javascript">/*{{}}:插值表达式*/ var vue = new Vue({// el 是vue绑定的页面元素el: "#app",// data: 是绑定到页面中的数据data:{name:'musen',age:18,gender:'男'},methods:{// vue方法中的this代表的vue这个对象add:function(){this.age++},sub:function(){this.age--}},})</script></body>
</html>
指令
常见指令：
v-text：往标签中插入文本值
v-html：往标签中插入html元素
v-pre：在标签中显示原始文本内容，这里还是显示{{info}}
v-show：控制元素的显示和隐藏（根据v-show指定的布尔值例来决定）
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body><div id="box"><span>{{user}}</span><span v-text="user"></span><div v-html="info"></div><div v-pre>{{info}}</div><input type="text" v-show="status"></div><script type="text/javascript">/*常见指令： v-text：往标签中插入文本值v-html:往标签中插入html元素v-pre:在标签中显示原始文本内容，这里还是显示{{info}}v-show:控制元素的显示和隐藏（根据v-show指定的布尔值例来决定）*/var vue = new Vue({el: '#box',data: {user: '小柠檬',info: '<h1>python</h1>',status:false}})</script></body>
</html>
属性绑定
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><style type="text/css">.hide {width: 100px;height: 200px;background: red;}</style></head><body><div id="box"><div class="hide">1</div><hr><div :class="cls">2</div><hr><div :class="[cls]">3</div><hr>/* 这个hide使用的头部hide，并不是对象里的hide*/<div :class="{hide:status}">4 </div><a :href='addr'>淘宝</a><a :href="addr2">百度</a></div><script type="text/javascript">/*** v-bind 可以简写为 :* v-bind:属性值 = 绑定的数据*/var vue = new Vue({el: '#box',data: {cls: 'hide',status: true,addr:'http://www.taobao.com',addr2:'http://www.baidu.com',}})</script></body>
</html>
事件绑定
点击事件
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body><div id="box"><button type="button" @click="sub()">-</button><input type="text" :value="number"><button type="button" v-on:click="add()">+</button> </div><script type="text/javascript">/*** v-on：可以简写为 @* v-on:事件名 = 执行的函数*/var vue = new Vue({el: '#box',data: {number:0},methods:{add:function(){this.number++},// 定义方法时：将function省略，和上面定义的add方法没有区别sub(){this.number--}}})</script>;</body>
</html>
条件判断
if
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body><div id="app"><div><span v-text="user"></span><span v-text="score"></span><span v-if="score>80">优秀</span><span v-else-if="score>60">良好</span><span v-else=>不及格</span></div></div><script type="text/javascript">/*0-60 不及格60--80 良好80-100 优秀vue中的条件判断语句：根据不同的条件显示不同的内容v-ifv-else-ifv-else:*/ var vue = new Vue({el:"#app",data:{stus:[{name:'木森',score:100},{name:'盼盼达',score:78},{name:'好好先生',score:89},{name:'枫',score:99},],score:88,user:'musen'}})</script></body>
</html>
for
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body><div id="app"><table border="" cellspacing="" cellpadding=""><tr><th>姓名</th><th>成绩</th><th>等级</th></tr><!-- // key 需要指定一个数据中唯一的值 --><tr v-for='item in stus' :key='item.score'><td>{{item.name}}</td><td>{{item.score}}</td><td v-if="item.score>80">优秀</td><td v-else-if="item.score>60">良好</td><td v-else>不及格</td></tr></table></div><script type="text/javascript">/*0-60 不及格60--80 良好80-100 优秀 v-for：循环语句,记得加:key='item.唯一的属性'*/var vue = new Vue({el: "#app",data: {stus: [{name: '木森',score: 100},{name: '盼盼达',score: 100},{name: '好好先生',score: 89},{name: '枫',score: 99},],score: 88,user: 'musen'}})</script></body>
</html>
数据双向绑定
前端改了，代码的值也改了。代码的值改了，前端也改了。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body><div id="app"><input type="text" v-model="info"><div>{{info}}</div></div><script type="text/javascript">var vue = new Vue({el:'#app',data:{info: 'python'}})</script></body>
</html>
![数据结构05：树与二叉树[C++][哈夫曼树HuffmanTree]](https://img-blog.csdnimg.cn/63c3e7cd38084e21b7dffcac19dbc494.png)
