什么是Vue？
Vue是一个渐进式的js框架，采用的是MVVM模式的双向绑定，
Vue的使用
引入vue
<script src="vuejs/vue.js"></script>
1.1 路径(相对路径)
1.2 vue.js[开发版,可以看源码]/vue.min.js[体积小,加载速度快]
2.准备vue的工作台(挂载点)
<div id="app"> {{message}} {{say()}}</div>
3.准备数据(创建vue对象)
3.1 el:元素的挂载(id,class,标签：建议使用id),只有挂载的元素才能使用表达式这些
3.2 data:数据(vue对象的所有数据都写在这里)
3.3 methods:vue对象的方法(可以有多个)
this指的就是这个vue对象,js与表达式中都可以调用这个方法
var app = new Vue({
el:"#app",
data:{
message:"你好啊"
},
methods:{
say(){
return this.message+",xxxx";
}
}
})
Vue双向绑定
双向绑定就是指，当view中的值发生 变化时通过监听到后会将model中的值也做出同样的改变，当model中的值发生改变时通过绑定数据，也会u改变view中的值
Vue表达式
Vue的表达式和js中的 表达式写法和用法差不多
Vue指令
v-text:直接展示
v-html:直接展示(但是可以解析html标签)
v-for:循环(数组,对象,数字,字符串)
v:值 i:下标 k:属性名
v-for="(v,i) in 数组"
v-for="(v,k,i) in 对象"
v-show:将数据给隐藏掉，
v-if:判断条件是否成立，当不成立时那么代码将被隐藏掉
v-else-if=""
v-else
v-bind:绑定属性(属性中使用vue的表达式)
标准写法: <img v-bind:src="src" />
简写形式(建议): <img :src="src" />
绑定对象属性: <img v-bind="img" />
1 <div id="sh"> 2 <!-- 3 bind就是将标签中的属性赋值从Vue中取值出来进行绑定 4 有三种方法，第一种 5 <img v-bind:src="src"> 6 第二种 <img :src="src"> 7 第三种 <img v-bind="img" >这个方式就是将数据种所有信息全部读取出来 8 --> 9 <img :src="src" :alt="alt"> 10 11 </div> 12 13 </body> 14 <script> 15 new Vue({ 16 el:"#sh", 17 data:{ 18 src:"/ind/a.jpg", 19 alt:"没有图片" 20 } 21 })
for循环和bing组合案例
<div id="aa">
<table border="1px">
<tr v-for="u in user">
<td>{{u.id}}</td>
<td>{{u.name}}</td>
<td>{{u.age}}</td>
<td>{{u.sex? "男":"女"}}</td>
<td>{{u.dept.name}}</td>
</tr>
</table>
<!--for循环遍历这个数组-->
<ul v-for="h in hobby">
<li>{{h}}</li>
</ul>
</div>
</body>
<script>
new Vue({
el:"#aa",
data:{
user:[
{id:1,name:"燕人张飞",age:30,sex:true,dept:{name:"蜀"}},
{id:2,name:"常山子龙",age:24,sex:true,dept:{name:"蜀"}},
{id:3,name:"枭雄曹操",age:18,sex:true,dept:{name:"魏"}},
],
hobby:["一尺","一桌","一堂木而"]
}
})
v-model:双向绑定(只能用到input,select,textarea中)
v-on:事件绑定
<input type="button" v-on:click="say()" />
<input type="button" v-on:click="say" />
简写形式:
<input type="button" @click="say" />
组件(自定义标签)
注意事项
1.先定义组件，再挂载
2.组件的模板必需要一个根标签
3.命名如果是驼峰(建议小写) myTag -> <my-tag>
全局组件:
Vue.component("mytag",{
//组合的模板
template:"<h1>假如有一千句html</h1>"
})
局部组件：
new Vue({
el:"#app",
//组件(多个)
components:{
mytag:{
template:"<h2>我是局部组件</h2>"
}
}
})
