一 Vue框架简介
Vue是一个构建数据驱动的web界面的渐进式框架。
目标是通过尽可能简单的API实现响应式的数据绑定和组合的视图组件
1 <div id="app"> 2 <span>你的名字是{{name}}</span> 3 </div> 4 var app=new Vue({ 5 el: '#app', 6 data:{ 7 name:'wdb' 8 } 9 })
二 Vue指令
Vue的指令directives很像我们所说的自定义属性，指令是Vue模板中最常用的功能，
它带有v-前缀，功能是当表达式改变的时候，相应的行为作用在DOM上。
1.v-text v-html
1 <body> 2 <div id="app"> 3 <p v-text="name"></p> 4 <div v-html="hobby"></div> 5 </div> 6 const app=new Vue({ 7 el: '#app', 8 data:{ 9 name:'wdb', 10 hobby:` 11 <ul> 12 <li>抽烟</li> 13 <li>喝酒</li> 14 <li>烫头</li> 15 </ul> 16 ` 17 } 18 }) 19 </body>
2.v-for
1 <div id="app"> 2 <h3>{{name}}</h3> 3 <p>他喜欢的运动是:</p> 4 <ul> 5 <li v-for="(index,sport) in sports" :key="index">{{index}}{{sport}}</li> 6 </ul> 7 <ul> 8 <li v-for="item in array">姓名:{{item.name}} 年龄:{{item.age}} 职业:{{item.job}}</li> 9 </ul> 10 </div> 11 <script> 12 const app=new Vue({ 13 el:'#app', 14 data:{ 15 name:'王东波', 16 sports:['football','basketball','volleyball'], 17 array:[{ 18 name:'wdb', 19 age:22, 20 job:'engineer' 21 }] 22 } 23 }) 24 </script>
3.v-if
1 <div id="app"> 2 <div v-if="level=='high'"> 3 <h2>this is high level!</h2> 4 </div> 5 <div v-else-if="level=='normal'"> 6 <h2>this is normal level!</h2> 7 </div> 8 <div v-else> 9 <h2>sorry!</h2> 10 </div> 11 </div> 12 <script> 13 const app=new Vue({ 14 el:'#app', 15 data:{ 16 level:'normal', 17 } 18 }) 19 </script>
4.v-show 操作的是display属性
1 div> 2 <div v-show="app"> 3 <h2>王东波</h2> 4 </div> 5 </div> 6 <script> 7 const app=new Vue({ 8 el:'#app', 9 data:{ 10 is_show:true, 11 } 12 }) 13 </script>
5.v-on v-bind v-bind : v-on @
1 <div id="app"> 2 <p class="alex_color" :class="{bg:is_green}">alex</p> 3 <button @click="my_click(123)">点击变绿</button> 4 </div> 5 <script> 6 const app=new Vue({ 7 el:'#app', 8 data:{ 9 is_green:false, 10 }, 11 methods:{ 12 my_click:function (data) { 13 this.is_green=!this.is_green; 14 }, 15 } 16 }) 17 </script>
6.v-model
1 <div id="app"> 2 <input type="text" v-model="input"> {{input}} 3 <textarea name="" id="" cols="30" rows="10" v-model="article"></textarea> {{article}} 4 <select name="" v-model="lady" multiple> 5 <option value="first">小苍</option> 6 <option value="second">小波</option> 7 <option value="third">小麻</option> 8 </select> 9 {{lady}} 10 </div> 11 <script> 12 const app=new Vue({ 13 el:'#app', 14 data:{ 15 input:'', 16 article: '', 17 lady:['first','third'] 18 } 19 }) 20 </script>
7.指令修饰符 -- .number -- .lazy -- .trim
1 <div id='app'> 2 用户名: <input type="text" v-model.lazy.trim="username"><br> 3 {{username}} 4 手机号: <input type="text" v-model.number="phone"><br> 5 {{phone}} 6 </div> 7 <script> 8 var app = new Vue({ 9 el: '#app', 10 data: { 11 username: "", 12 phone: "", 13 }, 14 }); 15 </script>
8.自定义的指令
9.计算属性