vue基础知识

vue基础知识

声明式的将数据渲染为 DOM
我们还可以采用绑定 DOM 元素属性

v-bind 属性被称为指令。指令带有前缀 v-，表示是由 Vue 提供的专用属性

1.数据渲染：v-text、v-html、{{}}
2.条件渲染 控制模板隐藏:v-show 、v-if、v-else
3. v-for 渲染循环列表
4. v-on绑定事件
5.v-bind 绑定属性


事件
v-on 指令 来增加事件监听器


组件
几乎任意类型的应用程序界面，都可以抽象为一个组件树

view

        <div id="app2"><img src="" v-bind:alt="msg2" :title="title"><!-- 此处动态绑定的 alt属性 --><!-- 缩写 :title --></div><div id="app3"><p>{{msg3}}</p><button v-on:click="reverseMessage()">反转上文</button></div><!--  --><div id="app4"><p v-if="flag">{{msg3}}</p></div><!--  --><ul id="app5"><li v-for="item in datas">{{item.name}}</li><!-- <li v-for="item in datas" v-if="block">{{item.age}}</li> --></ul>

js

      var v2 = new Vue({el:'#app2',data:{msg2:'没图，哈哈',title:'这是一张美图'}});var v3 = new Vue({el:'#app3',data:{msg3:'事件绑定'},methods:{reverseMessage:function(){this.msg3 =this.msg3.split('').reverse().join('');}}});var v4 = new Vue({el:'#app4',data:{msg3:'条件控制',flag:false}});var v5= new Vue({el:'#app5',data:{datas:[{name:'zhangsan',age:14},{name:'lisi'},{name:'wangwu'}],// block:()?true:false}});