Vue是什么？
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，
Vue 也完全能够为复杂的单页应用提供驱动。
Vue基本使用
vue在html里的使用，有一个vue根节点，比如 div 。在div里所有的内容都可以用vue实例进行管理，数据表示形式{{变量}},
<div class="app"><p>用户名:{{username}}</p></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>//class=“app” 就是挂载点，vue可以操作其包裹的所有元素const vm=new Vue({//挂载点el:'.app',//数据注入data:{username:'小红'，}})</script>
怎么获取p标签里的内容？
vm.$data.username;即可获得
简写为：vm.username;直接改变p标签里的内容 vm.username=”小明”;
v-text,v-once,v-html指令
<p v-text="username"></p><p v-once="username"></p><p v-html="name"></p>//以上这些跟<p>{{username}}</p>表现形式一样
v-once跟v-text一样，区别是v-once只能被渲染一次，
v-html能解析html元素
const vm=new Vue({//当前的vue的配置项//挂载点// 简写 el:document.querySelector('.app'),el:'.app',//数据注入data:{username:'小红',name:'<em style="color:red">刀郎</em>',}});
绑定指令
v-bind,v-on
<p v-bind:style="style1">{{site}}</p>//v-bind是高频指令，为了方便可以写成 ：冒号<p :style="style1">{{site}}</p>//v-on也是高频指令，可写成 @//.prevent a标签的默认跳转行为//.once 只执行一次<p><a href="https://php.cn" v-on:click.prevent="show">显示网站名称</a></p><p><a href="" @click.prevent.once="show">显示网站名称</a></p><script>const vm=new Vue({//挂载点el:'.app',//数据注入data:{site:'门户网站'，//绑定属性style1:'color:red',}，//绑定事件methods:{show(){//this就是当前的vue实例alert(this.site);}}})</script>
绑定事件对象
<button @click="handle=($event,100,200)">click</button>//事件对象的参数名必须是 $eventconst vm=new Vue({//当前的vue的配置项//挂载点// 简写 el:document.querySelector('.app'),el:'.app',//绑定事件methods:{handle(ev,a,b){console.log(a,"+",b,"=",a+b);}}});
v-model双向绑定
<p>模型中的数据：{{site}}</p>//$event表示事件对象<p>双向绑定:<input type="text" :value="site" @input="site=$event.target.value"></p><script>const vm=new Vue({el:'.app',data:{site:'php中文网',},});</script>
这就是双向绑定，但这样太麻烦，有一个简便的指令v-model
<p>模型中的数据：{{site}}</p>//.lazy 表示更新不频繁，除非按回车才改变<p>双向绑定:<input type="text" v-model.lazy='site'></p>//.number表示数字类型<p><input type="text" v-model.number='num'></p><p>{{typeof num}}</p><script>const vm=new Vue({el:'.app',data:{site:'php中文网',num:0,},methods:{}});</script>
v-for遍历
遍历数组，对象，对象数组
<body><div class="app"><!-- key可以干预diff算法 --><!-- vue通过稳定且唯一的key值 判断这个节点是否需要更新,以提升效率 --><!-- key只能是整数或不重复的字符串 --><ul><li v-for="(item,index) in items" :key="index">{{index}}--{{item}}</li></ul><ul><li v-for="(item,prop,index) in user" :key="prop">{{prop}}--{{index}}--{{item}}</li></ul><ul><li v-for="(user,index) in users" :key="user.id">{{user.id}}--{{user.name}}</li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const vm=new Vue({el:'.app',data:{items:["合肥","苏州","杭州"],//对象user:{name:"小红",email:"tp@php.cn",},//对象数组users:[{id:1,name:"小明",email:"qq@qq.com"},{id:2,name:"小彭",email:"123@qq.com"},{id:3,name:"小龙",email:"163@qq.com"},]},});</script></body>