码迷,mamicode.com
首页 > 其他好文 > 详细

Vue基础指令

时间:2018-10-23 00:09:03      阅读:189      评论:0      收藏:0      [点我收藏+]

标签:运动   视图   body   ==   .com   methods   htm   com   his   

 

一 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.计算属性

Vue基础指令

标签:运动   视图   body   ==   .com   methods   htm   com   his   

原文地址:https://www.cnblogs.com/wdbgqq/p/9833751.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!